Optimize sidebar behaviour on mobile devices

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -1,67 +1,74 @@
 <template>
   <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
-    <app-loading-spinner v-if="loading" />
-    <template v-else>
-      <div id="admin-settings-wrapper" class="oc-width-expand oc-height-1-1 oc-position-relative">
+    <div
+      class="admin-settings-wrapper oc-flex oc-width-1-1 oc-width-expand oc-height-1-1 oc-flex-wrap"
+    >
+      <app-loading-spinner v-if="loading" />
+      <template v-else>
         <div
-          id="admin-settings-app-bar"
-          ref="appBarRef"
-          class="oc-app-bar oc-py-s"
-          :class="{ 'admin-settings-app-bar-sticky': isSticky }"
+          id="admin-settings-view-wrapper"
+          class="oc-width-expand oc-width-1-1 oc-height-1-1 oc-flex-wrap"
         >
-          <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-            <oc-breadcrumb
-              v-if="!isMobileWidth"
-              id="admin-settings-breadcrumb"
-              :items="breadcrumbs"
-            />
-            <portal-target name="app.runtime.mobile.nav" />
-            <div class="oc-flex">
-              <view-options
-                v-if="showViewOptions"
-                :has-hidden-files="false"
-                :has-file-extensions="false"
-                :has-pagination="true"
-                :pagination-options="paginationOptions"
-                :per-page-default="perPageDefault"
-                per-page-storage-prefix="admin-settings"
-              />
-            </div>
-          </div>
           <div
-            v-if="showAppBar"
-            class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs"
+            id="admin-settings-app-bar"
+            ref="appBarRef"
+            class="oc-app-bar oc-py-s"
+            :class="{ 'admin-settings-app-bar-sticky': isSticky }"
           >
-            <slot
-              name="topbarActions"
-              :limited-screen-space="limitedScreenSpace"
-              class="oc-flex-1 oc-flex oc-flex-start"
-            />
-            <batch-actions
-              v-if="showBatchActions"
-              :actions="batchActions"
-              :action-options="{ resources: batchActionItems }"
-              :limited-screen-space="limitedScreenSpace"
-            />
+            <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
+              <oc-breadcrumb
+                v-if="!isMobileWidth"
+                id="admin-settings-breadcrumb"
+                :items="breadcrumbs"
+              />
+              <portal-target name="app.runtime.mobile.nav" />
+              <div class="oc-flex">
+                <view-options
+                  v-if="showViewOptions"
+                  :has-hidden-files="false"
+                  :has-file-extensions="false"
+                  :has-pagination="true"
+                  :pagination-options="paginationOptions"
+                  :per-page-default="perPageDefault"
+                  per-page-storage-prefix="admin-settings"
+                />
+              </div>
+            </div>
+            <div
+              v-if="showAppBar"
+              class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs"
+            >
+              <slot
+                name="topbarActions"
+                :limited-screen-space="limitedScreenSpace"
+                class="oc-flex-1 oc-flex oc-flex-start"
+              />
+              <batch-actions
+                v-if="showBatchActions"
+                :actions="batchActions"
+                :action-options="{ resources: batchActionItems }"
+                :limited-screen-space="limitedScreenSpace"
+              />
+            </div>
           </div>
+          <slot name="mainContent" />
         </div>
-        <slot name="mainContent" />
-      </div>
-      <side-bar
-        v-if="isSideBarOpen"
-        :active-panel="sideBarActivePanel"
-        :available-panels="sideBarAvailablePanels"
-        :panel-context="sideBarPanelContext"
-        :loading="sideBarLoading"
-        :is-open="isSideBarOpen"
-        @select-panel="selectPanel"
-        @close="closeSideBar"
-      >
-        <template #header>
-          <slot name="sideBarHeader" />
-        </template>
-      </side-bar>
-    </template>
+        <side-bar
+          v-if="isSideBarOpen"
+          :active-panel="sideBarActivePanel"
+          :available-panels="sideBarAvailablePanels"
+          :panel-context="sideBarPanelContext"
+          :loading="sideBarLoading"
+          :is-open="isSideBarOpen"
+          @select-panel="selectPanel"
+          @close="closeSideBar"
+        >
+          <template #header>
+            <slot name="sideBarHeader" />
+          </template>
+        </side-bar>
+      </template>
+    </div>
   </main>
 </template>
 
