fix: do better handling of small screens

Fix the bug with the icons displayed smaller than their width and height values. Adjust style of the header a bit: colors, transitions and small screen display. Signed-off-by: Artem Chernyshev <[email protected]>
siderolabs · Jun 21, 2024 · 85424da · 85424da
1 parent 8b16da3
commit 85424da
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 11 deletions.
diff --git a/frontend/src/components/THeader/THeader.vue b/frontend/src/components/THeader/THeader.vue
@@ -9,19 +9,19 @@ included in the LICENSE file.
     <div class="t-header-nav-wrapper">
       <div class="t-header-logo-wrapper">
         <router-link to="/" class="flex items-center gap-1 text-lg text-naturals-N13 uppercase">
-          <t-icon class="t-header-icon w-7 h-7" icon="logo" />
+          <t-icon class="t-header-icon w-7 h-7" icon="logo"/>
           <span class="font-bold">Sidero</span>
           <span>Omni</span>
         </router-link>
       </div>
       <div class="t-header-nav">
-        <a href="https://omni.siderolabs.com/docs/" target="_blank" class="flex hover:text-naturals-N14">
+        <a href="https://omni.siderolabs.com/docs/" target="_blank" class="flex hover:text-naturals-N14 transition-colors">
           <t-icon class="t-header-nav-icon" icon="info" />
-          <span class="t-header-nav-name">Documentation</span>
+          <span class="t-header-nav-name max-sm:hidden">Documentation</span>
         </a>
-        <a href="https://github.com/siderolabs/omni/issues" target="_blank" class="flex hover:text-naturals-N14">
+        <a href="https://github.com/siderolabs/omni/issues" target="_blank" class="flex hover:text-naturals-N14 transition-colors">
           <t-icon class="t-header-nav-icon" icon="check-in-circle" />
-          <span class="t-header-nav-name">Report an issue</span>
+          <span class="t-header-nav-name max-sm:hidden">Report an issue</span>
         </a>
         <ongoing-tasks/>
       </div>
@@ -57,6 +57,6 @@ import OngoingTasks from "@/components/common/OngoingTasks/OngoingTasks.vue";
 }
 
 .t-header-nav-name {
-  @apply text-xs;
+  @apply text-xs truncate;
 }
 </style>
diff --git a/frontend/src/components/common/Button/TButton.vue b/frontend/src/components/common/Button/TButton.vue
@@ -16,7 +16,7 @@ included in the LICENSE file.
     }"
   >
     <span class="t-button-text whitespace-nowrap" v-if="$slots.default" :style="textOrder" :class="{ 'text-red-R1': danger }">
-      <slot />
+      <slot/>
     </span>
     <t-icon :icon="icon" v-if="icon" class="button-icon" :class="{ 'text-red-R1': danger }"/>
   </button>

diff --git a/frontend/src/components/common/Icon/TIcon.vue b/frontend/src/components/common/Icon/TIcon.vue
@@ -6,7 +6,7 @@ included in the LICENSE file.
 -->
 <template>
   <img v-if="svgBase64" alt="" :src="`data:image/svg+xml;base64,${svgBase64}`"/>
-  <component v-else :is="component"/>
+  <component v-else :is="component" class="min-w-max"/>
 </template>
 
 <script setup lang="ts">

diff --git a/frontend/src/components/common/OngoingTasks/OngoingTasks.vue b/frontend/src/components/common/OngoingTasks/OngoingTasks.vue
@@ -111,7 +111,7 @@ const onClickOutside = () => {
 
 <style scoped>
 .dropdown {
-  @apply flex items-center cursor-pointer gap-1 text-naturals-N11 hover:text-naturals-N13;
+  @apply flex items-center cursor-pointer gap-1 text-naturals-N11 hover:text-naturals-N14 transition-colors;
 }
 .dropdown-wrapper {
   @apply relative flex items-center;

diff --git a/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue b/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue
@@ -10,7 +10,7 @@ included in the LICENSE file.
     <div class="flex-1 grid grid-cols-4 -mr-3 items-center" @click="openNodeInfo">
       <div class="col-span-2 flex items-center gap-2">
         <t-icon icon="server" class="w-4 h-4 ml-2"/>
-        <router-link :to="{ name: 'NodeOverview', params: { cluster: clusterName, machine: machine.metadata.id }}" class="list-item-link">
+        <router-link :to="{ name: 'NodeOverview', params: { cluster: clusterName, machine: machine.metadata.id }}" class="list-item-link truncate">
           {{ nodeName }}
         </router-link>
       </div>

diff --git a/frontend/src/views/cluster/ClusterMachines/MachineSet.vue b/frontend/src/views/cluster/ClusterMachines/MachineSet.vue
@@ -15,7 +15,7 @@ included in the LICENSE file.
               {{ machineSetTitle(clusterID, machineSet?.metadata?.id) }}
             </div>
           </div>
-          <div class="flex-1 flex ml-10">
+          <div class="flex-1 flex max-md:ml-1 md:ml-10">
             <t-spinner class="w-4 h-4" v-if="scaling"/>
             <div class="flex items-center gap-1" v-else-if="!editingMachinesCount">
               {{ machineSet?.spec?.machines?.healthy || 0 }}/{{ machineSet?.spec?.machines?.requested || 0 }}