fix: cosmetic changes

fronts/app/src/components/Card.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="card-root" :class="color">
+  <div class="card-root" :class="{[color]: true, mini}">
     <div class="card-container">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    color: {default: 'blue'}
-  }
-}
+<script setup>
+defineProps({
+  color: {default: 'blue'},
+  mini: {default: false},
+})
 </script>
 
 <style lang="scss" scoped>
@@ -33,7 +32,13 @@ export default {
 }
 .card-root {
   width: 300px;
-  height: 100px;
+  height: auto;
+  &.mini {
+    border-radius: 1000px;
+    .card-container {
+      flex-direction: row;
+    }
+  }
   display: flex;
   align-items: center;
   position: relative;
@@ -54,10 +59,6 @@ export default {
     height: 45%;
   }
   .card-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
     width: 100%;
     z-index: 1;
     display: flex;

fronts/app/src/components/Popover.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="popover-root">
+  <div class="popover-root" v-if="!disable" :class="{fullWidth}">
     <div ref="refTrigger" class="trigger">
       <slot name="trigger" ></slot>
     </div>
     <div ref="refContent" class="content" :style="{maxHeight, overflow: maxHeight !== 'auto' ? 'auto' : 'inherit'}">
       <slot name="content"/>
     </div>
   </div>
+  <div class="popover-root" v-else>
+    <slot name="trigger"/>
+  </div>
 </template>
 
 <script>
@@ -24,6 +27,8 @@ export default {
     trigger: { default: 'click' },
     placement: { default: 'bottom' },
     appendTo: {default: 'parent'},
+    disable: {default: false},
+    fullWidth: {default: false},
   },
   setup(props) {
     /** @type {import('vue').Ref<Element | import('tippy.js').MultipleTargets | null>} */
@@ -57,5 +62,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+.fullWidth {
+  &.popover-root, .trigger {
+    width: 100%;
+  }
+}
 </style>

fronts/app/src/components/Progress.vue

@@ -25,7 +25,7 @@ export default {
 .progress {
   padding: 3px;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 100px;
   background: #dfdfdf;  
   box-shadow: inset 0 1px 2px 2px #ccc;
 }

fronts/app/src/components/Section.vue

@@ -2,21 +2,29 @@
   <div class="section" :class="{noStyle, noBodyPadding, headerBold,  headerCenter}">
     <div class="background">
     </div>
-    <div class="title" v-if="header || actions">
+    <div class="title" v-if="header || actions?.length">
       <div v-if="header">
         {{header}}
       </div>
       <slot v-else name="header">
       </slot>
       <div class="actions">
-        <button
-          @click="action?.click?.()"
-          v-for="action of activeActions"
-          :key="action.label"
-          class="action small" :class="{mini: !action.label && action.icon || action.small, active: action.active}">
-          <i :class="action.icon" v-if="action.icon"  aria-hidden="true"></i>
-          <span class="text" v-if="action.label">{{action.label}}</span>
-        </button>
+        <template v-for="action of activeActions" :key="action.label">
+          <Popover appendTo="parent" trigger="mouseenter" placement="top" :disable="!action.hover">
+            <template #trigger>
+              <button
+                @click="action?.click?.()"
+                class="action small" :class="{mini: !action.label && action.icon || action.small, active: action.active}">
+                <i :class="action.icon" v-if="action.icon"  aria-hidden="true"></i>
+                <span class="text" v-if="action.label">{{action.label}}</span>
+              </button>
+            </template>
+            <template #content>
+              <span class="text" v-if="action.hover">{{action.hover}}</span>
+            </template>
+          </Popover>
+        </template>
+        
       </div>
     </div>
     <div class="content" :style="{maxHeight}">
@@ -27,6 +35,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import Popover from './Popover.vue';
 
 const props = defineProps({
   header: {default: ''},
@@ -50,28 +59,26 @@ const activeActions = computed(() => {
  *   icon?: string,
  *   hidden?: boolean,
  *   label?: string,
+ *   hover?: string,
  *   small?: boolean,
  *   active?: boolean,
  * }} Action
  */
 </script>
 
 <style lang="scss" scoped>
-$mainColor: rgb(235, 235, 235);
-$secondaryColor: rgb(238, 238, 238);
+$mainColor: rgb(240, 240, 240);
+$secondaryColor: rgb(255, 255, 255);
 $shadow: rgb(165, 177, 179);
 .section {
   min-width: 0;
   width: calc(100%);
-  margin: 5px 0;
   box-sizing: border-box;
   border-right: 0;
   display: flex;
   flex-direction: column;
-  border: 1px solid #e8e8e8;
-  box-shadow: 10px 10px 20px rgba(0,0,0,0.1),
-    -10px -10px 20px rgba(255,255,255, 1);
-    border-radius: 2px;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
   position: relative;
   .background{
     background: $mainColor;
@@ -124,8 +131,10 @@ $shadow: rgb(165, 177, 179);
     flex-wrap: wrap;
     width: max-content;
     justify-content: flex-end;
+    gap: 5px;
     .action {
       gap: 5px;
+      margin: 0;
     }
     .action.mini {
       width: max-content;

fronts/app/src/components/Tabs.vue

@@ -1,14 +1,23 @@
 <template>
-  <div class="tabs">
+  <div class="tabs" :class="{[direction]: true}">
     <div class="buttons" :class="{invert:invertColor}">
-      <button @click="currentTab = tab;save()" v-for="tab of availableTabs" :key="tab.label" :class="{active: tab?.id === currentTab?.id}">
-        <div v-if="tab.label && !tab.icon">{{tab.label}}</div>
-        <i v-if="tab.icon" :class="tab.icon" aria-hidden="true"></i>
-        <label v-if="showLabels">{{tab?.data?.value?.length || tab?.data?.length || 0}}</label>
-        <div v-if="tab?.warning" class="badge warning">{{ tab.warning }}</div>
-      </button>
+      <template v-for="tab of availableTabs" :key="tab.label" >
+        <Popover appendTo="parent" trigger="mouseenter" placement="right" :fullWidth="true">
+          <template #trigger>
+            <button @click="currentTab = tab;save()" :class="{active: tab?.id === currentTab?.id}">
+              <div v-if="tab.label && !tab.icon">{{tab.label}}</div>
+              <i v-if="tab.icon" :class="tab.icon" aria-hidden="true"></i>
+              <label v-if="showLabels">{{tab?.data?.value?.length || tab?.data?.length || 0}}</label>
+              <div v-if="tab?.warning" class="badge warning">{{ tab.warning }}</div>
+            </button>
+          </template>
+          <template #content>
+            {{ tab.label }}
+          </template>
+        </Popover>
+      </template>
     </div>
-    <div class="content">
+    <div class="content" :style="contentCss">
       <slot :key="currentTab?.id" :data="currentTab?.data?.value || currentTab?.data" :tab="currentTab" v-if="currentTab"/>
     </div>
   </div>
@@ -17,6 +26,8 @@
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router';
+import Popover from './Popover.vue';
+
 const router = useRouter(); 
 
 
@@ -25,7 +36,9 @@ const props = defineProps({
     /** @type {Tab[]} */
     default: []
   },
+  direction: {default: ''},
   showLabels: {default: true},
+  contentCss: {default: () => ({})},
   invertColor: {default: false}
 })
 /** @type {import('vue').Ref<Tab | undefined>} */
@@ -80,70 +93,92 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+
+@mixin card($mainColor, $secondaryColor, $shadow) {
+  background: $mainColor;
+  background: linear-gradient(93deg, $mainColor 0%, $secondaryColor 100%);
+  color: white;
+  box-shadow:
+    0 0 5px 0 $shadow;
+  &::before, &::after {
+    box-shadow:
+      inset 0 0 50px $mainColor,
+      inset -20px 0 300px $mainColor,
+      0 0 50px #fff,
+      -10px 0 80px $mainColor,
+      10px 0 80px $mainColor;
+  }
+}
 .tabs {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  height: calc(100vh - 220px);
+  &.left {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .buttons {
+      flex-direction: column;
+      height: auto;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: max-content;
+      height: max-content;
+      max-height: 100%;
+      position: sticky;
+      top: 40px;
+      margin: 0;
+      button {
+        height: 45px;
+        width: 100%;
+        &.active {
+          background-color: rgba(0,0,0,0.5);
+          color: white;
+          border: 0;
+          @include card(rgb(168, 38, 180), rgb(157, 27, 209), rgb(211, 22, 229))
+        }
+      }
+    }
+  }
 }
 .buttons {
   display: flex;
   justify-content: center;
+  top: 0;
   align-items: flex-end;
   margin: auto;
   margin-bottom: 10px;
-  height: 45px;
   flex-shrink: 0;
-  width: 90%;
-  &.invert {
-    button.active {
-      color: #fff;
-      border-bottom-color: #fff;
-      background: transparent;
-      box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset,
-      -2px -2px 5px rgba(255,255,255,0.2) inset;
-    }
-    button {
-      color: #ccc;
-      border-color: rgba(0,0,0,0.1);
-      border-color: transparent;
-      box-shadow: 2px 2px 5px rgba(0,0,0,0.2),
-      -2px -2px 5px rgba(255,255,255,0.2);
-    }
-  }
+  width: max-content;
+  gap: 5px;
+  background-color: rgba(0,0,0,0.06);
+  z-index: 1;
+  border: 1px solid rgba(0,0,0,0.05);
   button {
     position: relative;
     outline: none;
-    color: #999;
-    border-radius: 5px 5px 0 0;
+    margin: 0;
+    color: #777;
     transition: 200ms;
-    transition-property: font-size, box-shadow;
     border-bottom: 0;
     height: 40px;
     padding: 0 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     background: transparent;
-    margin: 0 5px;
     font-size: 1em;
-    box-shadow: 5px 5px 10px rgba(0,0,0,0.2),
-      -5px -5px 10px rgba(255,255,255,0.8);
-    border: 1px solid #efefef;
-    &:hover {
-      box-shadow: none;
-      transform: none;
-    }
+    box-shadow: none;
     i {
       font-size: 1.2em;
     }
     &.active {
-      border-radius: 5px 5px 0 0;
+      border-radius: 0;
       color: #777;
-      margin-bottom: -1px;
-      border-bottom: 3px solid #0076bc;
-      box-shadow: 2px 2px 7px rgba(0,0,0,0.2) inset,
-      -5px -5px 7px rgba(255,255,255,0.6) inset;
+      @include card(rgb(168, 38, 180), rgb(157, 27, 209), rgb(211, 22, 229))
+
     }
     label {
       background-color: #fff;

fronts/app/src/views/StackMultiple.vue

@@ -154,6 +154,8 @@ export default {
   height: max-content;
   .service-container {
     min-width: 300px;
+    height: 500px;
+    overflow: auto;
     width: 100%;
   }
 }