Widget: UseCaseList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<noinclude>Current version of the List of Use Cases.<br><strong style="color:red;">currently in use!</strong>
<noinclude>Current version of the List of Use Cases.<br><strong style="color:red;">Currently in use &ndash; do not modify!</strong>
</noinclude>
</noinclude>
<includeonly>
<includeonly>
     <link href="/resources/assets/tabulator.min.css" rel="stylesheet">
     <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet">
     <script type="text/javascript" src="/resources/assets/tabulator.min.js"></script>
     <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
    <style>
        #usecase-list-wrapper {
            font-family: 'Open Sans';
            margin-top: 4em;
        }


        #usecase-list-wrapper h1,
    <!-- STYLES BEGIN -->
        #usecase-list-wrapper h2,
    <link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/lib?q=uc_list.css">
        #usecase-list-wrapper h3,
    <!-- STYLES END -->
        #usecase-list-wrapper h4 {
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
        }


        #usecase-list-wrapper h1,
    <!-- SCRIPT BEGIN -->
        #usecase-filters h2 {
     <script type="text/javascript" src="https://assets.links.communitycenter.eu/v2/links/lib?q=uc_list.js"></script>
            color: var(--links-cyan);
    <!-- SCRIPT END -->
            display: flex;
            align-items: center;
        }
 
        #usecase-list-wrapper h1 svg {
            height: 2.5em;
            width: 2.5em;
            fill: var(--links-cyan);
            margin-right: .5em;
        }
 
        #filter-bar {
            position: relative;
            margin: 1em 0 2em 0;
        }
 
        #uc-filters {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 100;
            padding: 2em;
            width: 45vw;
            background: #fff;
            border: 1px solid var(--links-cyan);
            clip-path: inset(0 0 100% 100%);
            box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%);
            transition: all 400ms ease-in-out;
        }
 
        #uc-filters.open {
            clip-path: inset(0 0 -50px -50px);
        }
 
        #close-filter-button {
            display: block;
            cursor: pointer;
            font-size: 2.5em;
            line-height: .7em;
            margin-top: -.2em;
            font-weight: 100;
            color: var(--links-cyan);
        }
 
        #uc-filters h2 svg {
            height: 1.5em;
            width: 1.5em;
            margin-right: .5em;
            margin-left: -.2em;
        }
 
        .large-button {
            border: 1px solid var(--links-cyan);
            font-size: 1.5em;
            font-family: 'Open Sans';
            font-weight: 100;
            margin-bottom: 2em;
            padding: 0.3em 0.8em;
            color: var(--links-cyan);
            background: transparent;
            font-variant: small-caps;
            display: inline-block;
            transition: all 200ms ease-in-out;
        }
 
        .large-button:hover {
            background-color: var(--links-cyan);
            color: #fff;
        }
 
        #usecases-list-wrapper h2 {
            margin-bottom: 1em;
        }
 
        .filter-button-wrapper {
            margin-bottom: 1em;
        }
 
        .filter-wrapper button {
            border: 0 none;
            color: var(--links-cyan);
            background-color: transparent;
            font-variant: small-caps;
            font-size: 1.2em;
            text-decoration: underline;
            padding: 0;
        }
 
        .filter-wrapper .filter-container {
            display: none;
        }
 
        .filter-wrapper.open .filter-container {
            display: block;
        }
 
        .filter-wrapper .filter-toggle {
            cursor: pointer;
        }
 
        .filter-wrapper.open .plus.icon::after {
            transform: rotate(0);
        }
 
        .filter-content {
            font-size: 1.2em;
            margin-bottom: 2em;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
            align-items: start;
        }
 
        .filter-content.loose {
            gap: .5em .5em;
        }
 
        .filter-group-header {
            grid-column: 1/-1;
            margin-bottom: -.5em;
            margin-top: 1em;
            font-family: 'Raleway';
            font-weight: 200;
            letter-spacing: .06em;
        }
 
        .filter-group-start {
            grid-column-start: 1;
        }
 
        .filter-content input[type="checkbox"] {
            margin-right: .5em;
        }
 
        .filter-content img {
            width: 2em;
            height: 2em;
            margin: 0 .5em 0 0;
        }
 
        .filter-content label {
            display: inline;
        }
 
        #usecase-intro {
            font-size: larger;
            margin-bottom: 4em;
        }
 
        #usecase-intro ul {
            font-size: initial;
        }
 
        #usecase-tabulator.tabulator {
            border: 0 none;
            background-color: transparent;
            font-size: 1.2em;
        }
 
        #usecase-tabulator.tabulator .tabulator-header {
            background-color: transparent;
            border: 0 none;
        }
 
        #usecase-tabulator.tabulator .tabulator-header .tabulator-col {
            border-bottom: 4px double var(--links-cyan);
            border-right: 0 none;
            background: transparent;
        }
 
        #usecase-tabulator.tabulator .tabulator-header .tabulator-col-content {
            padding: .5em 0;
        }
 
        #usecase-tabulator.tabulator .tabulator-header .tabulator-col-sorter {
            right: .5em;
        }
 
        #usecase-tabulator.tabulator .tabulator-row {
            background-color: transparent;
        }
 
        #usecase-tabulator.tabulator .tabulator-cell {
            border-right: 0 none;
            border-top: 1px solid var(--links-cyan);
            padding: .5em .5em .5em 0;
        }
 
        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse {
            border: 0 none;
            padding: 0 .5em 2em 0;
        }
 
        #filter-summary {
            margin-right: 1em;
        }
 
        #filter-summary table tr td {
            vertical-align: top;
        }
 
        #filter-summary table tr td:first-of-type {
            padding-right: 10px;
        }
 
 
        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table {
            font-size: smaller;
        }
 
        #filter-summary table tr td strong,
        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse td>strong {
            font-weight: 300;
        }
 
        #usecase-tabulator.tabulator .usecase-title a,
        #usecase-tabulator.tabulator .tabulator-responsive-collapse table a {
            color: var(--links-cyan);
        }
    </style>
     <script>
        'use strict';
 
        /**
        * @typedef {Object} FilterState
        * @property {string[]} type
        * @property {string[]} eventType
        * @property {string[]} category
        * @property {string[]} scale
        * @property {string[]} thematics
        * @property {string[]} phases
        */
        let table;  // Tabulator instance
 
        const PHASES = ["Before", "During", "After"];
        const EX_LEVEL = ["Starter", "Intermediate", "Advanced"];
        const SCALE = ["Country", "County", "City"];
 
        const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
        const escapeAttr = text => text ? text.replace(/\W/g, '-') : text;
 
        const PHASE_PROP = 'Disaster Management Phase';
        const THEME_PROP = 'Use cases thematic';
        const TYPE_PROP = 'Type';
        const YEAR_PROP = 'Year';
        const SCALE_PROP = 'Scale';
        const CAT_PROP = 'Use Cases Category';
        const EVENT_PROP = 'Event type'
 
        const useCaseQuery = '[[Category:Use Cases]]'
            + '|?' + PHASE_PROP
            + '|?' + THEME_PROP
            + '|?' + TYPE_PROP
            + '|?' + SCALE_PROP
            + '|?' + EVENT_PROP
            + '|?' + CAT_PROP
            + '|?' + YEAR_PROP;
 
        async function getUseCases() {
            const useCasesResponse = await fetch(getQueryUrl(useCaseQuery)).then(response => response.json());
 
            return Object.keys(useCasesResponse.query.results).map(title => {
                const useCaseResult = useCasesResponse.query.results[title];
 
                /** @type {UseCase} **/
                const useCase = {};
                useCase.title = title;
                useCase.url = useCaseResult.fullurl;
                useCase[PHASE_PROP] = useCaseResult.printouts[PHASE_PROP].map(value => value.fulltext);
                useCase[THEME_PROP] = useCaseResult.printouts[THEME_PROP].map(value => value.fulltext);
                useCase[TYPE_PROP] = useCaseResult.printouts[TYPE_PROP].map(value => value.fulltext);
                useCase[CAT_PROP] = useCaseResult.printouts[CAT_PROP].map(value => value.fulltext);
                useCase[SCALE_PROP] = useCaseResult.printouts[SCALE_PROP].map(value => value.fulltext);
                useCase[EVENT_PROP] = useCaseResult.printouts[EVENT_PROP].map(value => value.fulltext);
                useCase[YEAR_PROP] = useCaseResult.printouts[YEAR_PROP][0] && useCaseResult.printouts[YEAR_PROP][0].raw.slice(-4);
                return useCase;
            });
        }
 
        function applyFilters(clear) {
            // TODO: apply Filters
            if (!table) return;
 
            // If clear=true, pass empty object to the filter to disable it.
            if (clear) {
                table.setFilter(useCaseFilter, {});
                return;
            }
 
 
            /** @type {FilterState} **/
            const filterState = {};
 
            const selectedTypes = Array.from(document.querySelectorAll('#type-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedTypes.length > 0) filterState.type = selectedTypes;
 
            const selectedEvents = Array.from(document.querySelectorAll('#event-type-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedEvents.length > 0) filterState.eventType = selectedEvents;
 
            const selectedCats = Array.from(document.querySelectorAll('#category-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedCats.length > 0) filterState.category = selectedCats;
 
            const selectedScales = Array.from(document.querySelectorAll('#scale-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedScales.length > 0) filterState.scale = selectedScales;
 
            const selectedThematics = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedThematics.length > 0) filterState.thematics = selectedThematics;
 
            const selectedPhases = Array.from(document.querySelectorAll('#phases-filter input[type="checkbox"]:checked'))
                .map(checkbox => checkbox.value);
            if (selectedPhases.length > 0) filterState.phases = selectedPhases;
 
            table.setFilter(useCaseFilter, filterState);
        }
 
 
        /**
        * @param {Guideline} useCase
        * @param {FilterState} filterState
        */
        function useCaseFilter(useCase, filterState) {
            // If filtering property is empty, don't apply the filter (set the check to true).
            // Passing an empty object (as with applyFilters(true)) should result in an unfiltered table.
 
            const typeCheck = filterState.type
                ? filterState.type.every(type => useCase[TYPE_PROP].includes(type))
                : true;
            const eventTypeCheck = filterState.eventType
                ? filterState.eventType.every(event => useCase[EVENT_PROP].includes(event))
                : true;
            const categoryCheck = filterState.category
                ? filterState.category.every(cat => useCase[CAT_PROP].includes(cat))
                : true;
            const scaleCheck = filterState.scale
                ? filterState.scale.every(scale => useCase[SCALE_PROP].includes(scale))
                : true;
            const thematicCheck = filterState.thematics
                ? filterState.thematics.every(thematic => useCase[THEME_PROP].includes(thematic))
                : true;
            const phaseCheck = filterState.phases
                ? filterState.phases.every(phase => useCase[PHASE_PROP].includes(phase))
                : true;
            return typeCheck && eventTypeCheck && categoryCheck && scaleCheck && thematicCheck && phaseCheck;
        }
 
        Promise.all([getUseCases()]).then(data => {
            const useCases = data[0];
 
            let THEME_VALUES = []
            let TYPE_VALUES = [];
            let EVENT_VALUES = []
            let CAT_PROP_VALUES = [];
            let SCALE_VALUES = [];
            let YEAR_VALUES = [];
            let PHASE_VALUES = [];
 
            for (const useCase of useCases) {
 
                TYPE_VALUES = TYPE_VALUES.concat(useCase[TYPE_PROP]);
                THEME_VALUES = THEME_VALUES.concat(useCase[THEME_PROP]);
                EVENT_VALUES = EVENT_VALUES.concat(useCase[EVENT_PROP]);
                SCALE_VALUES = SCALE_VALUES.concat(useCase[SCALE_PROP]);
                CAT_PROP_VALUES = CAT_PROP_VALUES.concat(useCase[CAT_PROP]);
                YEAR_VALUES = YEAR_VALUES.concat(useCase[YEAR_PROP]);
            }
 
            TYPE_VALUES = TYPE_VALUES.sort();
            THEME_VALUES = THEME_VALUES.sort();
            EVENT_VALUES = EVENT_VALUES.sort();
            SCALE_VALUES = SCALE_VALUES.sort();
            CAT_PROP_VALUES = CAT_PROP_VALUES.sort();
 
            TYPE_VALUES = new Set(TYPE_VALUES);
            THEME_VALUES = new Set(THEME_VALUES);
 
 
            console.log("Theme values", THEME_VALUES);
 
            EVENT_VALUES = new Set(EVENT_VALUES);
            CAT_PROP_VALUES = new Set(CAT_PROP_VALUES);
            YEAR_VALUES = new Set(YEAR_VALUES);
            SCALE_VALUES = new Set(SCALE_VALUES);
            PHASE_VALUES = PHASES;
 
            let typeHtml = Array.from(TYPE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="type-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="type-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('type-filter').innerHTML = typeHtml;
 
            let eventTypeHtml = Array.from(EVENT_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="event-type-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="event-type-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('event-type-filter').innerHTML = eventTypeHtml;
 
            let categoryHtml = Array.from(CAT_PROP_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="category-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="category-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('category-filter').innerHTML = categoryHtml;
 
            let scaleHtml = SCALE.reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="scale-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="scale-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('scale-filter').innerHTML = scaleHtml;
 
            let phaseHtml = Array.from(PHASE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="phases-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="phases-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('phases-filter').innerHTML = phaseHtml;
 
            let thematicHtml = Array.from(THEME_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" id="thematic-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('thematic-filter').innerHTML = thematicHtml;
 
 
            const tabulator = new Tabulator('#usecase-tabulator', {
                data: useCases,
                layout: 'fitDataFill',
                responsiveLayout: 'collapse',
                columns: [
                    {
                        title: 'Title',
                        field: 'title',
                        cssClass: 'usecase-title',
                        formatter: cell => '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>',
                        minWidth: '800px'
                    },
                    {
                        title: 'Year',
                        field: YEAR_PROP,
                        minWidth: '200px'
                    },
                    {
                        title: 'Theme',
                        field: TYPE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Hazard',
                        field: EVENT_PROP,
                        formatter: cell => cell.getValue().join(', ') || '&mdash;'
                    },
                    {
                        title: 'Category',
                        field: CAT_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Scale',
                        field: SCALE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Thematic',
                        field: THEME_PROP,
                        formatter: function (cell) {
                            const val = cell.getValue();
                            if (val.length > 1) {
                                return cell.getValue().join("<br>")
                            }
                            return cell.getValue().join(', ')
 
                        }
                    },
                    {
                        title: 'Disaster Management Phase',
                        field: PHASE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    }
 
                ],
                initialSort: [
                    { column: 'title', dir: 'asc' }
                ]
            });
 
            tabulator.on('tableBuilt', () => {
                tabulator.redraw(true);
                console.log('done')
                table = tabulator;
 
            });
            tabulator.on('dataFiltered', (filters, rows) => {
                const summary = document.getElementById('filter-summary');
                const filter = filters[0];
 
                // Set result counter
                document.getElementById('result-count').textContent = rows.length;
 
                // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
                if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }
 
                // Update filter text.
                if (
                    !filter.type.type &&
                    !filter.type.eventType &&
                    !filter.type.category &&
                    !filter.type.scale &&
                    !filter.type.thematics &&
                    !filter.type.phases
                ) { summary.textContent = 'No filter. Showing all results.'; }
                else {
                    let summaryHtml = '<table>';
                    if (filter.type.type) {
                        summaryHtml += '<tr><td><strong>Theme</strong></td><td>'
                            + (filter.type.type.length > 0 ? filter.type.type.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.eventType) {
                        summaryHtml += '<tr><td><strong>Hazard</strong></td><td>'
                            + (filter.type.eventType.length > 0 ? filter.type.eventType.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.category) {
                        summaryHtml += '<tr><td><strong>Category</strong></td><td>'
                            + (filter.type.category.length > 0 ? filter.type.category.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.scale) {
                        summaryHtml += '<tr><td><strong>Scale</strong></td><td>'
                            + (filter.type.scale.length > 0 ? filter.type.scale.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.thematics) {
                        summaryHtml += '<tr><td><strong>Thematics</strong></td><td>'
                            + (filter.type.thematics.length > 0 ? filter.type.thematics.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.phases) {
                        summaryHtml += '<tr><td><strong>Phases</strong></td><td>'
                            + (filter.type.phases > 0 ? filter.type.phases.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    summaryHtml += '</table>';
                    summary.innerHTML = summaryHtml;
                }
 
            });
 
            // Listen for changes in filter checkbox state.
 
            document.getElementById('type-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('event-type-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('category-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('scale-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('thematic-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('phases-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
 
 
            // Listen for clicks on filter toggles
            document.querySelectorAll('.filter-wrapper .filter-toggle').forEach(el => {
                const wrapper = el.closest('.filter-wrapper');
                el.addEventListener('click', event => void wrapper.classList.toggle('open'));
            });
 
            // Close filter pane when clicked outside of it.
            document.body.addEventListener('click', event => {
                const filterPane = document.getElementById('uc-filters');
                if (
                    filterPane.classList.contains('open') &&
                    !filterPane.contains(event.target) &&
                    event.target !== document.querySelector('#filter-bar .large-button')
                ) { filterPane.classList.remove('open'); }
            }, { passive: true });
 
            // Fix bug where the table is truncated to zero height despite having visible rows.
            tabulator.on('renderComplete', function () {
                // TODO: Check the bugfix for a possible infinite event loop.
 
                try {
                    const holderHeight = tabulator.rowManager.element.offsetHeight;
                    const tableHeight = tabulator.rowManager.tableElement.offsetHeight;
                    if (
                        holderHeight < tableHeight ||                          // table is truncated vertically (including zero-height)
                        holderHeight - tableHeight > window.screen.availHeight  // table is more than a screen longer than content
                    ) {
                        tabulator.redraw();
                    }
                } catch (ignore) { }
            });
            // End bugfix
        });
 
        function selectAll(context) {
            document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
            applyFilters();
        }
 
        function deselectAll(context) {
            document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
            applyFilters();
        }
 
        function clearFilters() {
            document.querySelectorAll('#uc-filters input[type="checkbox"]').forEach(checkbox => checkbox.checked = checkbox.defaultChecked);
            applyFilters(true);
        }
 
        function toggleFilter() {
            document.getElementById('uc-filters').classList.toggle('open');
        }
    </script>


     <div id="usecase-list-wrapper">
     <div id="usecase-list-wrapper">
         <h1>
         <h1>
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
             <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=3-uc_list.svg">
                <defs>
                    <clipPath id="uc">
                        <path d="M592 312h96v96h-96z" />
                    </clipPath>
                </defs>
                <g clip-path="url(#uc)" transform="translate(-592 -312)">
                    <path d="m648.783 351.102 1.99-.204 2.359 23.001-1.989.204Z" />
                    <path
                        d="M674 387h-6v-5h-8.093l-3.531-36.291A2.99 2.99 0 0 0 653.39 343h-26.658a2.991 2.991 0 0 0-2.985 2.7L620.1 382H612v5h-6v7h68Zm-48.263-41.1a1 1 0 0 1 .995-.9h26.658a.999.999 0 0 1 1 .9l3.51 36.1h-35.795ZM672 392h-64v-3h6v-5h52v5h6ZM639 326h2v12h-2ZM606 355h10v2h-10ZM664 355h10v2h-10ZM611.293 332.707l1.414-1.414 8 8-1.414 1.414ZM659.293 339.293l8-8 1.414 1.414-8 8Z" />
                </g>
            </svg>
             <div>
             <div>
                 <div>Use Cases</div>
                 <div>Use Cases</div>
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing Library</div>
                    Library</div>
             </div>
             </div>
         </h1>
         </h1>
Line 704: Line 40:
             </div>
             </div>


             <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
             <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
                <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
                <div><a href="/index.php/Form:Use_Cases" style="font-size: 1.5em; font-variant:small-caps; color: var(--links-cyan)">Add new use case</a></div>
            </div>


             <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"
                         <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=filters.svg">
                            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>
                         <span>Filters</span>
                     </div>
                     </div>
Line 726: Line 54:
                 </h2>
                 </h2>
                 <div style="text-align: center;">
                 <div style="text-align: center;">
                     <button class="large-button" type="button" onclick="clearFilters()">Show All</button>
                     <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                 </div>
                 </div>
                 <div class="filter-wrapper">
                 <div class="filter-wrapper">

Latest revision as of 09:49, 2 October 2024

Current version of the List of Use Cases.
Currently in use – do not modify!


Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:UseCaseList&oldid=12801"