Difference between revisions of "Widget:CrisisCommunicationList"
From LINKS Community Center
(7 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(-- | + | color: var(--ccl-color); |
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
} | } | ||
− | # | + | #cc-list-wrapper h1 svg { |
height: 2.5em; | height: 2.5em; | ||
width: 2.5em; | width: 2.5em; | ||
− | fill: var(-- | + | 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(-- | + | border: 1px solid var(--ccl-color); |
clip-path: inset(0 0 100% 100%); | clip-path: inset(0 0 100% 100%); | ||
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 63: | Line 72: | ||
margin-top: -.2em; | margin-top: -.2em; | ||
font-weight: 100; | font-weight: 100; | ||
− | color: var(-- | + | color: var(--ccl-color); |
} | } | ||
Line 74: | Line 83: | ||
.large-button { | .large-button { | ||
− | border: 1px solid var(-- | + | border: 1px solid var(--ccl-color); |
font-size: 1.5em; | font-size: 1.5em; | ||
font-family: 'Open Sans'; | font-family: 'Open Sans'; | ||
Line 80: | Line 89: | ||
margin-bottom: 2em; | margin-bottom: 2em; | ||
padding: 0.3em 0.8em; | padding: 0.3em 0.8em; | ||
− | color: var(-- | + | color: var(--ccl-color); |
background: transparent; | background: transparent; | ||
font-variant: small-caps; | font-variant: small-caps; | ||
Line 88: | Line 97: | ||
.large-button:hover { | .large-button:hover { | ||
− | background-color: var(-- | + | background-color: var(--ccl-color); |
color: #fff; | color: #fff; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 102: | Line 107: | ||
.filter-wrapper button { | .filter-wrapper button { | ||
border: 0 none; | border: 0 none; | ||
− | color: var(-- | + | color: var(--ccl-color); |
background-color: transparent; | background-color: transparent; | ||
font-variant: small-caps; | font-variant: small-caps; | ||
Line 186: | Line 191: | ||
#tabulator-table.tabulator .tabulator-header .tabulator-col { | #tabulator-table.tabulator .tabulator-header .tabulator-col { | ||
− | border-bottom: 4px double var(-- | + | border-bottom: 4px double var(--ccl-color); |
border-right: 0 none; | border-right: 0 none; | ||
background: transparent; | background: transparent; | ||
Line 205: | Line 210: | ||
#tabulator-table.tabulator .tabulator-cell { | #tabulator-table.tabulator .tabulator-cell { | ||
border-right: 0 none; | border-right: 0 none; | ||
− | border-top: 1px solid var(-- | + | border-top: 1px solid var(--ccl-color); |
padding: .5em .5em .5em 0; | padding: .5em .5em .5em 0; | ||
} | } | ||
Line 238: | Line 243: | ||
#tabulator-table.tabulator .usecase-title a, | #tabulator-table.tabulator .usecase-title a, | ||
#tabulator-table.tabulator .tabulator-responsive-collapse table a { | #tabulator-table.tabulator .tabulator-responsive-collapse table a { | ||
− | color: var(-- | + | color: var(--ccl-color); |
} | } | ||
</style> | </style> | ||
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 406: | Line 412: | ||
cssClass: 'usecase-title', | cssClass: 'usecase-title', | ||
formatter: cell => '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>', | formatter: cell => '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>', | ||
− | + | minWidth: '1000px' | |
}, | }, | ||
{ | { | ||
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"> | ||
− | < | + | <path |
− | + | d="M78.6 17.005H17.4a3.436 3.436 0 0 0-3.4 3.4v41.312a3.367 3.367 0 0 0 3.34 3.4H54.8l13.6 13.9v-13.8h10.2a3.436 3.436 0 0 0 3.4-3.4V20.506a3.463 3.463 0 0 0-3.4-3.501ZM80 61.817c-.02.765-.64 1.38-1.4 1.4H66.4v10.9L56.23 63.72l-.59-.6H17.4a1.37 1.37 0 0 1-1.4-1.339V20.406c.02-.765.64-1.38 1.4-1.4h61.2c.8.03 1.43.7 1.4 1.5Z" /> | |
− | + | <path d="M46.88 27h2.25v21h-2.25ZM50 53.25c0 1.105-.9 2-2 2s-2-.895-2-2 .9-2 2-2 2 .895 2 2Z" /> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | </ | ||
</svg> | </svg> | ||
<div> | <div> | ||
Line 597: | 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 --> | ||
Line 618: | Line 625: | ||
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;"> | <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;"> | ||
<h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2> | <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2> | ||
− | <div><a href="/index.php/Form:Crisis_Communication" style="font-size: 1.5em; font-variant:small-caps; color: var(-- | + | <div><a href="/index.php/Form:Crisis_Communication" style="font-size: 1.5em; font-variant:small-caps; color: var(--ccl-color)">Add new Crisis Communication</a></div> |
</div> | </div> | ||
Revision as of 15:49, 6 May 2024
Current version of the Crisis Communication Library.
Currently in use – do not modify!