View source for Widget:Compass

<noinclude>Development version of the Compass.<br><strong style="color:red;">Not ready for production!</strong>
</noinclude>
<includeonly>
    <style>
        .plus.icon {
            color: #000;
            position: absolute;
            margin-left: 3px;
            margin-top: 10px;
        }

        .plus.icon:before {
            content: '';
            position: absolute;
            width: 15px;
            height: 1px;
            background-color: currentColor;
        }

        .plus.icon:after {
            content: '';
            position: absolute;
            width: 15px;
            height: 1px;
            background-color: currentColor;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        #cmp-container {
            font-family: 'Open Sans';
            font-size: 120%;
        }

        #cmp-container h1,
        #cmp-container h2,
        #cmp-container h3 {
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
        }

        #cmp-container h1 {
            letter-spacing: .06em;
        }

        #cmp-container h2 {
            margin-top: 2em;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--links-cyan);
            color: var(--links-cyan);
            cursor: pointer;
        }

        /* #cmp-container h2::after {
            display: inline-block;
            content: "→";
            transform: rotate(90deg);
            margin-left: .5em;
        } */

        /* #cmp-container h2.opened::after {
            transform: rotate(-90deg);
        } */

        #cmp-container h3 {
            font-weight: 1.4em;
            cursor: pointer;
        }

        .subtheme {
            padding-left: 1em;
            margin-bottom: 2em;
        }

        .question {
            font-size: 1.2em;
            padding-left: 2em;
            cursor: pointer;
            margin-bottom: 1em;
        }

        .question::before {
            content: "→ ";
        }

        .answer {
            margin: 1.4em;
        }

        .subtheme,
        .question,
        .answer {
            display: none;
        }

        .subtheme.opened,
        .question.opened,
        .answer.opened {
            display: block;
        }

        .answer-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1em;
        }

        .choice {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1em;
            transition: all 250ms;
        }

        .choice small {
            font-size: 70%;
        }

        .choice.tech {
            color: var(--links-blue);
            border: 1px solid var(--links-blue);
        }

        .choice.guide {
            color: var(--links-orange);
            border: 1px solid var(--links-orange);
        }

        .choice.tech:hover {
            background-color: var(--links-blue);
            color: #fff;
        }

        .choice.guide:hover {
            background-color: var(--links-orange);
            color: #fff;
        }
    </style>

    <div id="cmp-container">
        <div class="theme">
            <h2>Engaging Citizens <div class="plus icon"></div></h2>
            <div class="subtheme">
                <h3>Collecting and Analysing Information from SMCS</div></h3>
                <div class="question" data-aspect="Social">
                    Whom do you want to include in your collection and analysis of information, and from whom do you
                    want to collect and analyse information?

                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div>
                            <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small>
                            </div>
                            <div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div>
                            <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small>
                            </div>
                            <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How to collect and analyse information from citizens?

                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div>
                            <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subtheme">
                <h3>Mobilising Citizens</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to mobilise, and from whom would you want mobility-affiliated information?
                </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you mobilise the citizens?
                </div>
            </div>
            <div class="subtheme">
                <h3>Mobilising Volunteers</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to mobilise (interested in volunteering), and from whom in such volunteering
                    positions would you want mobility-affiliated information?
                </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you mobilise the volunteers?
                </div>
            </div>
        </div>

        <div class="theme">
            <h2>Improving Communication</h2>
            <div class="subtheme">
                <h3>Making Information Accessible</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to access your information, and from whom do you want to access information?
                </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you make your information accessible?
                </div>
            </div>
            <div class="subtheme">
                <h3>Targeting Communication</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to target with your communication plan?
                </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you target your communication?
                </div>
            </div>
            <div class="subtheme">
                <h3>Ensuring Credible Information</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to share credible information with, and from whom do you receive credible
                    information?
                </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you ensure credible information exchange?
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('cmp-container').addEventListener('click', event => {
            if (event.target.tagName === 'H2') {
                event.target.classList.toggle('opened');
                event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened'));
            }
            if (event.target.tagName === 'H3') {
                event.target.classList.toggle('opened');
                event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened'));
            }
            if (event.target.classList.contains('question')) {
                event.target.querySelector('.answer')?.classList.toggle('opened');
            }
        });
    </script>
</includeonly>