Merge branch 'fix/settings-submit-button' into 'develop'

Fix settings submit button position on wide screens

See merge request !106

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 
 - Fix parsing tuples in Pleroma.Upload.Filter.Mogrify and Pleroma.Emails.Mailer settings
+- Fix settings submit button position on wide screens when sidebar menu is open
 
 ## [2.0] - 2020-02-27
 

src/views/settings/components/Instance.vue

 <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'
     },

src/views/settings/index.vue

 <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'
     },

src/views/settings/styles/main.scss

@@ -264,6 +264,12 @@
   .settings-header {
     margin: 0;
   }
+  .header-sidebar-opened {
+    max-width: 1585px;
+  }
+  .header-sidebar-closed {
+    max-width: 1728px;
+  }
   .settings-header-container {
     display: flex;
     height: 36px;
@@ -330,8 +336,15 @@
   }
 
   @media only screen and (min-width: 1824px) {
+    .sidebar-closed {
+      max-width: 1586px;
+    }
+    .sidebar-opened {
+      max-width: 1442px;
+    }
     .submit-button-container {
-      max-width: 1637px;
+      width: 100%;
+      max-width: inherit;
       margin-left: auto;
       margin-right: auto;
       right: auto;
@@ -541,7 +554,7 @@
       margin-right: 8px
     }
   }
-  @media only screen and (max-width:801px) and (min-width: 481px) {
+  @media only screen and (max-width:818px) and (min-width: 481px) {
     .delete-setting-button {
       margin: 4px 0 0 10px;
       height: 28px;