Difference between revisions of "Widget:CrisisCommunicationList"
From LINKS Community Center
(4 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
<script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script> | <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script> | ||
<style> | <style> | ||
− | # | + | #cc-list-wrapper { |
font-family: 'Open Sans'; | font-family: 'Open Sans'; | ||
margin-top: 4em; | margin-top: 4em; | ||
} | } | ||
− | # | + | #cc-list-wrapper h1, |
− | # | + | #cc-list-wrapper h2, |
− | # | + | #cc-list-wrapper h3, |
− | # | + | #cc-list-wrapper h4 { |
font-family: 'Raleway'; | font-family: 'Raleway'; | ||
font-weight: 300; | font-weight: 300; | ||
Line 19: | Line 19: | ||
} | } | ||
− | # | + | #cc-list-wrapper h1, |
#usecase-filters h2 { | #usecase-filters h2 { | ||
color: var(--ccl-color); | color: var(--ccl-color); | ||
Line 26: | Line 26: | ||
} | } | ||
− | # | + | #cc-list-wrapper h1 svg { |
height: 2.5em; | height: 2.5em; | ||
width: 2.5em; | width: 2.5em; | ||
fill: var(--ccl-color); | fill: var(--ccl-color); | ||
margin-right: .5em; | margin-right: .5em; | ||
+ | } | ||
+ | |||
+ | #cc-list-wrapper h2 { | ||
+ | margin-bottom: 1em; | ||
} | } | ||
Line 44: | Line 48: | ||
z-index: 100; | z-index: 100; | ||
padding: 2em; | padding: 2em; | ||
− | |||
background: #fff; | background: #fff; | ||
border: 1px solid var(--ccl-color); | border: 1px solid var(--ccl-color); | ||
Line 50: | Line 53: | ||
box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%); | box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%); | ||
transition: all 400ms ease-in-out; | transition: all 400ms ease-in-out; | ||
+ | } | ||
+ | |||
+ | @media only screen and (orientation: landscape) { | ||
+ | #cc-filters { | ||
+ | width: 45vw; | ||
+ | } | ||
} | } | ||
Line 90: | Line 99: | ||
background-color: var(--ccl-color); | background-color: var(--ccl-color); | ||
color: #fff; | color: #fff; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 264: | Line 269: | ||
const crisisCommsQuery = '[[Category:Crisis Communication]]' | const crisisCommsQuery = '[[Category:Crisis Communication]]' | ||
+ | + '|limit=500' | ||
+ '|?' + PHASE_PROP | + '|?' + PHASE_PROP | ||
+ '|?' + TYPE_PROP | + '|?' + TYPE_PROP | ||
Line 332: | Line 338: | ||
: true; | : true; | ||
const scenarioCheck = filterState.scenario | const scenarioCheck = filterState.scenario | ||
− | ? | + | ? crisisComm[SCENARIO_PROP].some(event => filterState.scenario.includes(event)) |
: true; | : true; | ||
const phaseCheck = filterState.phases | const phaseCheck = filterState.phases | ||
Line 577: | Line 583: | ||
</script> | </script> | ||
− | <div id=" | + | <div id="cc-list-wrapper"> |
<h1> | <h1> | ||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"> | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"> | ||
Line 590: | Line 596: | ||
</div> | </div> | ||
</h1> | </h1> | ||
− | + | <div id="intro"> | |
− | + | <p> | |
− | <p>The | + | The best way to cope with a disaster is an efficient crisis communication before, during and after such |
− | + | situation. Risk awareness, preparedness and appropriate behaviour during and after a disaster is key to mitigate | |
− | + | its effects on people. The purpose of this library is to ease communication with the public via Social Media | |
− | </div | + | text messages taken from trustful resources. |
+ | |||
+ | </p> | ||
+ | <p> | ||
+ | The user can narrow down the results via filters and may either use (part of) the content and/or provide the | ||
+ | link to the source via the own Social Media account. The use of the translation tools available in the various | ||
+ | browsers allow for easy transfer of the texts into own messages. | ||
+ | </p> | ||
+ | </div> | ||
<!-- FILTERS --> | <!-- FILTERS --> |
Revision as of 15:49, 6 May 2024
Current version of the Crisis Communication Library.
Currently in use – do not modify!