Difference between revisions of "Widget:DevGuidelines"
From LINKS Community Center
| 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 15:10, 22 November 2022
Development version of the List of Guidelines.
Not ready for
production!