Difference between revisions of "Widget:Compass"
From LINKS Community Center
(36 intermediate revisions by 2 users not shown) | |||
Line 10: | Line 10: | ||
h2.opened .plus.icon::after, | h2.opened .plus.icon::after, | ||
− | h3.opened .plus.icon::after { | + | h3.opened .plus.icon::after, |
+ | h4.opened .plus.icon::after { | ||
transform: rotate(0); | transform: rotate(0); | ||
} | } | ||
Line 26: | Line 27: | ||
letter-spacing: .06em; | letter-spacing: .06em; | ||
position: relative; | position: relative; | ||
+ | } | ||
+ | |||
+ | #cmp-container h4 { | ||
+ | font-size: 1em; | ||
+ | font-weight: 300; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | #cmp-container h4.opened { | ||
+ | font-size: 1em; | ||
+ | font-weight: 500; | ||
} | } | ||
Line 43: | Line 55: | ||
color: var(--compass-color); | color: var(--compass-color); | ||
cursor: pointer; | cursor: pointer; | ||
+ | transition: all 0.4s ease; | ||
} | } | ||
Line 49: | Line 62: | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
− | left: | + | left: 1.2em; |
bottom: 0; | bottom: 0; | ||
width: 100%; | width: 100%; | ||
Line 71: | Line 84: | ||
.subtheme { | .subtheme { | ||
margin-bottom: 2em; | margin-bottom: 2em; | ||
+ | margin-left: 2em; | ||
} | } | ||
.question { | .question { | ||
font-size: 1.1em; | font-size: 1.1em; | ||
− | padding-left: | + | padding-left: 1.65em; |
cursor: pointer; | cursor: pointer; | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
Line 81: | Line 95: | ||
.answer { | .answer { | ||
− | margin: 1. | + | margin: 1em 1.8em; |
font-size: 1.2rem; | font-size: 1.2rem; | ||
} | } | ||
Line 118: | Line 132: | ||
align-items: center; | align-items: center; | ||
padding: 1em; | padding: 1em; | ||
− | border: 1px solid | + | color: #fff; |
+ | border: 1px solid; | ||
+ | /* border-radius: 10px; */ | ||
} | } | ||
Line 149: | Line 165: | ||
.choice.safe { | .choice.safe { | ||
color: var(--safe-color); | color: var(--safe-color); | ||
+ | } | ||
+ | |||
+ | .choice.tech .button { | ||
+ | background-color: var(--links-blue); | ||
+ | border-color: var(--links-blue); | ||
+ | } | ||
+ | |||
+ | .choice.guide .button { | ||
+ | background-color: var(--links-orange); | ||
+ | border-color: var(--links-orange); | ||
+ | } | ||
+ | |||
+ | .choice.case .button { | ||
+ | background-color: var(--links-cyan); | ||
+ | border-color: var(--links-cyan); | ||
+ | } | ||
+ | |||
+ | .choice.handbook .button { | ||
+ | background-color: var(--handbook-color); | ||
+ | border-color: var(--handbook-color); | ||
+ | } | ||
+ | |||
+ | .choice.safe .button { | ||
+ | background-color: var(--safe-color); | ||
+ | border-color: var(--safe-color); | ||
+ | } | ||
+ | |||
+ | .choice:hover .button { | ||
+ | background-color: #fff; | ||
} | } | ||
.choice.tech:hover .button { | .choice.tech:hover .button { | ||
− | + | color: var(--links-blue); | |
− | |||
} | } | ||
.choice.guide:hover .button { | .choice.guide:hover .button { | ||
− | + | color: var(--links-orange); | |
− | |||
} | } | ||
.choice.case:hover .button { | .choice.case:hover .button { | ||
− | + | color: var(--links-cyan); | |
− | |||
} | } | ||
.choice.handbook:hover .button { | .choice.handbook:hover .button { | ||
− | + | color: var(--handbook-color); | |
− | |||
} | } | ||
.choice.safe:hover .button { | .choice.safe:hover .button { | ||
− | + | color: var(--safe-color); | |
− | |||
} | } | ||
</style> | </style> | ||
Line 238: | Line 278: | ||
main themes – Engaging with Citizens and Improving Communication – so that disaster | main themes – Engaging with Citizens and Improving Communication – so that disaster | ||
management | management | ||
− | organizations and relevant stakeholders can take more informed decisions on the uses of | + | organizations and relevant stakeholders can take more informed decisions on the uses of Social Media and |
+ | Crowdsourcing through the | ||
LINKS products. Orientation is supported by pre-defined questions that guide users towards the LINKS | LINKS products. Orientation is supported by pre-defined questions that guide users towards the LINKS | ||
products. | products. | ||
Line 251: | Line 292: | ||
<h2>Engaging with Citizens</h2> | <h2>Engaging with Citizens</h2> | ||
<div class="subtheme"> | <div class="subtheme"> | ||
− | <h3>Collecting and Analysing Information from | + | <h3>Collecting and Analysing Information from Social Media and Crowdsourcing</h3> |
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | <h4>Whom do you want to include in your collection and analysis of information, and from whom do you | + | <h4> |
− | + | Whom do you want to include in your collection and analysis of information, and from whom do you | |
+ | want to collect and analyse information? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 261: | Line 304: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Helpful examples around the theme “Collecting and Analysing Information | |
− | + | from Social Media and Crowdsourcing”. | |
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 270: | Line 311: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidance for all interested | |
stakeholders, including disaster management organisations and practitioners, on how | stakeholders, including disaster management organisations and practitioners, on how | ||
− | to collect, analyse and use information from | + | to collect, analyse and use information from Social Media and Crowdsourcing. |
</div> | </div> | ||
</div> | </div> | ||
Line 279: | Line 320: | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you collect and analyse information? | + | <h4> |
+ | How can you collect and analyse information? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 286: | Line 329: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the functions “Search & Monitor” and “Analysis” | |
− | + | of information from Social Media and Crowdsourcing. | |
</div> | </div> | ||
</div> | </div> | ||
Line 293: | Line 336: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | Several thematic search filters integrated within the Guidelines | + | Several thematic search filters integrated within the Guidelines Library will help |
− | + | stakeholders retrieve relevant Social Media and Crowdsourcing guidelines to better | |
− | and engage citizens, for instance, the "crowdsourcing" search filter. | + | mobilise and engage citizens, for instance, the "crowdsourcing" search filter. |
</div> | </div> | ||
</div> | </div> | ||
Line 301: | Line 344: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Helpful examples around the theme “Collecting and Analysing Information | |
− | + | from Social Media and Crowdsourcing”. | |
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 314: | Line 355: | ||
<h3>Mobilising Citizens</h3> | <h3>Mobilising Citizens</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to mobilise, and from whom would you want mobility-affiliated information? | + | <h4> |
+ | Who do you want to mobilise, and from whom would you want mobility-affiliated information? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 321: | Line 364: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Helpful information from Social Media and Crowdsourcing | |
examples around the theme “Mobilising Citizens”. | examples around the theme “Mobilising Citizens”. | ||
</div> | </div> | ||
Line 328: | Line 371: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 336: | Line 379: | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you mobilise the citizens? | + | <h4> |
+ | How can you mobilise the citizens? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 343: | Line 388: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule | + | Schedule" which aims at publishing information on social media. |
</div> | </div> | ||
</div> | </div> | ||
Line 350: | Line 395: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidelines that will support all | |
interested stakeholders, including disaster management organisations and | interested stakeholders, including disaster management organisations and | ||
practitioners, in mobilising citizens. It also includes search filters that will | practitioners, in mobilising citizens. It also includes search filters that will | ||
Line 360: | Line 405: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Mobilising Citizens”. | examples around the theme “Mobilising Citizens”. | ||
</div> | </div> | ||
Line 367: | Line 412: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 379: | Line 424: | ||
<h3>Mobilising Volunteers</h3> | <h3>Mobilising Volunteers</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to mobilise (interested in volunteering), and from whom in such volunteering | + | <h4> |
− | + | Who do you want to mobilise (interested in volunteering), and from whom in such volunteering | |
+ | positions would you want mobility-affiliated information? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 387: | Line 434: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidance for all interested stakeholders on a wide | |
range of disaster management issues, including guidance on how to further mobilise | range of disaster management issues, including guidance on how to further mobilise | ||
volunteers. | volunteers. | ||
Line 395: | Line 442: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Mobilising Volunteers”. | examples around the theme “Mobilising Volunteers”. | ||
</div> | </div> | ||
Line 402: | Line 449: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 409: | Line 456: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 418: | Line 465: | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you mobilise the volunteers? | + | <h4> |
+ | How can you mobilise the volunteers? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 425: | Line 474: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule, which aims at publishing information on social media. | + | Schedule", which aims at publishing information on social media. |
</div> | </div> | ||
</div> | </div> | ||
Line 432: | Line 481: | ||
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Guidelines that will support interested | |
stakeholders in mobilising volunteers, and search filters that will allow users to | stakeholders in mobilising volunteers, and search filters that will allow users to | ||
identify relevant sources more easily, such as the search filters "VOST" and | identify relevant sources more easily, such as the search filters "VOST" and | ||
− | "unaffiliated volunteers" | + | "unaffiliated volunteers". |
</div> | </div> | ||
</div> | </div> | ||
Line 441: | Line 490: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Mobilising Volunteers”. | examples around the theme “Mobilising Volunteers”. | ||
</div> | </div> | ||
Line 448: | Line 497: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 464: | Line 513: | ||
<h3>Making Information Accessible</h3> | <h3>Making Information Accessible</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to access your information, and from whom do you want to access information? | + | <h4> |
+ | Who do you want to access your information, and from whom do you want to access information? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 471: | Line 522: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Making Information Accessible”. | examples around the theme “Making Information Accessible”. | ||
</div> | </div> | ||
Line 478: | Line 529: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 485: | Line 536: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 494: | Line 545: | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you make your information accessible? | + | <h4> |
+ | How can you make your information accessible? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 501: | Line 554: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule, which aims at publishing information on social media. | + | Schedule", which aims at publishing information on social media. |
</div> | </div> | ||
</div> | </div> | ||
Line 508: | Line 561: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Making Information Accessible”. | examples around the theme “Making Information Accessible”. | ||
</div> | </div> | ||
Line 515: | Line 568: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 522: | Line 575: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 534: | Line 587: | ||
<h3>Targeting Communication</h3> | <h3>Targeting Communication</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to target with your communication plan? | + | <h4> |
+ | Who do you want to target with your communication plan? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 541: | Line 596: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Targeting Communication”. | examples around the theme “Targeting Communication”. | ||
</div> | </div> | ||
Line 548: | Line 603: | ||
<div class="button">Including Citizens Handbook</div> | <div class="button">Including Citizens Handbook</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Toolkit that targets communication to citizens with diverse needs for | |
information on disaster management processes. | information on disaster management processes. | ||
</div> | </div> | ||
Line 555: | Line 610: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 564: | Line 619: | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you target your communication? | + | <h4> |
+ | How can you target your communication? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 571: | Line 628: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Technologies that cover the function "Post & | |
− | Schedule, which aims at publishing information on social media | + | Schedule", which aims at publishing information on social media. |
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 590: | Line 646: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Targeting Communication”. | examples around the theme “Targeting Communication”. | ||
</div> | </div> | ||
Line 597: | Line 653: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 609: | Line 665: | ||
<h3>Ensuring Credible Information</h3> | <h3>Ensuring Credible Information</h3> | ||
<div class="question" data-aspect="Social"> | <div class="question" data-aspect="Social"> | ||
− | Who do you want to share credible information with, and from whom do you receive credible | + | <h4> |
− | + | Who do you want to share credible information with, and from whom do you receive credible | |
+ | information? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 617: | Line 675: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Ensuring Credible Information”. | examples around the theme “Ensuring Credible Information”. | ||
</div> | </div> | ||
Line 624: | Line 682: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 633: | Line 691: | ||
</div> | </div> | ||
<div class="question" data-aspect="Socio-/Technical"> | <div class="question" data-aspect="Socio-/Technical"> | ||
− | How can you ensure credible information exchange? | + | <h4> |
+ | How can you ensure credible information exchange? | ||
+ | </h4> | ||
<div class="answer"> | <div class="answer"> | ||
Line 640: | Line 700: | ||
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | There are | + | There are technologies that could help with assessing credible information |
− | + | by collecting various metrics. | |
</div> | </div> | ||
</div> | </div> | ||
Line 654: | Line 714: | ||
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Social Media and Crowdsourcing | |
examples around the theme “Ensuring Credible Information”. | examples around the theme “Ensuring Credible Information”. | ||
</div> | </div> | ||
Line 661: | Line 721: | ||
<div class="button">Feel Safe</div> | <div class="button">Feel Safe</div> | ||
<div class="desc"> | <div class="desc"> | ||
− | + | Educational platform promoting the use of social media, digital education | |
and information accessibility to enhance children engagement in disaster prevention | and information accessibility to enhance children engagement in disaster prevention | ||
and preparedness. | and preparedness. | ||
Line 674: | Line 734: | ||
<script> | <script> | ||
// Attach plus icon to the title of expandable blocks. | // Attach plus icon to the title of expandable blocks. | ||
− | document.querySelectorAll('.theme > h2, .subtheme > h3').forEach(el => { | + | document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => { |
const icon = document.createElement('div'); | const icon = document.createElement('div'); | ||
icon.classList.add('plus', 'icon'); | icon.classList.add('plus', 'icon'); | ||
− | el. | + | el.insertBefore(icon, el.firstChild); |
}); | }); | ||
Line 683: | Line 743: | ||
document.getElementById('cmp-container').addEventListener('click', event => { | document.getElementById('cmp-container').addEventListener('click', event => { | ||
if (event.target.tagName === 'H2') { | if (event.target.tagName === 'H2') { | ||
− | event.target.classList.toggle('opened'); | + | document.querySelectorAll('H2').forEach(el => { |
− | event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened')); | + | if (el === event.target) el.classList.toggle('opened'); |
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
+ | |||
+ | const group = event.target.closest('.theme'); | ||
+ | document.querySelectorAll('.subtheme').forEach(el => { | ||
+ | if (group.contains(el)) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
} | } | ||
if (event.target.tagName === 'H3') { | if (event.target.tagName === 'H3') { | ||
− | event.target.classList.toggle('opened'); | + | document.querySelectorAll('H3').forEach(el => { |
− | event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened')); | + | if (el === event.target) el.classList.toggle('opened'); |
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
+ | |||
+ | const group = event.target.closest('.subtheme'); | ||
+ | document.querySelectorAll('.question').forEach(el => { | ||
+ | if (group.contains(el)) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
} | } | ||
− | if (event.target.classList. | + | if (event.target.tagName === 'H4') { |
− | event.target. | + | document.querySelectorAll('H4').forEach(el => { |
+ | if (el === event.target) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
+ | |||
+ | const group = event.target.closest('.question'); | ||
+ | document.querySelectorAll('.answer').forEach(el => { | ||
+ | if (group.contains(el)) el.classList.toggle('opened'); | ||
+ | else el.classList.remove('opened'); | ||
+ | }); | ||
} | } | ||
}); | }); | ||
Line 769: | Line 854: | ||
[post]: true, | [post]: true, | ||
[metrics]: false, | [metrics]: false, | ||
+ | [report]: false, | ||
+ | [collab]: false, | ||
+ | [interop]: false, | ||
+ | [meta]: false, | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | 'q12-tech': { | ||
+ | filter: { | ||
+ | functions: { | ||
+ | [search]: false, | ||
+ | [analysis]: false, | ||
+ | [post]: false, | ||
+ | [metrics]: true, | ||
[report]: false, | [report]: false, | ||
[collab]: false, | [collab]: false, |
Latest revision as of 16:14, 9 December 2022
Development version of the Compass.
Not ready for production!