From d71cfa8e7748a994c19ff49c88ba303a8f2389e8 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Wed, 27 Jul 2022 12:41:24 +0300
Subject: fix styles for dynamic pages

---
 src/assets/styles/bmc/_sila/_section-divider.scss  | 43 ++++++++--
 src/components/_sila/Global/Collapse.vue           |  2 +-
 src/components/_sila/Global/TableDatePicker.vue    | 99 +++-------------------
 src/views/_sila/Fans/Dynamic/FanSpeed.vue          | 97 ++++++++++-----------
 src/views/_sila/Fans/Dynamic/FansDynamicPage.vue   |  1 -
 .../_sila/Memory/Dynamic/MemoryDynamicPage.vue     |  1 -
 src/views/_sila/Memory/Dynamic/MemoryTemp.vue      | 11 +--
 .../Motherboard/Dynamic/MotherboardDynamicPage.vue |  1 -
 .../_sila/Motherboard/Dynamic/MotherboardTemp.vue  | 16 ++--
 src/views/_sila/Processors/Dynamic/CpuPower.vue    |  1 -
 src/views/_sila/Processors/Dynamic/CpuTemp.vue     |  1 -
 .../Processors/Dynamic/ProcessorsDynamicPage.vue   |  1 -
 12 files changed, 109 insertions(+), 165 deletions(-)

diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
index 78415435..e30942cc 100644
--- a/src/assets/styles/bmc/_sila/_section-divider.scss
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -2,8 +2,9 @@
   border-bottom: 1px solid gray('400');
 }
 
-.custom-divider {
+.collapse-divider {
   margin: 0 -1.95rem 0 -2rem;
+  padding-left: 2rem;
   @include media-breakpoint-down(md) {
     margin-left: -0.95rem;
   }
@@ -15,9 +16,41 @@
     }
   }
   .form-group {
-     margin-bottom: 0;
-     .col-form-label {
-        white-space: nowrap;
-     }
+    margin-bottom: 0;
+    .col-form-label {
+      white-space: nowrap;
+    }
   }
 }
+
+.page-divider {
+  height: 56px;
+  max-width: 150%;
+  width: auto;
+  margin: 0rem -1.95rem 0rem -1.95rem;
+  padding-left: 2rem;
+      @include media-breakpoint-down(md) {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        margin-left: -0.95rem;
+    }
+  border-bottom: 1px solid $gray-10;
+  gap: 8px;
+}
+
+.limit-container {
+  margin: 0rem -1.95rem 0rem -1.95rem;
+  padding-left: 1rem;
+  padding-bottom: 1rem;
+      @include media-breakpoint-down(md) {
+        padding-left: 0rem;
+        padding-right: 1rem;
+        margin-left: -0.95rem;
+    }
+  .form-group {
+    margin-bottom: 0;
+    .col-form-label {
+       white-space: nowrap;
+    }
+ }
+}
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index d5076d77..f004c955 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="custom-divider">
+  <div class="collapse-divider">
     <b-button
       v-b-toggle="id"
       variant="collapse"
diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue
index c2b693ab..0eef0f8c 100644
--- a/src/components/_sila/Global/TableDatePicker.vue
+++ b/src/components/_sila/Global/TableDatePicker.vue
@@ -1,44 +1,16 @@
 <template>
-  <div class="fans-date-switch">
+  <b-col class="d-flex align-items-center date-picker">
     <span
-      class="medium-12px scale-item"
       :class="{ 'switch-active': timeScale === 'hour' }"
       @click="switchTimeScale('hour')"
       >{{ $t('global.datePicker.lastHour') }}</span
     >
     <span
-      class="medium-12px scale-item"
       :class="{ 'switch-active': timeScale === 'day' }"
       @click="switchTimeScale('day')"
       >{{ $t('global.datePicker.lastDay') }}</span
     >
-    <!--<span
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': timeScale === 'week' }"
-      @click="switchTimeScale('week')"
-      >{{ $t('global.date.lastWeek') }}</span
-    >
-    <span
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': timeScale === 'mounth' }"
-      @click="switchTimeScale('mounth')"
-      >{{ $t('global.date.lastMounth') }}</span
-    >
-    <span
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': timeScale === 'year' }"
-      @click="switchTimeScale('year')"
-      >{{ $t('global.date.lastYear') }}</span
-    >
-    <div class="slider" />
-    <div class="date-picker">
-      <img src="@/assets/images/calendar-icon.svg" />
-      <span class="medium-12px scale-item">{{
-        $t('global.date.selectDate')
-      }}</span>
-    </div>-->
-    <!-- <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> -->
-  </div>
+  </b-col>
 </template>
 
 <script>
