Difference between revisions of "Widget:DevGuidelines"

From LINKS Community Center
Jump to: navigation, search
Line 28: Line 28:
 
             width: 2.5em;
 
             width: 2.5em;
 
             fill: var(--links-orange);
 
             fill: var(--links-orange);
 +
            margin-right: .5em;
 +
        }
 +
        #filter-bar { position: relative; margin: 1em 0 2em 0; }
 +
        #dct-filters {
 +
            position: absolute;
 +
            top: 0;
 +
            right: 0;
 +
            z-index: 100;
 +
            padding: 2em;
 +
            width: 45vw;
 +
            background: #fff;
 +
            border: 1px solid var(--links-blue);
 +
            clip-path: inset(0 0 100% 100%);
 +
            box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%);
 +
            transition: all 400ms ease-in-out;
 +
        }
 +
        #gl-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-blue);
 +
        }
 +
 +
        #gl-filters h2 svg {
 +
            height: 1.5em;
 +
            width: 1.5em;
 +
            margin-right: .5em;
 +
            margin-left: -.2em;
 +
        }
 +
 +
        .large-button {
 +
            border: 1px solid var(--links-blue);
 +
            font-size: 1.5em;
 +
            font-family: 'Open Sans';
 +
            font-weight: 100;
 +
            margin-bottom: 2em;
 +
            padding: 0.3em 0.8em;
 +
            color: var(--links-blue);
 +
            background: transparent;
 +
            font-variant: small-caps;
 +
            display: inline-block;
 +
            transition: all 200ms ease-in-out;
 +
        }
 +
 +
        .large-button:hover {
 +
            background-color: var(--links-blue);
 +
            color: #fff;
 +
        }
 +
 +
        #guidelines-list-wrapper h2 {
 +
            margin-bottom: 1em;
 +
        }
 +
 +
        .filter-button-wrapper {
 +
            margin-bottom: 1em;
 +
        }
 +
 +
        .filter-wrapper button {
 +
            border: 0 none;
 +
            color: var(--links-blue);
 +
            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 h4 {
 +
            display: flex;
 +
            justify-content: space-between;
 +
            align-items: flex-start;
 +
        }
 +
 +
        .filter-wrapper .filter-toggle svg {
 +
            width: 1.5em;
 +
            height: 1.5em;
 +
            fill: var(--links-blue);
 +
            cursor: pointer;
 +
        }
 +
 +
        .filter-wrapper.open .filter-toggle {
 +
            transform: rotate(180deg);
 +
        }
 +
 +
        .filter-content {
 +
            font-size: 1.2em;
 +
            margin-bottom: 4em;
 +
            display: grid;
 +
            grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
 +
            gap: 1em 1em;
 +
            align-items: start;
 +
        }
 +
 +
        .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;
 
             margin-right: .5em;
 +
        }
 +
 +
        .filter-content img {
 +
            width: 2em;
 +
            height: 2em;
 +
            margin: 0 .5em 0 0;
 
         }
 
         }
  
Line 92: Line 215:
 
             color: var(--links-orange);
 
             color: var(--links-orange);
 
         }
 
         }
 +
 +
 
     </style>
 
     </style>
 
     <script>
 
     <script>
Line 179: Line 304:
 
                 console.log('done')
 
                 console.log('done')
 
             });
 
             });
 +
 
         });
 
         });
 +
 +
 +
            // Listen for changes in filter checkbox state.
 +
            document.getElementById('data-source-filter').addEventListener('change', event => {
 +
                applyFilters();
 +
            }, { passive: true });
 +
            document.getElementById('functions-filter').addEventListener('change', event => {
 +
                applyFilters();
 +
            }, { passive: true });
 +
            document.getElementById('business-model-filter').addEventListener('change', event => {
 +
                applyFilters();
 +
            }, { passive: true });
 +
            document.getElementById('dm-use-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'));
 +
            });
 +
 +
        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('#dct-filters input[type="checkbox').forEach(checkbox => checkbox.checked = checkbox.defaultChecked);
 +
            applyFilters(true);
 +
        }
 +
 +
        function toggleFilter() {
 +
            document.getElementById('dct-filters').classList.toggle('open');
 +
        }
 
     </script>
 
     </script>
 
     <div id="guideline-list-wrapper">
 
     <div id="guideline-list-wrapper">
Line 216: Line 382:
 
     <!-- FILTERS -->
 
     <!-- FILTERS -->
  
−
     <div id="filter-bar">
+
     <div id="gl-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;">
Line 229: Line 395:
 
         <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="dct-filters">
+
         <div id="gl-filters">
 
             <h2 style="display: flex; justify-content: space-between;">
 
             <h2 style="display: flex; justify-content: space-between;">
 
                 <div>
 
                 <div>

Revision as of 14:55, 22 November 2022

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

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