Difference between revisions of "Widget:DevGuidelines"

From LINKS Community Center
Jump to: navigation, search
m (Text replacement - "Disaster Management Phase new" to "Disaster Management Phase")
Line 215: Line 215:
  
 
     <!-- FILTERS -->
 
     <!-- FILTERS -->
 +
 +
    <div id="filter-bar">
 +
        <div style="display: flex; justify-content: space-between;">
 +
            <div style="flex: 1 1;">
 +
                <h2 style="margin-bottom: 1rem;">Applied 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>
 +
 +
        <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
 +
   
 +
        <div id="dct-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">&times;</a>
 +
            </h2>
 +
            <div style="text-align: center;">
 +
                <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
 +
            </div>
 +
            <div class="filter-wrapper">
 +
                <h4>Covers Thematic <span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
 +
                <div class="filter-container">
 +
                    <div class="filter-button-wrapper">
 +
                        <button type="button" onclick="selectAll('#functions-filter')">Select all</button> |
 +
                        <button type="button" onclick="deselectAll('#functions-filter')">Clear all</button>
 +
                    </div>
 +
                    <div class="filter-content" id="functions-filter"></div>
 +
                </div>
 +
            </div>
 +
            <div class="filter-wrapper">
 +
                <h4>Audience experience level<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
 +
                <div class="filter-container">
 +
                    <div class="filter-button-wrapper">
 +
                        <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> |
 +
                        <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button>
 +
                    </div>
 +
                    <div class="filter-content" id="data-source-filter"></div>
 +
                </div>
 +
            </div>
 +
            <div class="filter-wrapper">
 +
                <h4>Language<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
 +
                <div class="filter-container">
 +
                    <div class="filter-button-wrapper">
 +
                        <button type="button" onclick="selectAll('#business-model-filter')">Select all</button> |
 +
                        <button type="button" onclick="deselectAll('#business-model-filter')">Clear all</button>
 +
                    </div>
 +
                    <div class="filter-content" id="business-model-filter"></div>
 +
                </div>
 +
            </div>
 +
            <div class="filter-wrapper">
 +
                <h4>Target audience<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
 +
                <div class="filter-container">
 +
                    <div class="filter-button-wrapper">
 +
                        <button type="button" onclick="selectAll('#dm-use-filter')">Select all</button> |
 +
                        <button type="button" onclick="deselectAll('#dm-use-filter')">Clear all</button>
 +
                    </div>
 +
                    <div class="filter-content" id="dm-use-filter"></div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
  
 
     <div id="guideline-tabulator"></div>
 
     <div id="guideline-tabulator"></div>
  
 
</includeonly>
 
</includeonly>

Revision as of 14:22, 22 November 2022

Development version of the List of Guidelines.
Not ready for production!