Widget: DevGuidelines: Difference between revisions
From LINKS Community Center
Cschwentker (talk | contribs) No edit summary |
Cschwentker (talk | contribs) No edit summary |
||
| 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=" | <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 13:55, 22 November 2022
Development version of the List of Guidelines.
Not ready for production!