Widget: DevGuidelines: Difference between revisions
From LINKS Community Center
Cschwentker (talk | contribs) No edit summary |
Cschwentker (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
<noinclude>Development version of the List of Guidelines.<br><strong style="color:red;">Not ready for production!</strong></noinclude> | <noinclude>Development version of the List of Guidelines.<br><strong style="color:red;">Not ready for | ||
production!</strong></noinclude> | |||
<includeonly> | <includeonly> | ||
<link href="/resources/assets/tabulator.min.css" rel="stylesheet"> | <link href="/resources/assets/tabulator.min.css" rel="stylesheet"> | ||
| Line 30: | Line 31: | ||
margin-right: .5em; | margin-right: .5em; | ||
} | } | ||
#filter-bar { position: relative; margin: 1em 0 2em 0; } | |||
#filter-bar { | |||
position: relative; | |||
margin: 1em 0 2em 0; | |||
} | |||
#dct-filters { | #dct-filters { | ||
position: absolute; | position: absolute; | ||
| Line 44: | Line 50: | ||
transition: all 400ms ease-in-out; | transition: all 400ms ease-in-out; | ||
} | } | ||
#gl-filters.open { | #gl-filters.open { | ||
clip-path: inset(0 0 -50px -50px); | clip-path: inset(0 0 -50px -50px); | ||
| Line 102: | Line 109: | ||
} | } | ||
.filter-wrapper .filter-container { display: none; } | .filter-wrapper .filter-container { | ||
.filter-wrapper.open .filter-container { display: block; } | display: none; | ||
} | |||
.filter-wrapper.open .filter-container { | |||
display: block; | |||
} | |||
.filter-wrapper h4 { | .filter-wrapper h4 { | ||
| Line 173: | Line 185: | ||
border: 0 none; | border: 0 none; | ||
} | } | ||
#guideline-tabulator.tabulator .tabulator-header .tabulator-col { | #guideline-tabulator.tabulator .tabulator-header .tabulator-col { | ||
border-bottom: 4px double var(--links-orange); | border-bottom: 4px double var(--links-orange); | ||
| Line 211: | Line 223: | ||
} | } | ||
#guideline-tabulator.tabulator .guideline-title a, | #guideline-tabulator.tabulator .guideline-title a, | ||
#guideline-tabulator.tabulator .tabulator-responsive-collapse table a { | #guideline-tabulator.tabulator .tabulator-responsive-collapse table a { | ||
color: var(--links-orange); | color: var(--links-orange); | ||
} | } | ||
</style> | </style> | ||
| Line 304: | Line 315: | ||
console.log('done') | console.log('done') | ||
}); | }); | ||
| Line 327: | Line 336: | ||
el.addEventListener('click', event => void wrapper.classList.toggle('open')); | el.addEventListener('click', event => void wrapper.classList.toggle('open')); | ||
}); | }); | ||
}); | |||
function selectAll(context) { | function selectAll(context) { | ||
| Line 364: | Line 378: | ||
</h1> | </h1> | ||
<div id="guideline-intro"> | <div id="guideline-intro"> | ||
<p>The guidelines library gathers and structures existing guiding documents (guidelines, legal documents, Standard Operation Procedures) that support the implementation and use of social media and crowdsourcing in disaster management organisations. | <p>The guidelines library gathers and structures existing guiding documents (guidelines, legal documents, | ||
</p> | Standard Operation Procedures) that support the implementation and use of social media and crowdsourcing | ||
in disaster management organisations. | |||
</p> | |||
<ul> | <ul> | ||
<li>Building a communication strategy for social media and consideration of the main elements (e.g. | <li>Building a communication strategy for social media and consideration of the main elements (e.g. | ||
| Line 394: | Line 410: | ||
<h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2> | <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2> | ||
<div id="gl-filters"> | <div id="gl-filters"> | ||
<h2 style="display: flex; justify-content: space-between;"> | <h2 style="display: flex; justify-content: space-between;"> | ||
| Line 406: | Line 422: | ||
<g clip-path="url(#b)" transform="translate(-592 -312)"> | <g clip-path="url(#b)" transform="translate(-592 -312)"> | ||
<path | <path | ||
d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" /> | |||
</g> | </g> | ||
</svg> | </svg> | ||
| Line 417: | Line 433: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
<h4>Covers Thematic <span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4> | <h4>Covers Thematic <span class="filter-toggle"><svg> | ||
<use href="#chevron-down" /> | |||
</svg></span></h4> | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
| Line 427: | Line 445: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
<h4>Audience experience level<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4> | <h4>Audience experience level<span class="filter-toggle"><svg> | ||
<use href="#chevron-down" /> | |||
</svg></span></h4> | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
| Line 437: | Line 457: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
<h4>Language<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4> | <h4>Language<span class="filter-toggle"><svg> | ||
<use href="#chevron-down" /> | |||
</svg></span></h4> | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
| Line 447: | Line 469: | ||
</div> | </div> | ||
<div class="filter-wrapper"> | <div class="filter-wrapper"> | ||
<h4>Target audience<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4> | <h4>Target audience<span class="filter-toggle"><svg> | ||
<use href="#chevron-down" /> | |||
</svg></span></h4> | |||
<div class="filter-container"> | <div class="filter-container"> | ||
<div class="filter-button-wrapper"> | <div class="filter-button-wrapper"> | ||
Revision as of 14:10, 22 November 2022
Development version of the List of Guidelines.
Not ready for
production!