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!