fix(storage): tweak device card ui

- use semibold for device details - use card size lg - change style for device path
NethServer · Oct 16, 2023 · 2bf7a19 · 2bf7a19
1 parent a122b99
commit 2bf7a19
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/src/views/standalone/system/StorageView.vue b/src/views/standalone/system/StorageView.vue
@@ -168,26 +168,37 @@ onMounted(() => {
           v-model="selectedDevicePath"
           :card="true"
           :label="''"
+          card-size="lg"
         >
           <template #option="{ option }">
-            <div class="flex flex-col text-left">
-              <p class="mb-1 text-sm">{{ option.label }} ({{ option.id }})</p>
-              <p class="text-sm">
-                <strong>{{ t('standalone.storage.size') }}:</strong>
+            <div class="flex flex-col text-left text-sm">
+              <div class="mb-1 flex flex-row">
+                <p>{{ option.label }}</p>
+                <p
+                  :class="[
+                    'ml-2',
+                    selectedDevicePath == option.id ? '' : 'text-gray-500 dark:text-gray-400'
+                  ]"
+                >
+                  {{ option.id }}
+                </p>
+              </div>
+              <p>
+                <span class="font-semibold">{{ t('standalone.storage.size') }}:</span>
                 {{
                   availableDevices.find((device) => device.name == option.label)?.size ??
                   t('standalone.storage.unknown')
                 }}
               </p>
-              <p class="text-sm">
-                <strong>{{ t('standalone.storage.model') }}:</strong>
+              <p>
+                <span class="font-semibold">{{ t('standalone.storage.model') }}:</span>
                 {{
                   availableDevices.find((device) => device.name == option.label)?.model ??
                   t('standalone.storage.unknown')
                 }}
               </p>
-              <p class="text-sm">
-                <strong>{{ t('standalone.storage.vendor') }}:</strong>
+              <p>
+                <span class="font-semibold">{{ t('standalone.storage.vendor') }}:</span>
                 {{
                   availableDevices.find((device) => device.name == option.label)?.vendor ??
                   t('standalone.storage.unknown')