magic with buttons

SideStore · Jul 31, 2023 · 1428754 · 1428754
1 parent af420d6
commit 1428754
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/src/index.html b/src/index.html
@@ -337,28 +337,33 @@ <h1 class="text-4xl font-medium tracking-tight shadow-title-r font-title sm:text
 
               <!-- <div class="w-full"></div> -->
               <!-- if peer/stepper nth child 0 is active, disabled -->
-              <button id="setup-prev-btn"
-                class="flex items-center px-1 py-1 mr-2 transition-colors bg-transparent border rounded-full shadow-md appearance-none md:px-3 w-max hover:bg-material border-zinc-800 focus:outline-none active:border-violet-300/50">
-                <svg xmlns=" http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 md:mr-2"
-                  viewBox="0 0 256 256">
-                  <path
-                    d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z">
-                  </path>
-                </svg>
-                <span class="hidden md:block md:w-max" aria-label="Previous Step">Previous Step</span>
-
-
-              </button>
-              <button id="setup-next-btn" aria-label="Next Step"
-                class="flex items-center px-1 py-1 transition-colors bg-transparent border rounded-full shadow-md appearance-none md:px-3 w-max hover:bg-material border-zinc-800 focus:outline-none active:border-violet-300/50 ">
-                <span class="hidden md:block md:w-max">Next Step</span>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 md:ml-2"
-                  viewBox="0 0 256 256">
-                  <path
-                    d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z">
-                  </path>
-                </svg>
-              </button>
+              <div class="flex items-center group" id="setup-btn-wrap">
+
+                <button id="setup-prev-btn"
+                  class="flex items-center justify-center px-1 py-1 mr-2 transition-colors bg-transparent border rounded-full shadow-md appearance-none lg:h-[34px] lg:min-w-[34px] nextprevok:px-3 sm:group-[.onlyprev]:px-3 w-max hover:bg-material border-zinc-800 focus:outline-none active:border-violet-300/50">
+                  <svg xmlns=" http://www.w3.org/2000/svg" fill="currentColor"
+                    class="w-5 h-5 nextprevok:mr-2 sm:group-[.onlyprev]:mr-2" viewBox="0 0 256 256">
+                    <path
+                      d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z">
+                    </path>
+                  </svg>
+                  <span
+                    class="hidden nextprevok:block nextprevok:w-max sm:group-[.onlyprev]:block sm:group-[.onlyprev]:w-max"
+                    aria-label="Previous Step">Previous
+                    Step</span>
+                </button>
+
+                <button id="setup-next-btn" aria-label="Next Step"
+                  class="flex items-center px-1 py-1 transition-colors bg-transparent border rounded-full shadow-md appearance-none md:px-3 w-max hover:bg-material border-zinc-800 focus:outline-none active:border-violet-300/50 peer">
+                  <span class="hidden md:block md:w-max">Next Step</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 md:ml-2"
+                    viewBox="0 0 256 256">
+                    <path
+                      d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z">
+                    </path>
+                  </svg>
+                </button>
+              </div>
             </div>
 
           </div>

diff --git a/src/index.js b/src/index.js
@@ -80,8 +80,9 @@ const update = (act) => {
     setupContent.classList.remove('!opacity-0');
     setupContent.classList.remove('translate-y-[10px]');
   }, 300);
-  act == 0 ? (setupPrevBtn.style.display = 'none') : (setupPrevBtn.style.display = 'flex');
-  act == 3 ? (setupNextBtn.style.display = 'none') : (setupNextBtn.style.display = 'flex');
+  setupPrevBtn.classList.toggle('hidden', act == 0);
+  setupNextBtn.classList.toggle('hidden', act == 3);
+  document.querySelector('#setup-btn-wrap').classList.toggle('onlyprev', act == 3);
 };
 
 setupNextBtn.addEventListener('click', () => {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
         buttonsok: '355px',
         stoplgtranslation: '1330px',
         gridok: '896px',
+        nextprevok: '1096px',
         grid35ok: '1268px',
         grid12ok: '1422px',
         dualbuttonok: '540px',