show play controls

Author: snow-jallen

HomeSpeaker.WebAssembly/Components/Layout/MainLayout.razor

@@ -6,12 +6,6 @@
     </div>
 
     <main>
-        <div class="top-row px-md-4">
-            <div class="col-auto">
-                <PlayControls />
-            </div>
-        </div>
-
         <article class="content px-1 px-md-4">
             @Body
         </article>

HomeSpeaker.WebAssembly/Components/Layout/MainLayout.razor.css

@@ -13,67 +13,23 @@ main {
     box-sizing: border-box;
 }
 
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
 @media (max-width: 1023.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
+    /* Mobile layout adjustments */
 }
 
 @media (min-width: 1024px) {
     .page {
         flex-direction: row;
-    }    .sidebar {
+    }
+    
+    .sidebar {
         width: 180px;
         height: 100vh;
         position: sticky;
         top: 0;
     }
 
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
+    article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }

HomeSpeaker.WebAssembly/Components/Layout/NavMenu.razor

@@ -5,15 +5,17 @@
 @inject IConfiguration config
 
 <div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">        <div class="navbar-brand">
+    <div class="container-fluid">
+        <div class="navbar-brand">
             <a class="navbar-brand" href="">Home Speaker</a>
             @if (showLogs ?? false)
             {
                 <NavLink href="aspire"><img src="/aspire-dashboard.png" width="24" alt="aspire" /></NavLink>
             }
         </div>
-        <button class="btn btn-dark d-block d-sm-none" @onclick=stopAsync><span class="oi oi-media-stop top-0"></span></button>
-        <button class="btn btn-dark d-block d-sm-none" @onclick=skipAsync><span class="oi oi-media-skip-forward top-0"></span></button>
+        <div class="playback-controls d-flex align-items-center">
+            <PlayControls />
+        </div>
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
             <span class="navbar-toggler-icon"></span>
         </button>

HomeSpeaker.WebAssembly/Components/Layout/NavMenu.razor.css

@@ -50,6 +50,74 @@
     color: white;
 }
 
+/* Playback controls styling */
+.playback-controls {
+    flex: 1;
+    justify-content: center;
+    gap: 0.25rem;
+    overflow: hidden; /* Prevent buttons from breaking the layout */
+}
+
+.playback-controls ::deep .btn {
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.875rem;
+    min-width: 2.25rem;
+    height: 2.5rem;
+    flex-shrink: 0; /* Prevent buttons from shrinking too much */
+}
+
+.playback-controls ::deep .btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.playback-controls ::deep .btn:focus {
+    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
+}
+
+/* Responsive design for playback controls */
+@media (max-width: 991.98px) {
+    .playback-controls {
+        gap: 0.125rem;
+    }
+    
+    .playback-controls ::deep .btn {
+        padding: 0.25rem 0.375rem;
+        font-size: 0.75rem;
+        min-width: 2rem;
+        height: 2rem;
+    }
+}
+
+/* Hide buttons only when there's really not enough space */
+@media (max-width: 540px) {
+    /* Hide Clear and Shuffle buttons on smaller screens */
+    .playback-controls ::deep .btn:nth-child(4),
+    .playback-controls ::deep .btn:nth-child(5) {
+        display: none;
+    }
+}
+
+@media (max-width: 420px) {
+    /* Hide Skip button on very small screens */
+    .playback-controls ::deep .btn:nth-child(3) {
+        display: none;
+    }
+}
+
+/* For medium-sized screens like tablets, show all buttons but smaller */
+@media (min-width: 541px) and (max-width: 991.98px) {
+    .playback-controls ::deep .btn {
+        padding: 0.3rem 0.4rem;
+        font-size: 0.8rem;
+        min-width: 2.1rem;
+        height: 2.2rem;
+    }
+}
+
 @media (min-width: 1024px) {
     .navbar-toggler {
         display: none;