@@ -214,7 +221,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#admin-settings-wrapper {
+#admin-settings-view-wrapper {
   overflow-y: auto;
 }
 
@@ -246,7 +253,9 @@ export default defineComponent({
   min-height: 3rem;
 }
 
-#admin-settings-wrapper {
-  overflow-y: auto;
+@media only screen and (max-width: $oc-breakpoint-small-default) {
+  .admin-settings-wrapper {
+    flex-wrap: nowrap !important;
+  }
 }
 </style>

packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts

@@ -19,7 +19,7 @@ const stubSelectors = {
 }
 
 const elSelectors = {
-  adminSettingsWrapper: '#admin-settings-wrapper'
+  adminSettingsWrapper: '#admin-settings-view-wrapper'
 }
 
 vi.mock('@opencloud-eu/web-pkg')

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -16,7 +16,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <thead class="oc-thead">
       <tr class="oc-table-header-row">
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select oc-pl-s" style="top: 0px;">
-          <div><span class="oc-table-thead-content"><oc-checkbox-stub label="Select all spaces" disabled="false" id="oc-checkbox-1" labelhidden="true" outline="false" size="large" modelvalue="false" class="oc-ml-s"></oc-checkbox-stub></span></div>
+          <div><span class="oc-table-thead-content"><oc-checkbox-stub label="Select all spaces" disabled="false" id="oc-checkbox-1" labelhidden="true" size="large" modelvalue="false" class="oc-ml-s"></oc-checkbox-stub></span></div>
         </th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
           <div><span class="oc-table-thead-content header-text"></span></div>
@@ -60,7 +60,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <tbody class="has-item-context-menu">
       <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
-          <oc-checkbox-stub option="undefined" label="Select 1 Some space" disabled="false" id="oc-checkbox-2" labelhidden="true" outline="false" size="large" modelvalue="false" class="oc-ml-s"></oc-checkbox-stub>
+          <oc-checkbox-stub option="undefined" label="Select 1 Some space" disabled="false" id="oc-checkbox-2" labelhidden="true" size="large" modelvalue="false" class="oc-ml-s"></oc-checkbox-stub>
         </td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="1 Some space">1 Some space</span></td>
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       </tr>
       <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
-          <oc-checkbox-stub option="undefined" label="Select 2 Another space" disabled="false" id="oc-checkbox-3" labelhidden="true" outline="false" size="large" modelvalue="false" class="oc-ml-s"></oc-checkbox-stub>
+          <oc-checkbox-stub option="undefined" label="Select 2 Another space" disabled="false" id="oc-checkbox-3" labelhidden="true" size="large" modelvalue="false" class="oc-ml-s"></oc-checkbox-stub>
         </td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="2 Another space">2 Another space</span></td>

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

@@ -3,24 +3,26 @@
 exports[`Spaces view > loading states > should render spaces list after loading has been finished 1`] = `
 "<div>
   <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
-    <div id="admin-settings-wrapper" class="oc-width-expand oc-height-1-1 oc-position-relative">
-      <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s admin-settings-app-bar-sticky">
-        <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-          <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
-          <portal-target name="app.runtime.mobile.nav"></portal-target>
-          <div class="oc-flex">
-            <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+    <div class="admin-settings-wrapper oc-flex oc-width-1-1 oc-width-expand oc-height-1-1 oc-flex-wrap">
+      <div id="admin-settings-view-wrapper" class="oc-width-expand oc-width-1-1 oc-height-1-1 oc-flex-wrap">
+        <div id="admin-settings-app-bar" class="oc-app-bar oc-py-s admin-settings-app-bar-sticky">
+          <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
+            <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
+            <portal-target name="app.runtime.mobile.nav"></portal-target>
+            <div class="oc-flex">
+              <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+            </div>
+          </div>
+          <div class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs">
+            <!--v-if-->
           </div>
         </div>
-        <div class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs">
-          <!--v-if-->
+        <div>
+          <spaces-list-stub class=""></spaces-list-stub>
         </div>
       </div>
-      <div>
-        <spaces-list-stub class=""></spaces-list-stub>
-      </div>
+      <!--v-if-->
     </div>
-    <!--v-if-->
   </main>
 </div>"
 `;