fix: improve structure & styles

muxinc · Sep 26, 2024 · 29119ea · 29119ea
1 parent 3281fd6
commit 29119ea
Showing 1 changed file with 25 additions and 21 deletions.
diff --git a/src/js/menu/media-chrome-menu.ts b/src/js/menu/media-chrome-menu.ts
@@ -141,16 +141,6 @@ template.innerHTML = /*html*/ `
       transform: translate(-100%, 0);
     }
 
-    slot[name="header"][hidden] {
-      display: none;
-    }
-
-    slot[name="header"]::slotted(*) {
-      padding: .4em .7em;
-      border-bottom: 1px solid rgb(255 255 255 / .25);
-      cursor: default;
-    }
-
     button[part~="back"] {
       background: none;
       color: inherit;
@@ -161,6 +151,21 @@ template.innerHTML = /*html*/ `
       outline: inherit;
       display: inline-flex;
       align-items: center;
+    }
+
+    slot[name="header"][hidden] {
+      display: none;
+    }
+
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
+      padding: .4em .7em;
+      border-bottom: 1px solid rgb(255 255 255 / .25);
+      cursor: default;
+    }
+
+    slot[name="header"] > button[part~="back"],
+    slot[name="header"]::slotted(button[part~="back"]) {
       cursor: pointer;
     }
 
@@ -196,6 +201,7 @@ template.innerHTML = /*html*/ `
   </style>
   <style id="layout-row" media="width:0">
 
+    slot[name="header"] > *,
     slot[name="header"]::slotted(*) {
       padding: .4em .5em;
     }
@@ -221,16 +227,14 @@ template.innerHTML = /*html*/ `
   </style>
   <div id="container">
     <slot name="header" hidden>
-      <div>
-        <button part="back button" aria-label="Back to previous menu">
-          <slot name="back-icon">
-            <svg aria-hidden="true" viewBox="0 0 20 24" part="back indicator">
-              <path d="m11.88 17.585.742-.669-4.2-4.665 4.2-4.666-.743-.669-4.803 5.335 4.803 5.334Z"/>
-            </svg>
-          </slot>
-          <slot name="title"></slot>
-        </button>
-      </div>
+      <button part="back button" aria-label="Back to previous menu">
+        <slot name="back-icon">
+          <svg aria-hidden="true" viewBox="0 0 20 24" part="back indicator">
+            <path d="m11.88 17.585.742-.669-4.2-4.665 4.2-4.666-.743-.669-4.803 5.335 4.803 5.334Z"/>
+          </svg>
+        </slot>
+        <slot name="title"></slot>
+      </button>
     </slot>
     <slot></slot>
   </div>
@@ -730,7 +734,7 @@ class MediaChromeMenu extends globalThis.HTMLElement {
     return headerSlot
       .assignedElements({ flatten: true })
       ?.find(
-        (el) => el.part.contains('back') && el.part.contains('button')
+        (el) => el.matches('button[part~="back"]')
       ) as HTMLElement;
   }