diff --git a/styleguide/assets/style/merch.css b/styleguide/assets/style/merch.css new file mode 100644 index 0000000..bc19356 --- /dev/null +++ b/styleguide/assets/style/merch.css @@ -0,0 +1,128 @@ +main { + max-width: 100%; + height: 100vh; + overflow: auto; +} + +.table-container { + overflow-x: auto; + width: 100%; +} + +table { + user-select: none; + width: fit-content; + border-collapse: collapse; + border: solid 4px var(--color-shade-3); +} +table thead { + position: sticky; + top: calc(-1rem + 2px); + z-index: 10; + background-color: var(--color-background); + outline: solid 4px var(--color-shade-3); + outline-offset: -2px; +} +table thead tr > th { + outline: solid 1px var(--color-shade-3); +} +table thead tr > th.hover { + background-color: var(--color-shade-4); +} +table thead tr:first-child > th[colspan="15"] { + background-color: var(--color-shade-3); +} +table thead.currentEvent { + outline-color: var(--color-primary); +} +table thead.currentEvent tr > th { + outline-color: var(--color-primary); +} +table thead.currentEvent tr:first-child > th { + background-color: var(--color-primary); +} +table tbody { + border-top: solid 4px var(--color-shade-3); +} +table tbody.currentEvent { + border: solid 4px var(--color-primary); +} +table tbody > tr > th, +table thead > tr > th, +table td { + text-align: center; +} +table th, +table td { + padding: 0.25rem 0.5rem; + border: solid 1px var(--color-shade-3); +} +table th.hover, +table td.hover { + background-color: var(--color-shade-1); +} +table td.val { + font-family: "Departure Mono", ui-monospace, monospace; +} +table td.val.hover { + background-color: transparent; +} +table td.val:not(.empty) { + cursor: pointer; +} +table td.val:not(.empty).hover { + background-color: var(--color-shade-1); +} +table td.val:not(.empty):hover { + background-color: var(--color-shade-4); +} +table td.val.highlighted[data-dim=A] { + background-color: rgb(96, 165, 249); +} +table td.val.highlighted[data-dim=B] { + background-color: rgb(211, 129, 247); +} +table td.val.highlighted[data-dim=C] { + background-color: rgb(255, 121, 117); +} +table td.val.currentDimension:not(.hover) { + background-color: var(--color-shade-3); +} +table td.val:not([data-diff=""])::after { + content: attr(data-diff); + display: block; + font-size: 0.8em; + background-color: var(--custom-color); + width: calc(100% + 1rem); + height: 1lh; + position: relative; + left: -0.5rem; + top: 0.25rem; + margin-top: -0.25rem; +} +table td.val[data-diff=""]::after { + content: ""; + display: block; + font-size: 0.8em; + background-color: transparent; + width: calc(100% + 1rem); + height: 1lh; + position: relative; + left: -0.5rem; + top: 0.25rem; + margin-top: -0.25rem; +} +table td.dimension.hover { + background-color: var(--color-shade-4); +} +table td.dimension.currentDimension::after { + content: ">"; + /*color: var(--color-secondary);*/ + font-family: "Departure Mono", ui-monospace, monospace; + position: relative; + right: calc(-0.5rem - 0.5ch); + margin-left: -1ch; + font-weight: bold; +} + +/*# sourceMappingURL=merch.css.map */ diff --git a/styleguide/assets/style/merch.css.map b/styleguide/assets/style/merch.css.map new file mode 100644 index 0000000..7e9b841 --- /dev/null +++ b/styleguide/assets/style/merch.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA","file":"merch.css"} \ No newline at end of file diff --git a/styleguide/assets/style/merch.scss b/styleguide/assets/style/merch.scss new file mode 100644 index 0000000..afc30c1 --- /dev/null +++ b/styleguide/assets/style/merch.scss @@ -0,0 +1,156 @@ +main { + max-width: 100%; + height: 100vh; + overflow: auto; +} + +.table-container { + overflow-x: auto; + width: 100%; +} + +table { + user-select: none; + width: fit-content; + border-collapse: collapse; + border: solid 4px var(--color-shade-3); + + thead { + position: sticky; + top: calc(-1rem + 2px); + z-index: 10; + background-color: var(--color-background); + outline: solid 4px var(--color-shade-3); + outline-offset: -2px; + + tr > th { + outline: solid 1px var(--color-shade-3); + + &.hover { + background-color: var(--color-shade-4); + } + } + + tr:first-child > th[colspan='15'] { + background-color: var(--color-shade-3); + } + + &.currentEvent { + tr > th { + outline-color: var(--color-primary); + } + + outline-color: var(--color-primary); + + tr:first-child > th { + background-color: var(--color-primary); + } + } + } + + tbody { + border-top: solid 4px var(--color-shade-3); + + &.currentEvent { + border: solid 4px var(--color-primary); + } + } + + tbody > tr > th, + thead > tr > th, + td { + text-align: center; + } + + th, + td { + padding: 0.25rem 0.5rem; + border: solid 1px var(--color-shade-3); + + &.hover { + background-color: var(--color-shade-1); + } + } + + td { + &.val { + font-family: "Departure Mono", ui-monospace, monospace; + + &.hover { + background-color: transparent; + } + + &:not(.empty) { + cursor: pointer; + + &.hover { + background-color: var(--color-shade-1); + } + + &:hover { + background-color: var(--color-shade-4); + } + } + + &.highlighted { + &[data-dim="A"] { + background-color: rgb(96, 165, 249); + } + + &[data-dim="B"] { + background-color: rgb(211, 129, 247); + } + + &[data-dim="C"] { + background-color: rgb(255, 121, 117); + } + } + + &.currentDimension:not(.hover) { + background-color: var(--color-shade-3); + } + + &:not([data-diff=''])::after { + content: attr(data-diff); + display: block; + font-size: 0.8em; + background-color: var(--custom-color); + width: calc(100% + 1rem); + height: 1lh; + position: relative; + left: -0.5rem; + top: 0.25rem; + margin-top: -0.25rem; + } + + &[data-diff='']::after { + content: ''; + display: block; + font-size: 0.8em; + background-color: transparent; + width: calc(100% + 1rem); + height: 1lh; + position: relative; + left: -0.5rem; + top: 0.25rem; + margin-top: -0.25rem; + } + } + + &.dimension { + &.hover { + background-color: var(--color-shade-4); + } + + &.currentDimension::after { + content: '>'; + /*color: var(--color-secondary);*/ + font-family: "Departure Mono", ui-monospace, monospace; + position: relative; + right: calc(-0.5rem - 0.5ch); + margin-left: -1ch; + font-weight: bold; + } + } + } +} diff --git a/styleguide/merch.html b/styleguide/merch.html index 06bab70..c3461a5 100644 --- a/styleguide/merch.html +++ b/styleguide/merch.html @@ -3,148 +3,11 @@ + content="width=device-width, user-scalable=no, initial-scale=1.0"> + EH22 - Merch - @@ -156,7 +19,7 @@
  • C - sleeve
    • - + @@ -178,7 +41,7 @@ - + @@ -225,7 +88,7 @@ - + @@ -272,7 +135,7 @@ - + @@ -319,7 +182,7 @@ - + @@ -1238,17 +1101,28 @@ function hoverCell(e) { const cell = e.target; + const group = cell.parentElement.parentElement; const col = cell.dataset.col; + const dim = cell.dataset.dim; + hoverOff() document.querySelectorAll('table > thead > tr > th').forEach(match => { - match.classList.remove('highlighted') - if (match.dataset.col === col) match.classList.add('highlighted') + if (match.dataset.col === col) match.classList.add('hover') + }); + group.querySelectorAll('td.dimension').forEach(match => { + if (match.innerText === dim) match.classList.add('hover') + }); + group.querySelectorAll('td:not(.dimension), th').forEach(match => { + match.classList.add('hover') }); } function hoverOff() { document.querySelectorAll('table > thead > tr > th').forEach(match => { - match.classList.remove('highlighted') + match.classList.remove('hover') + }); + document.querySelectorAll('td.dimension, td, th').forEach(match => { + match.classList.remove('hover') }); } @@ -1265,11 +1139,11 @@ cell.dataset.diff = ''; cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML; - cell.addEventListener('pointerdown', selectCellPlus); + cell.addEventListener('click', selectCellPlus); }); // disable select on click outside value cell - document.addEventListener('pointerdown', e => { + document.addEventListener('click', e => { document.querySelectorAll('td.val:not(.empty)').forEach(match => { match.dataset.diff = ''; match.classList.remove('highlighted')
    Easterhegg - EH22
    6XL
    Shirt Straight Stanley/Stella
    Shirt Fitted Stanley/Stella
    Hoodie Stanley/Stella
    Zipper Stanley/Stella