tweaks some spacing and coloring

i8beef · Jan 5, 2023 · 2f8e69a · 2f8e69a
1 parent 6d50521
commit 2f8e69a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/src/HomeAutio.Mqtt.GoogleHome/Models/DeviceTypeIconMapper.cs b/src/HomeAutio.Mqtt.GoogleHome/Models/DeviceTypeIconMapper.cs
@@ -47,7 +47,7 @@ public static string Map(DeviceType deviceType)
                 DeviceType.FIREPLACE => "fireplace",
                 DeviceType.FREEZER => "kitchen",
                 DeviceType.FRYER => "cooking",
-                DeviceType.GARAGE => "garage",
+                DeviceType.GARAGE => "garage_home",
                 DeviceType.GATE => "gate",
                 DeviceType.GRILL => "outdoor_grill",
                 DeviceType.HEATER => "thermostat",

diff --git a/src/HomeAutio.Mqtt.GoogleHome/Views/GoogleDevice/Index.cshtml b/src/HomeAutio.Mqtt.GoogleHome/Views/GoogleDevice/Index.cshtml
@@ -14,13 +14,13 @@
                 <div class="card-body">
                     @foreach (var group in Model.Select(x => x.RoomHint).Distinct().Order())
                     {
-                        <h4 class="mt-3 mb-3">@(group is not null ? group : "(unspecified)")</h4>
+                        <h4 class="mt-3 mb-2">@(group is not null ? group : "(unspecified)")</h4>
                         <div class="row row-cols-1 row-cols-md-2">
                         @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 text-decoration-none @(device.Disabled ? "border-danger" : string.Empty)">
-                                    <div class="card-header rounded-4">
+                            <div class="col mb-2">
+                                <a asp-controller="GoogleDevice" asp-action="Edit" asp-route-deviceId="@device.Id" class="card rounded-4 google-device @(device.Disabled ? "border-danger" : string.Empty)">
+                                    <div class="card-header rounded-4 p-3 ">
                                         <div class="material-symbols-outlined" style="position:absolute;top:calc(50% - 12px);left:12px;">
                                             @HomeAutio.Mqtt.GoogleHome.Models.DeviceTypeIconMapper.Map(device.Type)
                                         </div>

diff --git a/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.css b/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.css
@@ -21,14 +21,14 @@ a:hover {
 .navbar { padding: .25rem 1rem; }
 .navbar-brand { color: var(--bs-white); }
 .navbar-brand:hover {
-  color: var(--bs-gray-600);
+  color: var(--bs-gray-500);
 }
 
 .bg-primary .navbar-nav .nav-link {
   color: var(--bs-white) !important;
 }
 .bg-primary .navbar-nav .nav-link:hover {
-  color: var(--bs-gray-600) !important;
+  color: var(--bs-gray-500) !important;
 }
 
 .body-container {
@@ -65,6 +65,14 @@ a:hover {
   font-weight: bold;
 }
 
+a.card.google-device {
+  color: var(--bs-body-color) !important;
+  text-decoration: none !important;
+}
+a.card.google-device:hover {
+  color: var(--bs-gray-500) !important;
+}
+
 .btn.dropdown-toggle {
     white-space: break-spaces;
 }

diff --git a/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.scss b/src/HomeAutio.Mqtt.GoogleHome/wwwroot/css/site.scss
@@ -21,14 +21,14 @@ a:hover {
 .navbar { padding: .25rem 1rem; }
 .navbar-brand { color: var(--bs-white); }
 .navbar-brand:hover {
-  color: var(--bs-gray-600);
+  color: var(--bs-gray-500);
 }
 
 .bg-primary .navbar-nav .nav-link {
   color: var(--bs-white) !important;
 }
 .bg-primary .navbar-nav .nav-link:hover {
-  color: var(--bs-gray-600) !important;
+  color: var(--bs-gray-500) !important;
 }
 
 .welcome-page {
@@ -67,6 +67,14 @@ a:hover {
     }
 }
 
+a.card.google-device {
+  color: var(--bs-body-color) !important;
+  text-decoration: none !important;
+}
+a.card.google-device:hover {
+  color: var(--bs-gray-500) !important;
+}
+
 .btn.dropdown-toggle {
   white-space: break-spaces;
 }