All right Sideboxes on slides stacking to top

[edjw]

All Sideboxes on the right stack up at the top instead of being next to the question that the box is about. Ideally, we would be able to place Sideboxes next to the content they are linked to.

I've looked at putting

<div class="row">
    <div class="col-xs-12">
        [--box|example--]content[--endbox--]
        Questions and text
    </div>
</div>

into the editor to try to keep them together but all 'boxes' are just pulled out and put in a different column regardless

How easy is it to undo that and give us a bit more control over the placement of the boxes?

[edjw]

Maybe this is a problem where css grid comes into its own

[edjw]

This is what it looks like at the moment

[edjw]

Ok I have solution to this. Each question should be in a new Bootstrap .row. Within that row should be the left column with the questions and answers in. And the right column with the context box for that question. I put a screenshot of what we want it to look like at the bottom along with a dump of the html I wrote to demo it.

Can we build this into the default way that the html is contstructed in slides?

So we probably need a [--xxx--] style markup like this which would create a new row and
[--new_question--]. Something like this below. It is probably overdone and if we can find a less involved way with less boilerplate of achieving this result then that would be good!

[--new_question--]
    [--left--]
        questions content
    [--end_left--]

   [--right--]
        [--box|type--]
            box_1 content
        [--endbox--]

        [--box|type--]
            box_2 content (optionally)
        [--endbox--]
    [--end_right--]

[--end_question--] 

[--new_question--]
    [--left--]
        questions content
    [--end_left--]

   [--right--]
        [--box|type--]
            box_1 content
        [--endbox--]

        [--box|type--]
            box_2 content (optionally)
        [--endbox--]
    [--end_right--]

[--end_question--] 

<div class="row">
    <div class="col-xs-12">

        <!-- One question and context row -->
        <div class="row">

            <!-- left column questions -->
            <div class="col-md-7 col-sm-8 col-xs-12">
                <h2>
                    Do you handle other sensitive data?
                </h2>

                <p>
                    There are other types of data that can bring privacy, social or ethical risks but do not receive
                    special protection
                    in the law as such.
                </p>

                <ul>
                    <li>
                        <div class="checkbox"><input id="check-answer[1]" name="answer[1]" type="checkbox"
                                value="Location data"> Location data</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[2]" name="answer[2]" type="checkbox"
                                value="Real life biographical data"> Real life biographical data</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[2]" name="answer[2]" type="checkbox"
                                value="Other"> Other</div>
                        <textarea id="multianswer-2" name="multianswer[2]" class="form-control" rows="8"></textarea>

                    </li>
                </ul>
            </div>
            <!-- end of left column questions -->

            <!-- right column context boxes -->
            <div class="col-md-5 col-sm-4 col-xs-12">
                <aside>
                    <div class="box box-example">
                        <h3>example</h3>
                        <p>Personal data is information that relates to an identified or identifiable individual. This
                            will be easy to establish when you are dealing with names or other clear identifiers such as
                            IP addresses or cookies. In some cases, it may be difficult to establish whether the data is
                            personal, for example if you only collect sensor data without any identifiers. In this
                            situation you need to consider whether that data can be linked to other information you may
                            be able to access.</p>
                    </div>
                </aside>
            </div>

            <!-- end of right column context boxes -->
        </div>
        <!-- End of one question and context row -->

        <!-- One question and context row -->
        <div class="row">

            <!-- left column questions -->
            <div class="col-md-7 col-sm-8 col-xs-12">
                <h2>
                    Do you handle specially protected data?
                </h2>

                <p>
                    European laws give special protections to certain categories of data. It is important that you are
                    clear on whether
                    you are dealing with these types of data and have the appropriate measures. These data also tend to
                    raise important
                    ethical quesitons beyond legal compliance.
                </p>

                <ul>
                    <li>
                        <div class="checkbox"><input id="check-answer[1]" name="answer[1]" type="checkbox"
                                value="Racial or ethnic origin"> Racial or ethnic origin</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[2]" name="answer[2]" type="checkbox"
                                value="Political opinions"> Political opinions</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[3]" name="answer[3]" type="checkbox"
                                value="Trade union membership"> Trade union membership</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[4]" name="answer[4]" type="checkbox"
                                value="Medical data or sex life and sexual orientation"> Medical data or sex life and
                            sexual orientation</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[5]" name="answer[5]" type="checkbox"
                                value="Genetic data"> Genetic data</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[6]" name="answer[6]" type="checkbox"
                                value="Genetic data"> Genetic data</div>
                    </li>
                    <li>
                        <div class="checkbox"><input id="check-answer[7]" name="answer[7]" type="checkbox"
                                value="biometric data where processed to uniquely identify a person"> biometric data
                            where processed to uniquely identify a person</div>
                    </li>
                </ul>
            </div>
            <!-- end of left column questions -->

            <!-- right column context boxes -->
            <div class="col-md-5 col-sm-4 col-xs-12">
                <aside>
                    <div class="box box-example">
                        <h3>example</h3>
                        <p>Personal data is information that relates to an identified or identifiable individual. This
                            will be easy to establish when you are dealing with names or other clear identifiers such as
                            IP addresses or cookies. In some cases, it may be difficult to establish whether the data is
                            personal, for example if you only collect sensor data without any identifiers. In this
                            situation you need to consider whether that data can be linked to other information you may
                            be able to access.</p>
                    </div>
                </aside>
            </div>

            <!-- end of right column context boxes -->

        </div>
        <!-- End of one question and context row -->

    </div>
</div>

[dantheta]

Unfortunately the main page content is all rendered in the same container, with an aside column to the right. It's quite hard to split that container at the right points in the content during the template rendering. Moving the layout divs into the page content would also prove problematic during the render of the recap.

As a yucky short-term measure, I've added javascript to get the vertical position of the box placement in the main content, and move the sidebox content to that vertical position (more-or-less). We'll see if that's good enough for now. Hopefully the sideboxes won't render on top of each other, although as a similarly yucky short-term measure the main content can be padded with vertical whitespace so break them apart.

If we convert the main slide template to use the other templating language, then there might be more possibilities for intelligent rendering.

Let me know what you think during the run-throughs, and feel free to re-open this issue if needed.