qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix styles for wide screen when sidebar menu is open

Browse source
This commit is contained in:
Angelina Filippova 2020-03-24 19:14:36 +03:00
parent 8e3256ad9e
commit b15f88947d
3 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/views/settings/components/Instance.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="!loading" class="form-container">
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
<setting :setting-group="instance" :data="instanceData"/>
</el-form>
@ -82,6 +82,9 @@ export default {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
isSidebarOpen() {
return this.$store.state.app.sidebar.opened ? 'sidebar-opened' : 'sidebar-closed'
},
isTablet() {
return this.$store.state.app.device === 'tablet'
},

7
src/views/settings/index.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="settings-container">
<div v-if="isDesktop">
<div class="settings-header-container">
<div :class="isSidebarOpen" class="settings-header-container">
<h1 class="settings-header">{{ $t('settings.settings') }}</h1>
<div>
<el-tooltip v-if="needReboot" :content="$t('settings.restartApp')" placement="bottom-end">
@ -47,7 +47,7 @@
</el-tabs>
</div>
<div v-if="isMobile || isTablet">
<div class="settings-header-container">
<div :class="isSidebarOpen" class="settings-header-container">
<h1 class="settings-header">{{ $t('settings.settings') }}</h1>
<el-button v-if="needReboot" class="settings-reboot-button" @click="restartApp">
<span>
@ -196,6 +196,9 @@ export default {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
isSidebarOpen() {
return this.$store.state.app.sidebar.opened ? 'header-sidebar-opened' : 'header-sidebar-closed'
},
isTablet() {
return this.$store.state.app.device === 'tablet'
},

12
src/views/settings/styles/main.scss
View file

@ -264,10 +264,15 @@
.settings-header {
margin: 0;
}
.header-sidebar-opened {
max-width: 1585px;
}
.header-sidebar-closed {
max-width: 1728px;
}
.settings-header-container {
display: flex;
height: 36px;
max-width: 1728px;
justify-content: space-between;
align-items: center;
margin: 22px 30px 15px 15px;
@ -331,9 +336,12 @@
}
@media only screen and (min-width: 1824px) {
.form-container {
.sidebar-closed {
max-width: 1586px;
}
.sidebar-opened {
max-width: 1442px;
}
.submit-button-container {
width: 100%;
max-width: inherit;