Difference between revisions of "Widget:Compass"
From LINKS Community Center
(23 intermediate revisions by 2 users not shown) | |||
Line 32: | Line 32: | ||
font-size: 1em; | font-size: 1em; | ||
font-weight: 300; | font-weight: 300; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | #cmp-container h4.opened { | ||
+ | font-size: 1em; | ||
+ | font-weight: 500; | ||
} | } | ||
Line 49: | Line 55: | ||
color: var(--compass-color); | color: var(--compass-color); | ||
cursor: pointer; | cursor: pointer; | ||
+ | transition: all 0.4s ease; | ||
} | } | ||
Line 55: | Line 62: | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
− | left: | + | left: 1.2em; |
bottom: 0; | bottom: 0; | ||
width: 100%; | width: 100%; | ||
Line 77: | 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 87: | Line 95: | ||
.answer { | .answer { | ||
− | margin: 1. | + | margin: 1em 1.8em; |
font-size: 1.2rem; | font-size: 1.2rem; | ||
} | } | ||
Line 124: | Line 132: | ||
align-items: center; | align-items: center; | ||
padding: 1em; | padding: 1em; | ||
− | border: 1px solid | + | color: #fff; |
+ | border: 1px solid; | ||
+ | /* border-radius: 10px; */ | ||
} | } | ||
Line 155: | 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 244: | 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 257: | 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> | <h4> | ||
Line 269: | 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 278: | 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 296: | 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 303: | 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 311: | 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 333: | 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 340: | 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 357: | 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 364: | 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 374: | 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 381: | 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 403: | 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 411: | 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 418: | 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 425: | 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 443: | 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 450: | 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 459: | 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 466: | 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 491: | 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 498: | 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 505: | 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 523: | 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 530: | 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 537: | 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 544: | 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 565: | 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 572: | 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 579: | 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 597: | 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 616: | 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 623: | 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 645: | 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 652: | 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 670: | 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 684: | 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 691: | 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 713: | 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.tagName === 'H4') { | if (event.target.tagName === 'H4') { | ||
− | event.target.classList.toggle('opened'); | + | document.querySelectorAll('H4').forEach(el => { |
− | event.target.closest('.question'). | + | 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 800: | 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 17:14, 9 December 2022
Development version of the Compass.
Not ready for production!