Widget: UseCaseList: Difference between revisions
From LINKS Community Center
Cschwentker (talk | contribs) No edit summary |
Cschwentker (talk | contribs) No edit summary |
||
| 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 13:05, 6 December 2022
Current version of the List of Use Cases.
currently in use!