From 65af72bd04d9d3d2559486bedd454fd6fe5e4474 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 24 Mar 2020 16:22:54 +0000
Subject: [PATCH] Merge branch 'fix/settings-submit-button' into 'master'

Fix settings submit button position on wide screens

See merge request pleroma/admin-fe!106
---
 CHANGELOG.md                               |  1 +
 src/views/settings/components/Instance.vue |  5 ++++-
 src/views/settings/index.vue               |  7 +++++--
 src/views/settings/styles/main.scss        | 18 +++++++++++++++---
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac4e0a92..c8bf658b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,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
 
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index a8698350..4acc13e7 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -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'
     },
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 3d0bbcdb..87bcc9e6 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -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">
@@ -89,7 +89,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>
@@ -235,6 +235,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'
     },
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 562308b5..7f04820f 100644
--- a/src/views/settings/styles/main.scss
+++ b/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;
@@ -326,8 +332,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;
@@ -530,8 +543,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;