Merge pull request #13743 from nucleogenesis/user-table-misc-polish

User Table Style Updates

Author: nucleogenesis

kolibri/plugins/facility/assets/src/views/FacilityAppBarPage.vue

@@ -1,10 +1,11 @@
 <template>
 
-  <AppBarPage :title="title">
+  <AppBarPage
+    :title="title"
+    :appearanceOverrides="appearanceOverrides"
+  >
     <template #default="{ pageContentHeight }">
-      <div style="max-width: 1000px; margin: 0 auto">
-        <slot :pageContentHeight="pageContentHeight"></slot>
-      </div>
+      <slot :pageContentHeight="pageContentHeight"></slot>
     </template>
   </AppBarPage>
 
@@ -30,6 +31,11 @@
         type: String,
         default: null,
       },
+      appearanceOverrides: {
+        type: Object,
+        required: false,
+        default: null,
+      },
     },
     computed: {
       /* Returns the given appBarTitle prop if given, otherwise will return

kolibri/plugins/facility/assets/src/views/users/NewUsersPage.vue

@@ -7,15 +7,13 @@
     <template #default="{ pageContentHeight }">
       <KPageContainer
         class="page-container"
-        :style="{ maxHeight: pageContentHeight + 24 + 'px' }"
+        :style="{ maxHeight: pageContentHeight + 24 + 'px', padding: '2em 2em 1em' }"
       >
-        <p>
-          <KRouterLink
-            :to="$store.getters.facilityPageLinks.UserPage"
-            icon="back"
-            :text="backToUsers$()"
-          />
-        </p>
+        <KRouterLink
+          :to="$store.getters.facilityPageLinks.UserPage"
+          icon="back"
+          :text="backToUsers$()"
+        />
         <div class="new-users-page-header">
           <h1>{{ newUsers$() }}</h1>
           <div>
@@ -331,18 +329,23 @@
 <style lang="scss" scoped>
 
   .page-container {
+    position: relative;
     display: flex;
     flex-direction: column;
     max-width: 1000px;
-    margin: 24px auto;
+    margin: 0 auto auto;
   }
 
   .new-users-page-header {
     display: flex;
     gap: 16px;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 16px;
+    margin: 1em 0 1.5em;
+
+    h1 {
+      margin: 0;
+    }
   }
 
   .empty-new-users {
@@ -374,4 +377,11 @@
     }
   }
 
+  /deep/ .main-wrapper {
+    // The default padding causes root scroll which defeats
+    // the purpose of our maxHeight style on the KPageContainer.
+    // Uses !important because the overridden style is inline
+    padding-bottom: 0 !important;
+  }
+
 </style>

kolibri/plugins/facility/assets/src/views/users/UsersRootPage/index.vue

@@ -1,23 +1,28 @@
 <template>
 
-  <FacilityAppBarPage>
+  <FacilityAppBarPage
+    class="wrapper"
+    :appearanceOverrides="{
+      maxWidth: '1440px',
+      margin: '0 auto',
+      padding: '2em',
+    }"
+  >
     <template #default="{ pageContentHeight }">
       <!-- Adding 24 pixels to the max height to prevent having too much bottom padding space -->
       <KPageContainer
         class="flex-column"
-        :style="{ maxHeight: pageContentHeight + 24 + 'px' }"
+        :style="{ maxHeight: pageContentHeight - 48 + 'px', padding: '2em 2em 1em' }"
       >
-        <p>
-          <KRouterLink
-            v-if="userIsMultiFacilityAdmin"
-            :to="{
-              name: $store.getters.facilityPageLinks.AllFacilitiesPage.name,
-              params: { subtopicName: 'UserPage' },
-            }"
-            icon="back"
-            :text="coreString('changeLearningFacility')"
-          />
-        </p>
+        <KRouterLink
+          v-if="userIsMultiFacilityAdmin"
+          :to="{
+            name: $store.getters.facilityPageLinks.AllFacilitiesPage.name,
+            params: { subtopicName: 'UserPage' },
+          }"
+          icon="back"
+          :text="coreString('changeLearningFacility')"
+        />
         <div class="users-page-header">
           <h1>{{ coreString('usersLabel') }}</h1>
           <div class="users-page-header-actions">
@@ -335,10 +340,10 @@
     gap: 16px;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 16px;
+    margin-bottom: 1.5em;
 
     h1 {
-      margin: 16px 0;
+      margin: 0;
     }
 
     .users-page-header-actions {
@@ -355,4 +360,11 @@
     flex-direction: column;
   }
 
+  /deep/ .main-wrapper {
+    // The default padding causes root scroll which defeats
+    // the purpose of our maxHeight style on the KPageContainer.
+    // Uses !important because the overridden style is inline
+    padding-bottom: 0 !important;
+  }
+
 </style>

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue

@@ -711,7 +711,6 @@
 
   .move-down {
     position: relative;
-    margin-top: 24px;
   }
 
   .role-badge {
@@ -731,6 +730,8 @@
   .search-filter-section {
     display: flex;
     justify-content: start;
+    // Ensure space enough for keyboard nav outline before table content
+    padding-bottom: 0.5em;
   }
 
   .user-type-icon {
@@ -742,7 +743,7 @@
   }
 
   .filter-button {
-    padding-top: 8px;
+    padding-top: 10px;
     margin-left: 1em;
   }
 

packages/kolibri-common/components/PaginatedListContainerWithBackend.vue

@@ -125,7 +125,8 @@
 <style lang="scss" scoped>
 
   .pagination-nav {
-    margin-bottom: 8px;
+    /* Ensure space for pagination buttons on touch devices */
+    margin-top: 1em;
     text-align: right;
   }