More robust alignment on index page

i8beef · Jan 5, 2023 · 7291d7c · 7291d7c
1 parent ad04e62
commit 7291d7c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/HomeAutio.Mqtt.GoogleHome/Views/GoogleDevice/Index.cshtml b/src/HomeAutio.Mqtt.GoogleHome/Views/GoogleDevice/Index.cshtml
@@ -19,15 +19,16 @@
                         @foreach (var device in Model.Where(x => x.RoomHint == group).OrderBy(x => x.Name.Name))
                         {
                             <div class="col mb-4">
-                                <a asp-controller="GoogleDevice" asp-action="Edit" asp-route-deviceId="@device.Id" class="card rounded-4 @(device.Disabled ? "border-danger" : string.Empty)">
+                                <a asp-controller="GoogleDevice" asp-action="Edit" asp-route-deviceId="@device.Id" class="card rounded-4 text-decoration-none @(device.Disabled ? "border-danger" : string.Empty)">
                                     <div class="card-header rounded-4">
-                                        <div class="material-symbols-outlined d-inline-block align-middle">
+                                        <div class="material-symbols-outlined" style="position:absolute;top:calc(50% - 12px);left:12px;">
                                             @HomeAutio.Mqtt.GoogleHome.Models.DeviceTypeIconMapper.Map(device.Type)
-                                        </div><div class="d-inline-block align-middle ms-2">
-                                            <div class="lh-1">
+                                        </div>
+                                        <div class="align-middle ps-4">
+                                            <div class="lh-1 text-break">
                                                 @device.Name.Name
                                             </div>
-                                            <div class="text-muted lh-1">
+                                            <div class="text-muted lh-1 text-break">
                                                 @device.Id
                                             </div>
                                         </div>

diff --git a/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.css b/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.css
@@ -20,6 +20,10 @@ a:hover {
 
 .navbar { padding: .25rem 1rem; }
 .navbar-brand { color: var(--bs-white); }
+.navbar-brand:hover {
+  color: var(--bs-gray-600);
+}
+
 .bg-primary .navbar-nav .nav-link {
   color: var(--bs-white) !important;
 }

diff --git a/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.scss b/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.scss
@@ -20,6 +20,10 @@ a:hover {
 
 .navbar { padding: .25rem 1rem; }
 .navbar-brand { color: var(--bs-white); }
+.navbar-brand:hover {
+  color: var(--bs-gray-600);
+}
+
 .bg-primary .navbar-nav .nav-link {
   color: var(--bs-white) !important;
 }