add admin responsive view

src/components/settings/MenuDisplay.vue

@@ -1,31 +0,0 @@
-<template></template>
-
-<script setup>
-// import AlwaysDisplayImg from '../../img/admin/layout-always-displayed.svg'
-// import WideMenuImg from '../../img/admin/layout-big-menu.svg'
-// import DefaultImg from '../../img/admin/layout-default.svg'
-// import WithCategoriesImg from '../../img/admin/layout-width-categories.svg'
-
-const choices = [
-  // {id: 1, url: AlwaysDisplayImg},
-  // {id: 2, url: WideMenuImg},
-  // {id: 3, url: DefaultImg},
-  // {id: 4, url: WithCategoriesImg},
-]
-
-const carouselConfig = {
-  itemsToShow: 1.3,
-  wrapAround: true,
-}
-
-const { mode, alwaysDisplayed } = defineProps({
-  mode: {
-    type: String,
-    required: true,
-  },
-  alwaysDisplayed: {
-    type: Boolean,
-    required: true,
-  },
-})
-</script>

src/components/settings/form/FormDisplayPicker.vue

@@ -1,14 +1,14 @@
 <template>
-  <NcButton @click="update(false, false, false)" :variant="is(false, false, false) ? 'primary' : 'seconday'">
+  <NcButton :variant="is(false, false, false) ? 'primary' : 'seconday'" @click="update(false, false, false)">
     {{ t('side_menu', 'Default') }}
   </NcButton>
-  <NcButton @click="update(true, false, false)" :variant="is(true, false, false) ? 'primary' : 'seconday'">
+  <NcButton :variant="is(true, false, false) ? 'primary' : 'seconday'" @click="update(true, false, false)">
     {{ t('side_menu', 'Always displayed') }}
   </NcButton>
-  <NcButton @click="update(false, true, false)" :variant="is(false, true, false) ? 'primary' : 'seconday'">
+  <NcButton :variant="is(false, true, false) ? 'primary' : 'seconday'" @click="update(false, true, false)">
     {{ t('side_menu', 'Big menu') }}
   </NcButton>
-  <NcButton @click="update(false, false, true)" :variant="is(false, false, true) ? 'primary' : 'seconday'">
+  <NcButton :variant="is(false, false, true) ? 'primary' : 'seconday'" @click="update(false, false, true)">
     {{ t('side_menu', 'With categories') }}
   </NcButton>
 
@@ -19,13 +19,6 @@
     <img v-if="is(false, false, true)" class="side-menu-display" :src="SideMenuWithCategoriesImg" />
   </p>
 </template>
-<style scoped>
-button {
-  display: inline-block !important;
-  margin: 2px;
-}
-</style>
-
 <script setup>
 import { NcButton } from '@nextcloud/vue'
 
@@ -68,3 +61,14 @@ const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
 }
 
 </script>
+
+<style scoped>
+button {
+  display: inline-block !important;
+  margin: 2px;
+}
+
+img {
+  max-width: 100%;
+}
+</style>