improve settings components and scss

src/components/settings/AdminSaveButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="side-menu-setting-save">
+  <div class="cm-settings-btn cm-settings-btn--save">
     <NcButton
       variant="success"
       @click="save"

src/components/settings/SettingsSection.vue

@@ -15,7 +15,20 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="cs-settings-section">
+  <div
+    class="cm-settings-section"
+    :class="{'cm-settings-section--hidden': hidden}"
+  >
     <slot></slot>
   </div>
 </template>
+
+<script setup>
+defineProps({
+  hidden: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+})
+</script>

src/components/settings/UserSaveButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="side-menu-setting-save">
+  <div class="cm-settings-btn cm-settings-btn--save">
     <NcButton
       variant="success"
       @click="save"

src/pages/AdminSettings.vue

@@ -26,11 +26,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :name="item.label"
         :active="item.section === section"
         @click="setSection(item.section)"
-      >
+      />
-      </NcAppNavigationItem>
     </NcAppNavigation>
     <NcAppContent class="cm-settings cm-settings--nav">
-      <SettingsSection :class="sectionClass('panel')">
+      <SettingsSection :hidden="section !== 'panel'">
         <SectionTitle label="Panel" />
 
         <SettingItem>
@@ -102,7 +101,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('topMenu')">
+      <SettingsSection :hidden="section !== 'topMenu'">
         <SectionTitle label="Top menu" />
 
         <SettingItem>
@@ -146,7 +145,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('apps')">
+      <SettingsSection :hidden="section !== 'apps'">
         <SectionTitle label="Applications" />
 
         <SettingItem>
@@ -179,7 +178,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('cats')">
+      <SettingsSection :hidden="section !== 'cats'">
         <SectionTitle label="Categories" />
 
         <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
@@ -226,7 +225,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('opener')">
+      <SettingsSection :hidden="section !== 'opener'">
         <SectionTitle label="Opener" />
 
         <SettingItem>
@@ -283,7 +282,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('colors')">
+      <SettingsSection :hidden="section !== 'colors'">
         <SectionTitle label="Colors" />
 
         <SettingItem>
@@ -420,7 +419,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('global')">
+      <SettingsSection :hidden="section !== 'global'">
         <p class="cm-settings-tips">
           <em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
         </p>
@@ -460,7 +459,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('support')">
+      <SettingsSection :hidden="section !== 'support'">
         <SectionTitle label="Support" />
 
         <SettingItem>
@@ -481,7 +480,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
         <SettingItem>
           <SettingLabel label="Need help" />
-          <SettingValue class="button-inline">
+          <SettingValue class="cm-settings-button-inline">
             <a
               target="_blank"
               href="https://deblan.gitnet.page/side_menu_doc/"
@@ -537,11 +536,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <NcModal
               v-if="showConfig"
               @close="showConfig = false"
+              class="cm-settings-config-modal"
             >
               <div class="modal__content">
                 <p style="margin-bottom: 5px">{{ trans('Configuration:') }}</p>
                 <textarea
-                  class="config"
                   readonly
                   v-text="filterConfig(config)"
                 ></textarea>
@@ -621,12 +620,6 @@ const trans = (value) => {
   return t('side_menu', value)
 }
 
-const sectionClass = (value) => {
-  return {
-    hidden: value !== section.value,
-  }
-}
-
 const copyConfig = () => {
   navigator.clipboard.writeText(JSON.stringify(filterConfig(config.value), null, 2))
 
@@ -655,38 +648,3 @@ onMounted(async () => {
   setSection(sessionStorage.getItem('side_menu_section') ?? menu[0].section)
 })
 </script>
-
-<style scoped>
-.hidden {
-  display: none;
-}
-
-.button-inline button {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.config {
-  width: 100%;
-  height: 30vh;
-}
-
-.modal__content {
-  padding: 20px;
-}
-
-.modal__footer {
-  margin-top: 20px;
-  text-align: right;
-}
-
-.modal__footer button {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.save {
-  display: block;
-  float: right;
-}
-</style>

src/scss/admin.scss

@@ -16,10 +16,8 @@
  */
 
 .cm-settings {
-  padding: 20px;
-
   &--nav {
-    padding-top: 50px;
+    padding-top: 30px;
   }
 
   &-nav {
@@ -43,6 +41,10 @@
   &-section {
     width: 100%;
     padding: 20px;
+
+    &--hidden {
+      display: none;
+    }
   }
 
   &-item {
@@ -218,22 +220,39 @@
       }
     }
   }
-}
 
-@media screen and (max-width: 1024px) {
+  &-btn {
-  .side-menu-setting-table,
+    &--save {
-  .side-menu-setting-row,
-  .side-menu-setting-label,
-  .side-menu-setting-form {
-    display: block;
-    max-width: 100%;
-  }
-
-  .side-menu-setting-label {
-    margin-bottom: 10px;
-  }
-}
-
-.side-menu-setting-save {
       margin-top: 30px;
+    }
+  }
+
+  &-config-modal {
+    textarea {
+      width: 100%;
+      height: 30vh;
+    }
+
+    .modal__content {
+      padding: 20px;
+    }
+
+    .modal__footer {
+      margin-top: 20px;
+      text-align: right;
+    }
+
+    .modal__footer button {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  &-button-inline {
+    button {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
 }
+