Difference between revisions of "Widget:DCTList"
From LINKS Community Center
| Line 35: | Line 35: | ||
fill: var(--links-blue); | fill: var(--links-blue); | ||
margin-right: .5em; | margin-right: .5em; | ||
| + | } | ||
| + | |||
| + | #filter-bar { position: relative; } | ||
| + | #dct-filters { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | right: 0; | ||
| + | z-index: 100; | ||
| + | padding: 2em; | ||
| + | width: 45vw; | ||
| + | background: #fff; | ||
| + | /* clip-path: inset(0 0 50% 50%); */ | ||
| + | border: 1px solid; | ||
| + | display: none; | ||
| + | } | ||
| + | #dct-filters.open { | ||
| + | display: block; | ||
} | } | ||
| Line 504: | Line 521: | ||
document.querySelectorAll('#dct-filters input[type="checkbox').forEach(checkbox => checkbox.checked = checkbox.defaultChecked); | document.querySelectorAll('#dct-filters input[type="checkbox').forEach(checkbox => checkbox.checked = checkbox.defaultChecked); | ||
applyFilters(true); | applyFilters(true); | ||
| + | } | ||
| + | |||
| + | function toggleFilter() { | ||
| + | document.getElementById('dct-filters').classList.toggle('open'); | ||
} | } | ||
</script> | </script> | ||
| Line 535: | Line 556: | ||
<div style="display: flex; justify-content: space-between;"> | <div style="display: flex; justify-content: space-between;"> | ||
<span style="visibility: hidden;">Test</span> | <span style="visibility: hidden;">Test</span> | ||
| − | <button class="large-button" type="button" onclick="">Filters</button> | + | <button class="large-button" type="button" onclick="toggleFilter()">Filters</button> |
</div> | </div> | ||
<div id="dct-filters"> | <div id="dct-filters"> | ||
| + | <button onclick="toggleFilter()">close</button> | ||
<h2> | <h2> | ||
<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"> | ||
Revision as of 16:25, 6 September 2022
Development verstion of the DCT List.
Not ready for production!