bfg-common 1.4.581 → 1.4.582

package/components/common/pages/home/widgets/WidgetsNew.vue

@@ -1,74 +1,79 @@
-<template>
-  <div class="home-total-quantities">
-    <h1>
-      {{ localization.home.totalQuantities }}
-    </h1>
-
-    <div class="grid-container">
-      <common-pages-home-widgets-vms :vms="vms" :loading="props.loading" />
-
-      <common-pages-home-widgets-hosts
-        :hosts="hosts"
-        :loading="props.loading"
-      />
-    </div>
-  </div>
-
-  <div class="home-total-warnings">
-    <h1>
-      {{ localization.home.totalAlertsWarnings }}
-    </h1>
-
-    <div class="grid-container">
-      <common-pages-home-widgets-warnings
-        :alerts="alerts || []"
-        :loading="props.loading"
-      />
-
-      <common-pages-home-widgets-services
-        :services="services || []"
-        :loading="props.loading"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_Alert,
-  UI_I_Hosts,
-  UI_I_Vms,
-  UI_I_Service,
-} from '~/components/common/pages/home/lib/models/interfaces'
-
-const props = defineProps<{
-  vms: UI_I_Vms
-  hosts: UI_I_Hosts
-  alerts: UI_I_Alert[]
-  services: UI_I_Service[]
-  loading: boolean
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped>
-.home-total-warnings,
-.home-total-quantities {
-  margin-top: 24px;
-  & > h1 {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.94px;
-    color: #9da6ad;
-    margin-bottom: 12px;
-  }
-}
-
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 12px;
-}
-</style>
+<template>
+  <div class="home-total-quantities">
+    <h1>
+      {{ localization.home.totalQuantities }}
+    </h1>
+
+    <div class="grid-container">
+      <common-pages-home-widgets-vms :vms="vms" :loading="props.loading" />
+
+      <common-pages-home-widgets-hosts
+        :hosts="hosts"
+        :loading="props.loading"
+      />
+    </div>
+  </div>
+
+  <div class="home-total-warnings">
+    <h1>
+      {{ localization.home.totalAlertsWarnings }}
+    </h1>
+
+    <div class="grid-container">
+      <common-pages-home-widgets-warnings
+        :alerts="alerts || []"
+        :loading="props.loading"
+      />
+
+      <common-pages-home-widgets-services
+        :services="services || []"
+        :loading="props.loading"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Alert,
+  UI_I_Hosts,
+  UI_I_Vms,
+  UI_I_Service,
+} from '~/components/common/pages/home/lib/models/interfaces'
+
+const props = defineProps<{
+  vms: UI_I_Vms
+  hosts: UI_I_Hosts
+  alerts: UI_I_Alert[]
+  services: UI_I_Service[]
+  loading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.home-total-warnings,
+.home-total-quantities {
+  margin-top: 24px;
+  & > h1 {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.94px;
+    color: #9da6ad;
+    margin-bottom: 12px;
+  }
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 12px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    grid-row-gap: 12px;
+  }
+}
+</style>

package/components/common/pages/shortcuts/block/BlockNew.vue

@@ -1,71 +1,80 @@
-<template>
-  <ui-widget class="category-block-item">
-    <nuxt-link
-      class="unit"
-      :to="navigate"
-      :title="props.item.navigateTo"
-      :data-id="props.testId"
-      @click="emits('change-navigation')"
-      @contextmenu="emits('change-navigation')"
-    >
-      <span class="unit-icon">
-        <ui-icon :name="props.item.iconName" width="28" height="28"></ui-icon>
-      </span>
-      <div class="unit-text" :title="props.item.text">
-        {{ props.item.text }}
-      </div>
-    </nuxt-link>
-  </ui-widget>
-</template>
-<script setup lang="ts">
-import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
-
-const props = defineProps<{
-  item: UI_I_BlockItem
-  testId?: string
-}>()
-const emits = defineEmits<{
-  (event: 'change-navigation'): void
-}>()
-
-const navigate = computed<string>(() => '/' + props.item.navigateTo)
-</script>
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins';
-.category-block-item {
-  max-width: 176px;
-  min-height: 110px;
-  .unit {
-    @include flex($dir: column, $just: space-between);
-    width: 100%;
-    height: 100%;
-    text-decoration-line: none;
-    &-icon {
-      min-width: 28px;
-      min-height: 28px;
-      display: inline-block;
-      color: var(--close-icon);
-    }
-    &-text {
-      color: #9da6ad;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-    }
-  }
-
-  &:hover {
-    background: #e9ebed33;
-    cursor: pointer;
-    .unit {
-      &-icon {
-        color: var(--widget-text-hover);
-      }
-
-      &-text {
-        color: var(--widget-text-hover);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <ui-widget class="category-block-item">
+    <nuxt-link
+      class="unit"
+      :to="navigate"
+      :title="props.item.navigateTo"
+      :data-id="props.testId"
+      @click="emits('change-navigation')"
+      @contextmenu="emits('change-navigation')"
+    >
+      <span class="unit-icon">
+        <ui-icon :name="props.item.iconName" width="28" height="28"></ui-icon>
+      </span>
+      <div class="unit-text" :title="props.item.text">
+        {{ props.item.text }}
+      </div>
+    </nuxt-link>
+  </ui-widget>
+</template>
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'change-navigation'): void
+}>()
+
+const navigate = computed<string>(() => '/' + props.item.navigateTo)
+</script>
+
+<style>
+:root {
+  --shortcut-item-hover-bg: #e9ebed33;
+}
+:root.dark-theme {
+  --shortcut-item-hover-bg: #e9ebed08;
+}
+</style>
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins';
+.category-block-item {
+  max-width: 176px;
+  min-height: 110px;
+  .unit {
+    @include flex($dir: column, $just: space-between);
+    width: 100%;
+    height: 100%;
+    text-decoration-line: none;
+    &-icon {
+      min-width: 28px;
+      min-height: 28px;
+      display: inline-block;
+      color: var(--close-icon);
+    }
+    &-text {
+      color: #9da6ad;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+    }
+  }
+
+  &:hover {
+    background: var(--shortcut-item-hover-bg);
+    cursor: pointer;
+    .unit {
+      &-icon {
+        color: var(--widget-text-hover);
+      }
+
+      &-text {
+        color: var(--widget-text-hover);
+      }
+    }
+  }
+}
+</style>