feat(history): select icon depending on the unit

Signed-off-by: Patrick Stainbrook <[email protected]>
mainsail-crew · May 26, 2024 · 189c834 · 189c834
1 parent 84cca9c
commit 189c834
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 18 deletions.
diff --git a/src/components/panels/Miscellaneous/MoonrakerSensor.vue b/src/components/panels/Miscellaneous/MoonrakerSensor.vue
@@ -2,17 +2,15 @@
     <v-container class="px-0 py-2">
         <v-row>
             <v-col class="pb-3">
-                <div>{{ convertName(name) }}</div>    
-                <v-subheader class="_moonraker-sensor-subheader">                                                                                
-                    <table width="100%">
-                            <tbody>
-                                <moonraker-sensor-value
-                                    v-for="(valueName, index) of valueNames"
-                                    :key="'moonraker_sensor_value_' + index"
-                                    :sensor="name"
-                                    :value-name="valueName" />
-                            </tbody>
-                        </table>                    
+                <v-subheader class="sensor-name _moonraker-sensor-subheader">
+                    {{ convertName(name) }}
+                </v-subheader>                    
+                <v-subheader class="_moonraker-sensor-subheader">                    
+                        <moonraker-sensor-value
+                        v-for="(valueName, index) of valueNames"
+                        :key="'moonraker_sensor_value_' + index"
+                        :sensor="name"
+                        :value-name="valueName" />                                                                                                                         
                 </v-subheader>
             </v-col>
         </v-row>
@@ -48,10 +46,12 @@ export default class MoonrakerSensor extends Mixins(BaseMixin) {
 <style lang="scss">
 ._moonraker-sensor-subheader {
     height: auto;
+    display: block;
+}
 
 .sensor-name {
     font-weight: bold;
-    padding-left: 10px;
-}
+    margin-bottom: 5px;     
 }
+
 </style>
diff --git a/src/components/panels/Miscellaneous/MoonrakerSensorValue.vue b/src/components/panels/Miscellaneous/MoonrakerSensorValue.vue
@@ -1,9 +1,9 @@
 <template>
-    <tr>
-        <td class="text-left"><v-icon>{{ symbol }}</v-icon> {{ name }}:</td>
-        <td class="text-right pl-3">{{ value }}</td>
-        <td>{{ unit }}</td>
-    </tr>
+    <div class="moonraker-sensor-container">
+        <span class="text-left moonraker-sensor-value-name"><v-icon small>{{ symbol }}</v-icon> {{ name }}:</span>
+        <span class="text-right moonraker-sensor-value">{{ value }}</span>
+        <span class="moonraker-sensor-unit">{{ unit }}</span>
+    </div>
 </template>
 
 <script lang="ts">
@@ -90,3 +90,27 @@ export default class MoonrakerSensorValue extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style lang="scss">
+.moonraker-sensor-container {
+    display: flex;
+    width: 100%;
+
+}
+
+.moonraker-sensor-value-name {
+    align-self: flex-start;
+    flex: 1 1 auto;
+}
+
+.moonraker-sensor-value {
+    align-self: flex-end;    
+    flex: 1 1 auto;
+}
+
+.moonraker-sensor-unit {
+    align-self: flex-end;   
+    padding-left: 3px; 
+}
+</style>
+