Widget: DCTList: Difference between revisions
From LINKS Community Center
Eschmidt (talk | contribs) No edit summary |
Eschmidt (talk | contribs) No edit summary |
||
| 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 15:25, 6 September 2022
Development verstion of the DCT List.
Not ready for production!