Widget: UseCaseList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Cschwentker (talk | contribs)
No edit summary
Cschwentker (talk | contribs)
No edit summary
Line 1: Line 1:
<noinclude>current version of the List of Use Cases.<br><strong style="color:red;">Currently in use</strong></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 h4 {
         .filter-wrapper .filter-toggle {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
 
         .filter-wrapper .filter-toggle svg {
            width: 1.5em;
            height: 1.5em;
            fill: var(--links-cyan);
             cursor: pointer;
             cursor: pointer;
         }
         }


         .filter-wrapper.open .filter-toggle {
         .filter-wrapper.open .plus.icon::after {
             transform: rotate(180deg);
             transform: rotate(0);
         }
         }


         .filter-content {
         .filter-content {
             font-size: 1.2em;
             font-size: 1.2em;
             margin-bottom: 4em;
             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));
            gap: 1em 1em;
             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 = Array.from(SCALE.values()).reduce((acc, curr) => {
             let scaleHtml = SCALE.reduce((acc, curr) => {
                 const identifier = escapeAttr(curr);
                 const identifier = escapeAttr(curr);
                 return acc
                 return acc
Line 670: Line 669:
         }
         }
     </script>
     </script>
    <!-- Icon definitons -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" style="display:none;">
        <defs>
            <symbol id="chevron-down" viewBox="0 0 96 96">
                <clipPath id="chev">
                    <path d="M592 312h96v96h-96z" />
                </clipPath>
                <g clip-path="url(#chev)" transform="translate(-592 -312)">
                    <path
                        d="m640 370.586-25.293-25.293-1.414 1.414L640 373.414l26.707-26.707-1.414-1.414L640 370.586Z" />
                </g>
            </symbol>
        </defs>
    </svg>


     <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>
    </div>


    <!-- FILTERS -->
        <!-- FILTERS -->


    <div id="filter-bar">
        <div id="filter-bar">
        <div style="display: flex; justify-content: space-between;">
            <div style="display: flex; justify-content: space-between;">
            <div style="flex: 1 1;">
                <div style="flex: 1 1;">
                <h2 style="margin-bottom: 1rem;">Applied Filters</h2>
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
                <div id="filter-summary">No filter. Showing all results.</div>
                    <div id="filter-summary">No filter. Showing all results.</div>
            </div>
                </div>
            <div style="flex: 0 0;">
                <div style="flex: 0 0;">
                <button class="large-button" type="button" onclick="toggleFilter()">Filters</button>
                    <button class="large-button" type="button" onclick="toggleFilter()">Filters</button>
                </div>
             </div>
             </div>
        </div>


        <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="uc-filters">
            <div id="uc-filters">
            <h2 style="display: flex; justify-content: space-between;">
                <h2 style="display: flex; justify-content: space-between;">
                <div>
                    <div>
                    <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">
                        <defs>
                            <defs>
                            <clipPath id="b">
                                <clipPath id="b">
                                <path d="M592 312h96v96h-96z" />
                                    <path d="M592 312h96v96h-96z" />
                            </clipPath>
                                </clipPath>
                        </defs>
                            </defs>
                        <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" />
                                    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>
                    <span>Filters</span>
                        <span>Filters</span>
                    </div>
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                </h2>
                <div style="text-align: center;">
                    <button class="large-button" type="button" onclick="clearFilters()">Show All</button>
                 </div>
                 </div>
                 <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                 <div class="filter-wrapper">
            </h2>
                    <h4 class="filter-toggle">Type <div class="plus icon"></div>
            <div style="text-align: center;">
                    </h4>
                <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                    <div class="filter-container">
            </div>
                        <div class="filter-button-wrapper">
            <div class="filter-wrapper">
                            <button type="button" onclick="selectAll('#type-filter')">Select all</button> |
                <h4>Type<span class="filter-toggle"><svg>
                            <button type="button" onclick="deselectAll('#type-filter')">Clear all</button>
                            <use href="#chevron-down" />
                        </div>
                        </svg></span></h4>
                        <div class="filter-content" id="type-filter"></div>
                <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>
                    <div class="filter-content" id="type-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Event type <div class="plus icon"></div>
                <h4>Event type<span class="filter-toggle"><svg>
                    </h4>
                            <use href="#chevron-down" />
                    <div class="filter-container">
                        </svg></span></h4>
                        <div class="filter-button-wrapper">
                <div class="filter-container">
                            <button type="button" onclick="selectAll('#event-type-filter')">Select all</button> |
                    <div class="filter-button-wrapper">
                            <button type="button" onclick="deselectAll('#event-type-filter')">Clear all</button>
                        <button type="button" onclick="selectAll('#event-type-filter')">Select all</button> |
                        </div>
                        <button type="button" onclick="deselectAll('#event-type-filter')">Clear all</button>
                        <div class="filter-content" id="event-type-filter"></div>
                     </div>
                     </div>
                    <div class="filter-content" id="event-type-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Category <div class="plus icon"></div>
                <h4>Category<span class="filter-toggle"><svg>
                    </h4>
                            <use href="#chevron-down" />
                    <div class="filter-container">
                        </svg></span></h4>
                        <div class="filter-button-wrapper">
                <div class="filter-container">
                            <button type="button" onclick="selectAll('#category-filter')">Select all</button> |
                    <div class="filter-button-wrapper">
                            <button type="button" onclick="deselectAll('#category-filter')">Clear all</button>
                        <button type="button" onclick="selectAll('#category-filter')">Select all</button> |
                        </div>
                        <button type="button" onclick="deselectAll('#category-filter')">Clear all</button>
                        <div class="filter-content" id="category-filter"></div>
                     </div>
                     </div>
                    <div class="filter-content" id="category-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Scale <div class="plus icon"></div>
                <h4>Scale<span class="filter-toggle"><svg>
                    </h4>
                            <use href="#chevron-down" />
                    <div class="filter-container">
                        </svg></span></h4>
                        <div class="filter-button-wrapper">
                <div class="filter-container">
                            <button type="button" onclick="selectAll('#scale-filter')">Select all</button> |
                    <div class="filter-button-wrapper">
                            <button type="button" onclick="deselectAll('#scale-filter')">Clear all</button>
                        <button type="button" onclick="selectAll('#scale-filter')">Select all</button> |
                        </div>
                        <button type="button" onclick="deselectAll('#scale-filter')">Clear all</button>
                        <div class="filter-content" id="scale-filter"></div>
                     </div>
                     </div>
                    <div class="filter-content" id="scale-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Thematic <div class="plus icon"></div>
                <h4>Thematic<span class="filter-toggle"><svg>
                    </h4>
                            <use href="#chevron-down" />
                    <div class="filter-container">
                        </svg></span></h4>
                        <div class="filter-button-wrapper">
                <div class="filter-container">
                            <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> |
                    <div class="filter-button-wrapper">
                            <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button>
                        <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> |
                        </div>
                        <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button>
                        <div class="filter-content" id="thematic-filter"></div>
                     </div>
                     </div>
                    <div class="filter-content" id="thematic-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div>
                <h4>Disaster Management Phase<span class="filter-toggle"><svg>
                    </h4>
                            <use href="#chevron-down" />
                    <div class="filter-container">
                        </svg></span></h4>
                        <div class="filter-button-wrapper">
                <div class="filter-container">
                            <button type="button" onclick="selectAll('#phases-filter')">Select all</button> |
                    <div class="filter-button-wrapper">
                            <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button>
                        <button type="button" onclick="selectAll('#phases-filter')">Select all</button> |
                        </div>
                        <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button>
                        <div class="filter-content" id="phases-filter"></div>
                     </div>
                     </div>
                    <div class="filter-content" id="phases-filter"></div>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
        <div id="usecase-tabulator"></div>
     </div>
     </div>
    <div id="usecase-tabulator"></div>


</includeonly>
</includeonly>

Revision as of 13:05, 6 December 2022

Current version of the List of Use Cases.
currently in use!