Difference between revisions of "Widget:UseCaseList"
From LINKS Community Center
| Line 1: | Line 1: | ||
| − | <noinclude> | + | <noinclude>Current version of the List of Use Cases.<br><strong style="color:red;">currently in use!</strong></noinclude> |
<includeonly> | <includeonly> | ||
<link href="/resources/assets/tabulator.min.css" rel="stylesheet"> | <link href="/resources/assets/tabulator.min.css" rel="stylesheet"> | ||
| Line 11: | Line 11: | ||
#usecase-list-wrapper h1, | #usecase-list-wrapper h1, | ||
#usecase-list-wrapper h2, | #usecase-list-wrapper h2, | ||
| − | #usecase-list-wrapper h3 { | + | #usecase-list-wrapper h3, |
| + | #usecase-list-wrapper h4 { | ||
font-family: 'Raleway'; | font-family: 'Raleway'; | ||
font-weight: 300; | font-weight: 300; | ||
| Line 116: | Line 117: | ||
} | } | ||
| − | + | .filter-wrapper .filter-toggle { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | .filter-wrapper .filter-toggle | ||
| − | |||
| − | |||
| − | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| − | .filter-wrapper.open . | + | .filter-wrapper.open .plus.icon::after { |
| − | transform: rotate( | + | transform: rotate(0); |
} | } | ||
.filter-content { | .filter-content { | ||
font-size: 1.2em; | font-size: 1.2em; | ||
| − | margin-bottom: | + | margin-bottom: 2em; |
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); | ||
| − | |||
align-items: start; | align-items: start; | ||
| + | } | ||
| + | |||
| + | .filter-content.loose { | ||
| + | gap: .5em .5em; | ||
} | } | ||
| Line 163: | Line 158: | ||
height: 2em; | height: 2em; | ||
margin: 0 .5em 0 0; | margin: 0 .5em 0 0; | ||
| + | } | ||
| + | |||
| + | .filter-content label { | ||
| + | display: inline; | ||
} | } | ||
| Line 438: | Line 437: | ||
document.getElementById('category-filter').innerHTML = categoryHtml; | document.getElementById('category-filter').innerHTML = categoryHtml; | ||
| − | let scaleHtml = | + | let scaleHtml = SCALE.reduce((acc, curr) => { |
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
| Line 670: | Line 669: | ||
} | } | ||
</script> | </script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div id="usecase-list-wrapper"> | <div id="usecase-list-wrapper"> | ||
| Line 704: | Line 689: | ||
<p>This page provides an overview of different Use Cases</p> | <p>This page provides an overview of different Use Cases</p> | ||
</div> | </div> | ||
| − | |||
| − | + | <!-- FILTERS --> | |
| − | + | <div id="filter-bar"> | |
| − | + | <div style="display: flex; justify-content: space-between;"> | |
| − | + | <div style="flex: 1 1;"> | |
| − | + | <h2 style="margin-bottom: 1rem;">Selected Filters</h2> | |
| − | + | <div id="filter-summary">No filter. Showing all results.</div> | |
| − | + | </div> | |
| − | + | <div style="flex: 0 0;"> | |
| − | + | <button class="large-button" type="button" onclick="toggleFilter()">Filters</button> | |
| + | </div> | ||
</div> | </div> | ||
| − | |||
| − | + | <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2> | |
| − | + | <div id="uc-filters"> | |
| − | + | <h2 style="display: flex; justify-content: space-between;"> | |
| − | + | <div> | |
| − | + | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"> | |
| − | + | <defs> | |
| − | + | <clipPath id="b"> | |
| − | + | <path d="M592 312h96v96h-96z" /> | |
| − | + | </clipPath> | |
| − | + | </defs> | |
| − | + | <g clip-path="url(#b)" transform="translate(-592 -312)"> | |
| − | + | <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> | |
| − | + | </svg> | |
| − | + | <span>Filters</span> | |
| + | </div> | ||
| + | <a onclick="toggleFilter()" id="close-filter-button">×</a> | ||
| + | </h2> | ||
| + | <div style="text-align: center;"> | ||
| + | <button class="large-button" type="button" onclick="clearFilters()">Show All</button> | ||
</div> | </div> | ||
| − | + | <div class="filter-wrapper"> | |
| − | + | <h4 class="filter-toggle">Type <div class="plus icon"></div> | |
| − | + | </h4> | |
| − | + | <div class="filter-container"> | |
| − | + | <div class="filter-button-wrapper"> | |
| − | + | <button type="button" onclick="selectAll('#type-filter')">Select all</button> | | |
| − | + | <button type="button" onclick="deselectAll('#type-filter')">Clear all</button> | |
| − | + | </div> | |
| − | + | <div class="filter-content" id="type-filter"></div> | |
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| − | + | <div class="filter-wrapper"> | |
| − | + | <h4 class="filter-toggle">Event type <div class="plus icon"></div> | |
| − | + | </h4> | |
| − | + | <div class="filter-container"> | |
| − | + | <div class="filter-button-wrapper"> | |
| − | + | <button type="button" onclick="selectAll('#event-type-filter')">Select all</button> | | |
| − | + | <button type="button" onclick="deselectAll('#event-type-filter')">Clear all</button> | |
| − | + | </div> | |
| − | + | <div class="filter-content" id="event-type-filter"></div> | |
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| − | + | <div class="filter-wrapper"> | |
| − | + | <h4 class="filter-toggle">Category <div class="plus icon"></div> | |
| − | + | </h4> | |
| − | + | <div class="filter-container"> | |
| − | + | <div class="filter-button-wrapper"> | |
| − | + | <button type="button" onclick="selectAll('#category-filter')">Select all</button> | | |
| − | + | <button type="button" onclick="deselectAll('#category-filter')">Clear all</button> | |
| − | + | </div> | |
| − | + | <div class="filter-content" id="category-filter"></div> | |
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| − | + | <div class="filter-wrapper"> | |
| − | + | <h4 class="filter-toggle">Scale <div class="plus icon"></div> | |
| − | + | </h4> | |
| − | + | <div class="filter-container"> | |
| − | + | <div class="filter-button-wrapper"> | |
| − | + | <button type="button" onclick="selectAll('#scale-filter')">Select all</button> | | |
| − | + | <button type="button" onclick="deselectAll('#scale-filter')">Clear all</button> | |
| − | + | </div> | |
| − | + | <div class="filter-content" id="scale-filter"></div> | |
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| − | + | <div class="filter-wrapper"> | |
| − | + | <h4 class="filter-toggle">Thematic <div class="plus icon"></div> | |
| − | + | </h4> | |
| − | + | <div class="filter-container"> | |
| − | + | <div class="filter-button-wrapper"> | |
| − | + | <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> | | |
| − | + | <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button> | |
| − | + | </div> | |
| − | + | <div class="filter-content" id="thematic-filter"></div> | |
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| − | + | <div class="filter-wrapper"> | |
| − | + | <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div> | |
| − | + | </h4> | |
| − | + | <div class="filter-container"> | |
| − | + | <div class="filter-button-wrapper"> | |
| − | + | <button type="button" onclick="selectAll('#phases-filter')">Select all</button> | | |
| − | + | <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button> | |
| − | + | </div> | |
| − | + | <div class="filter-content" id="phases-filter"></div> | |
</div> | </div> | ||
| − | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <div id="usecase-tabulator"></div> | ||
| + | |||
</div> | </div> | ||
| − | |||
| − | |||
</includeonly> | </includeonly> | ||
Revision as of 14:05, 6 December 2022
Current version of the List of Use Cases.
currently in use!