Improve users table layout on small screens (#7476)

owncloud · Aug 18, 2022 · e24c1e3 · e24c1e3
1 parent cea7077
commit e24c1e3
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 8 deletions.
diff --git a/changelog/unreleased/enhancement-users-table-small-screens b/changelog/unreleased/enhancement-users-table-small-screens
@@ -0,0 +1,6 @@
+Enhancement: Users table on small screen
+
+We've improved the layout of the users table on small screens.
+
+https://github.com/owncloud/web/pull/7476
+https://github.com/owncloud/web/issues/7439
diff --git a/packages/web-app-user-management/src/components/Users/UsersList.vue b/packages/web-app-user-management/src/components/Users/UsersList.vue
@@ -1,6 +1,7 @@
 <template>
   <oc-table
     ref="table"
+    class="users-table"
     :sort-by="sortBy"
     :sort-dir="sortDir"
     :fields="fields"
@@ -44,17 +45,15 @@
         class="oc-mr-xs quick-action-button oc-p-xs"
         @click="$emit('showPanel', { user: item, panel: 'DetailsPanel' })"
       >
-        <oc-icon name="information" fill-type="line" />
-      </oc-button>
-      <oc-button
+        <oc-icon name="information" fill-type="line" /></oc-button
+      ><oc-button
         v-oc-tooltip="$gettext('Group assignments')"
         appearance="raw"
         class="oc-mr-xs quick-action-button oc-p-xs"
         @click="$emit('showPanel', { user: item, panel: 'GroupAssignmentsPanel' })"
       >
-        <oc-icon name="group-2" fill-type="line" />
-      </oc-button>
-      <oc-button
+        <oc-icon name="group-2" fill-type="line" /></oc-button
+      ><oc-button
         v-oc-tooltip="$gettext('Edit')"
         appearance="raw"
         class="oc-mr-xs quick-action-button oc-p-xs"
@@ -235,4 +234,58 @@ export default {
   background: yellow;
   color: var(--oc-color-text-muted);
 }
+
+.users-table {
+  .oc-table-header-cell-actions,
+  .oc-table-data-cell-actions {
+    white-space: nowrap;
+  }
+
+  .oc-table-header-cell-role,
+  .oc-table-data-cell-role {
+    display: none;
+
+    @media only screen and (min-width: 1200px) {
+      display: table-cell;
+    }
+  }
+
+  .oc-table-header-cell-displayName,
+  .oc-table-data-cell-displayName {
+    display: none;
+
+    @media only screen and (min-width: 1000px) {
+      display: table-cell;
+    }
+  }
+
+  &-squashed {
+    .oc-table-header-cell-role,
+    .oc-table-data-cell-role {
+      display: none;
+
+      @media only screen and (min-width: 1600px) {
+        display: table-cell;
+      }
+    }
+
+    .oc-table-header-cell-displayName,
+    .oc-table-data-cell-displayName {
+      display: none;
+
+      @media only screen and (min-width: 1400px) {
+        display: table-cell;
+      }
+    }
+
+    .oc-table-header-cell-mail,
+    .oc-table-data-cell-mail {
+      display: none;
+
+      @media only screen and (min-width: 1200px) {
+        display: table-cell;
+      }
+    }
+  }
+}
 </style>
diff --git a/packages/web-app-user-management/src/index.js b/packages/web-app-user-management/src/index.js
@@ -26,12 +26,18 @@ const routes = [
   {
     path: '/users',
     name: 'user-management-users',
-    component: Users
+    component: Users,
+    meta: {
+      title: $gettext('Users')
+    }
   },
   {
     path: '/groups',
     name: 'user-management-groups',
-    component: Groups
+    component: Groups,
+    meta: {
+      title: $gettext('Groups')
+    }
   }
 ]
 

diff --git a/packages/web-app-user-management/src/views/Users.vue b/packages/web-app-user-management/src/views/Users.vue
@@ -50,6 +50,7 @@
         <div v-else>
           <UsersList
             :users="users"
+            :class="{ 'users-table-squashed': sideBarOpen }"
             :selected-users="selectedUsers"
             :header-position="listHeaderPosition"
             @toggleSelectUser="toggleSelectUser"