From c1bcf9fa8a9e629e49ff8ac2c268da6468615244 Mon Sep 17 00:00:00 2001 From: Haka <76921756+Hakorr@users.noreply.github.com> Date: Fri, 23 Sep 2022 02:36:40 +0300 Subject: [PATCH] Modifier Card Resizing --- ui/index.html | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/ui/index.html b/ui/index.html index 440910e0..9f5062b8 100644 --- a/ui/index.html +++ b/ui/index.html @@ -263,6 +263,49 @@ border: 2px solid rgba(255, 255, 255, .05); cursor: pointer; } + .modifier-card-size_5 { + width: 18em; + grid-template-rows: 18em 3.5em; + height: 21.5em; + } + .modifier-card-size_4 { + width: 14em; + grid-template-rows: 14em 3.5em; + height: 17.5em; + } + .modifier-card-size_3 { + width: 11em; + grid-template-rows: 11em 3.5em; + height: 14.5em; + } + .modifier-card-size_2 { + width: 10em; + grid-template-rows: 10em 3.5em; + height: 13.5em; + } + .modifier-card-size_1 { + width: 9em; + grid-template-rows: 9em 3.5em; + height: 12.5em; + } + .modifier-card-size_-1 { + width: 7em; + grid-template-rows: 7em 3.5em; + height: 10.5em; + } + .modifier-card-size_-2 { + width: 6em; + grid-template-rows: 6em 3.5em; + height: 9.5em; + } + .modifier-card-size_-3 { + width: 5em; + grid-template-rows: 5em 3.5em; + height: 8.5em; + } + .modifier-card-size_-3 p { + font-size: 0.8em; + } .modifier-card-tiny { width: 6em; height: 9.5em; @@ -272,6 +315,7 @@ font-size: 0.7em; } .modifier-card:hover { + transform: scale(1.05); box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25); } .modifier-card-image-container { @@ -381,6 +425,10 @@ visibility: visible; opacity: 1; } + #modifier-card-size-slider { + width: 6em; + margin-bottom: 0.5em; + } @@ -503,6 +551,10 @@ +
+ + +
@@ -594,6 +646,10 @@ let editorTagsContainer = document.querySelector('#editor-inputs-tags-container' let previewImageField = document.querySelector('#preview-image') previewImageField.onchange = () => changePreviewImages(previewImageField.value); + +let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider') +modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value); + let previewPrompt = document.querySelector('#preview-prompt') let showConfigToggle = document.querySelector('#configToggleBtn') @@ -1461,6 +1517,23 @@ function changePreviewImages(val) { }); } +function resizeModifierCards(val) { + const cardSizePrefix = 'modifier-card-size_'; + const modifierCardClass = 'modifier-card'; + + const modifierCards = document.querySelectorAll(`.${modifierCardClass}`); + const cardSize = n => `${cardSizePrefix}${n}`; + + modifierCards.forEach(card => { + // remove existing size classes + const classes = card.className.split(' ').filter(c => !c.startsWith(cardSizePrefix)); + card.className = classes.join(' ').trim(); + + if(val != 0) + card.classList.add(cardSize(val)); + }); +} + async function loadModifiers() { try { let res = await fetch('/modifiers.json')