feat: fixes iot dashboard (#78)

* chore: change height for lighting * fix: fix height for tablets
taiga-family · Aug 2, 2024 · 99862ca · 99862ca
1 parent c5d6444
commit 99862ca
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 22 deletions.
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html
@@ -21,7 +21,7 @@
             tuiBlock
             [ngClass]="{checked: control!.value}"
         >
-            <div>
+            <div class="title-room">
                 <input
                     tuiCheckbox
                     type="checkbox"

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.less
@@ -14,6 +14,12 @@
     margin-left: auto;
 }
 
+.title-room {
+    display: flex;
+    height: 1.875rem;
+    align-items: center;
+}
+
 .checked {
     background-color: var(--tui-status-warning-pale);
 }

diff --git a/...taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.html b/...taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.html
@@ -1,21 +1,20 @@
-<div *ngFor="let i of controlPanelService; let ind = index">
-    <button
-        tuiCardLarge
-        tuiHeader
-        tuiSurface="elevated"
-        class="button-card"
-    >
-        <aside tuiAccessories>
-            <tui-avatar
-                appearance=""
-                size="l"
-                [src]="i.img"
-                [style.color]="'var(--tui-background-accent-opposite)'"
-            />
-        </aside>
+<button
+    *ngFor="let i of controlPanelService; let ind = index"
+    tuiCardLarge
+    tuiHeader
+    tuiSurface="elevated"
+    class="button-card"
+>
+    <aside tuiAccessories>
+        <tui-avatar
+            appearance=""
+            size="l"
+            [src]="i.img"
+            [style.color]="'var(--tui-background-accent-opposite)'"
+        />
+    </aside>
 
-        <h3 class="text">
-            {{ i.name }}
-        </h3>
-    </button>
-</div>
+    <h3 class="text">
+        {{ i.name }}
+    </h3>
+</button>
diff --git a/...taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.less b/...taiga-lumbermill/src/dashboards/iot/components/control-panel/control-panel.component.less
@@ -23,12 +23,15 @@
 }
 
 .button-card {
+    display: flex;
     max-width: max-content;
+    align-items: center;
     padding-right: 1.75rem;
     gap: 1rem;
 
     @media (max-width: 50rem) {
         width: 100%;
+        height: 100%;
         max-width: 100%;
     }
 
@@ -39,7 +42,7 @@
     }
 }
 
-div:last-child {
+.button-card:last-child {
     grid-column-end: 3;
     grid-column-start: 1;
 }