admin: Improve Z-Index and code block order for clarity

ThrRip · Dec 5, 2023 · 72bab37 · 72bab37
1 parent 866774a
commit 72bab37
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/packages/admin/app.vue b/packages/admin/app.vue
@@ -66,14 +66,6 @@
         </button>
       </section>
     </nav>
-    <div
-      class="z-10 grid grid-areas-stack justify-items-center items-center
-      -ml-[13.5rem] sm:-ml-[13rem] w-[52rem] h-full transition-[margin-left] duration-300"
-      :class="{ '!-ml-[30rem] sm:!-ml-[29rem]': !viewShowFullNavigationBar }"
-    >
-      <div class="w-full h-full backdrop-blur-[3rem]" />
-      <div class="w-[85vw] sm:w-1/2 h-2/3 lg:h-[calc(100dvh_-_14rem)] bg-blue-l" />
-    </div>
     <main class="overflow-x-clip overflow-y-auto lg:overflow-y-hidden grid grid-cols-[1fr] grid-rows-[1fr] h-full bg-white-alt">
       <NuxtPage
         :backend-client="backendClient"
@@ -84,6 +76,15 @@
         }"
       />
     </main>
+    <div class="-z-10 w-full backdrop-blur-[3rem]" />
+    <div
+      class="-z-20 grid grid-areas-stack justify-items-center items-center
+      -ml-[13.5rem] sm:-ml-[13rem] w-[52rem] h-full transition-[margin-left] duration-300"
+      :class="{ '!-ml-[30rem] sm:!-ml-[29rem]': !viewShowFullNavigationBar }"
+    >
+      <div class="w-[85vw] sm:w-1/2 h-2/3 lg:h-[calc(100dvh_-_14rem)] bg-blue-l" />
+    </div>
+    <div class="-z-50 w-full bg-white-alt" />
   </div>
 </template>
 

diff --git a/packages/admin/components/PlaylistList.vue b/packages/admin/components/PlaylistList.vue
@@ -143,7 +143,7 @@
     </div>
     <div class="overflow-y-hidden grid grid-areas-stack h-full">
       <div
-        class="z-40 flex flex-row order-2 justify-between items-center self-end px-6 pr-2 py-1.5 h-12
+        class="z-20 flex flex-row order-2 justify-between items-center self-end px-6 pr-2 py-1.5 h-12
         bg-white-alta/75 border-t border-gray backdrop-blur"
       >
         <span v-if="props.type === 'main'">
@@ -242,7 +242,7 @@
                 key="input"
                 ref="modifyingInput"
                 type="text"
-                class="z-30 w-full h-2/3 bg-white
+                class="z-10 w-full h-2/3 bg-white
                 rounded focus:outline-none ring-2 ring-blue ring-offset-[4.5px] ring-offset-white"
                 :value="song.name"
                 @blur="// @ts-ignore
@@ -295,7 +295,7 @@
                 key="input"
                 ref="modifyingInput"
                 type="text"
-                class="z-30 w-full h-2/3 bg-white
+                class="z-10 w-full h-2/3 bg-white
                 rounded focus:outline-none ring-2 ring-blue ring-offset-[4.5px] ring-offset-white"
                 :value="song.artist"
                 @blur="// @ts-ignore
@@ -348,7 +348,7 @@
                 key="input"
                 ref="modifyingInput"
                 type="text"
-                class="z-30 w-full h-2/3 text-center bg-white
+                class="z-10 w-full h-2/3 text-center bg-white
                 rounded focus:outline-none ring-2 ring-blue ring-offset-[4.5px] ring-offset-white"
                 :value="song.payment_amount"
                 @blur="// @ts-ignore
@@ -409,7 +409,7 @@
                 key="input"
                 ref="modifyingInput"
                 type="text"
-                class="z-30 w-full h-2/3 bg-white
+                class="z-10 w-full h-2/3 bg-white
                 rounded focus:outline-none ring-2 ring-blue ring-offset-[4.5px] ring-offset-white"
                 :value="song.language"
                 @blur="// @ts-ignore