@@ -56,68 +28,23 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.fans-date-switch {
-  position: relative;
-
+.date-picker {
   height: 48px;
-  padding: 0 16px 0 32px;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 24px;
+  max-width: 150%;
+  width: auto;
+  margin: -2rem -1.95rem 0px -2rem;
+  padding-left: 2rem;
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: -0.95rem;
+  }
   border-bottom: 1px solid $gray-10;
+  gap: 24px;
 }
 
 .switch-active {
   color: $primary;
   transition: ease-in 0.15s;
 }
-
-.slider {
-  position: absolute;
-  height: 0px;
-  border-bottom: 4px solid $primary;
-  transition: ease-in 0.2s;
-  bottom: 0px;
-}
-
-.scale-item {
-  cursor: pointer;
-}
-
-.scale-item:nth-child(1).switch-active ~ .slider {
-  width: 92px;
-  left: 31px;
-}
-
-.scale-item:nth-child(2).switch-active ~ .slider {
-  left: 135px;
-  width: 105px;
-}
-
-.scale-item:nth-child(3).switch-active ~ .slider {
-  left: 255px;
-  width: 112px;
-}
-
-.scale-item:nth-child(4).switch-active ~ .slider {
-  left: 383px;
-  width: 107px;
-}
-
-.scale-item:nth-child(5).switch-active ~ .slider {
-  left: 508px;
-  width: 90px;
-}
-
-.date-picker {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-
-.date-clear {
-  margin-left: auto;
-  cursor: pointer;
-}
 </style>
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeed.vue b/src/views/_sila/Fans/Dynamic/FanSpeed.vue
index f8dbcca2..b597db8a 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeed.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeed.vue
@@ -1,13 +1,10 @@
 <template>
-  <div class="custom-divider" style="margin-top: 0">
-    <b-button
-      variant="collapse"
-      class="d-flex flex-nowrap justify-content-start"
-    >
+  <div>
+    <b-col class="d-flex flex-nowrap align-items-center page-divider">
       <img src="@/assets/images/_sila/collapsed/fan.svg" />
       {{ $t('pageFans.speed') }}
-    </b-button>
-    <b-row class="align-items-end p-4">
+    </b-col>
+    <b-row class="align-items-end limit-container">
       <b-col xs="12" md="4" class="pt-2">
         <b-form-group :label="$t('pageFans.labels.warning')">
           <b-form-input v-model="warning" type="number" :min="0" :max="3150">
@@ -30,51 +27,49 @@
         </b-button>
       </b-col>
     </b-row>
-    <b-col class="pl-4 pr-4">
-      <chart
-        type="fans"
-        :colors="colors"
-        :time-scale="timeScale"
-        :data="filteredSensors"
-        :warning="warning"
-        :shutdown="shutdown"
-      ></chart>
+    <chart
+      type="fans"
+      :colors="colors"
+      :time-scale="timeScale"
+      :data="filteredSensors"
+      :warning="warning"
+      :shutdown="shutdown"
+    ></chart>
 
-      <b-table
-        v-if="items && items.length > 0"
-        responsive="md"
-        show-empty
-        table-variant="accessory"
-        hover
-        :items="items"
-        :fields="fields"
-        :empty-text="$t('global.table.emptyMessage')"
-      >
-        <template #cell(name)="{ value, index }">
-          <div
-            class="item-color"
-            :style="`background-color: ${colors[index]}`"
-          ></div>
-          {{ value }}
-        </template>
-        <template #cell(minDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-        <template #cell(maxDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-      </b-table>
-    </b-col>
+    <b-table
+      v-if="items && items.length > 0"
+      responsive="md"
+      show-empty
+      table-variant="accessory"
+      hover
+      :items="items"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="item-color"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        {{ value }}
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+    </b-table>
   </div>
 </template>
 <script>
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index 4e128089..8be848d5 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -4,7 +4,6 @@
     <table-date-picker
       :switch-time-scale="switchTimeScale"
       :time-scale="timeScale"
-      style="margin: -2rem -2rem 0 -2rem"
     />
     <fan-speed :time-scale="timeScale"></fan-speed>
   </b-container>
diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
index a38d1a48..b9360024 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
@@ -4,7 +4,6 @@
     <table-date-picker
       :switch-time-scale="switchTimeScale"
       :time-scale="timeScale"
-      style="margin: -2rem -2rem 0 -2rem"
     />
     <memory-temp :time-scale="timeScale"></memory-temp>
   </b-container>
diff --git a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
index 4c6f2c0a..2f550ebd 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryTemp.vue
@@ -1,13 +1,10 @@
 <template>
-  <div class="custom-divider" style="margin-top: 0">
-    <b-button
-      variant="collapse"
-      class="d-flex flex-nowrap justify-content-start"
-    >
+  <div>
+    <b-col class="d-flex flex-nowrap align-items-center page-divider">
       <img src="@/assets/images/_sila/collapsed/temperature.svg" />
       {{ $t('pageMemory.temperature') }}
-    </b-button>
-    <b-row class="align-items-end p-4">
+    </b-col>
+    <b-row class="align-items-end limit-container">
       <b-col xs="12" md="6" lg="3" class="pt-2">
         <b-form-group :label="$t('pageMemory.labels.notNormal')">
           <b-form-input
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
index 45dbca9e..15768432 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
@@ -4,7 +4,6 @@
     <table-date-picker
       :switch-time-scale="switchTimeScale"
       :time-scale="timeScale"
-      style="margin: -2rem -2rem 0 -2rem"
     />
     <motherboard-temp :time-scale="timeScale"></motherboard-temp>
   </b-container>
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue
index c16149d9..f0dd97e7 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="custom-divider" style="margin-top: 0">
-    <b-button
-      variant="collapse"
-      class="d-flex flex-nowrap justify-content-start"
-    >
+  <div>
+    <b-col class="d-flex flex-nowrap align-items-center page-divider">
       <img src="@/assets/images/_sila/collapsed/temperature.svg" />
       {{ $t('pageMotherboard.temperature') }}
-    </b-button>
-    <b-row class="align-items-end p-2">
-      <b-col xs="12" md="3" class="pt-4">
+    </b-col>
+
+    <b-row class="align-items-end limit-container">
+      <b-col xs="12" sm="3" class="pt-4">
         <b-form-group :label="$t('pageMotherboard.labels.warning')">
           <b-form-input
             v-model="warning"
@@ -18,7 +16,7 @@
           ></b-form-input>
         </b-form-group>
       </b-col>
-      <b-col xs="12" md="6" class="pt-2">
+      <b-col xs="12" sm="6" class="pt-2">
         <b-button variant="primary" style="height: 35px">
           {{ 'Сохранить' }}
         </b-button>
diff --git a/src/views/_sila/Processors/Dynamic/CpuPower.vue b/src/views/_sila/Processors/Dynamic/CpuPower.vue
index a4fb753f..8e03b3d7 100644
--- a/src/views/_sila/Processors/Dynamic/CpuPower.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuPower.vue
@@ -2,7 +2,6 @@
   <collapse
     id="collapse_power"
     :title="$t('pageProcessors.power')"
-    style="margin-top: 0"
     @opened="onOpened"
   >
     <template #image>
diff --git a/src/views/_sila/Processors/Dynamic/CpuTemp.vue b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
index 00cc5998..2f69a5a5 100644
--- a/src/views/_sila/Processors/Dynamic/CpuTemp.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
@@ -2,7 +2,6 @@
   <collapse
     id="collapse_temp"
     :title="$t('pageProcessors.temperature')"
-    style="margin-top: 0"
     @opened="onOpened"
   >
     <template #image>
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index e2e1505c..eef6fd0b 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -4,7 +4,6 @@
     <table-date-picker
       :switch-time-scale="switchTimeScale"
       :time-scale="timeScale"
-      style="margin: -2rem -2rem 0 -2rem"
     />
     <cpu-temp :time-scale="timeScale"></cpu-temp>
     <cpu-power :time-scale="timeScale"></cpu-power>
-- 
cgit v1.2.3