diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-27 12:41:24 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-27 12:41:24 +0300 |
commit | d71cfa8e7748a994c19ff49c88ba303a8f2389e8 (patch) | |
tree | fcccab320ce8ba3e03fc16cbc95925ebb15b7d2a | |
parent | d60c112dd9fca0aec24e0193774932df8aa27ceb (diff) | |
download | webui-vue-d71cfa8e7748a994c19ff49c88ba303a8f2389e8.tar.xz |
fix styles for dynamic pages
-rw-r--r-- | src/assets/styles/bmc/_sila/_section-divider.scss | 43 | ||||
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 2 | ||||
-rw-r--r-- | src/components/_sila/Global/TableDatePicker.vue | 99 | ||||
-rw-r--r-- | src/views/_sila/Fans/Dynamic/FanSpeed.vue | 97 | ||||
-rw-r--r-- | src/views/_sila/Fans/Dynamic/FansDynamicPage.vue | 1 | ||||
-rw-r--r-- | src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue | 1 | ||||
-rw-r--r-- | src/views/_sila/Memory/Dynamic/MemoryTemp.vue | 11 | ||||
-rw-r--r-- | src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue | 1 | ||||
-rw-r--r-- | src/views/_sila/Motherboard/Dynamic/MotherboardTemp.vue | 16 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuPower.vue | 1 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/CpuTemp.vue | 1 | ||||
-rw-r--r-- | src/views/_sila/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> |