Merge branch 'admin-users' into shigusegubu-themes3

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -3,6 +3,11 @@
     margin: 0.5em 2em;
   }
 
+  .setting-section {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
   .toolbar {
     display: flex;
     flex-wrap: wrap;

src/components/settings_modal/admin_tabs/frontends_tab.scss

@@ -1,4 +1,5 @@
 .FrontendsTab {
+  padding: 0 1em;
   .cards-list {
     padding: 0;
   }
@@ -34,7 +35,8 @@
 
   h5 {
     margin: 0;
-    font-size: 1.15em
+    font-size: 1.15em;
+    text-transform: capitalize;
   }
 
   dl {

src/components/settings_modal/admin_tabs/users_tab.scss

@@ -2,14 +2,26 @@
   max-height: 100%;
   display: flex;
   flex-direction: column;
+  padding: 0;
+
+  h3 {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .splitter {
+    max-height: 100%;
+    display: flex;
     overflow-y: hidden;
+  }
 
   .filters-section {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+    flex-direction: column;
-    grid-auto-columns: 1fr;
+    gap: 1em;
-    grid-auto-flow: row;
+    border-right: 1px solid var(--border);
-    gap: 0.5em 1em;
+    padding: 0 1em;
+    margin-right: 1em;
 
     > div {
       flex: 0 1 auto;
@@ -17,7 +29,6 @@
 
     .filter {
       display: block;
-      margin-bottom: 0.5em;
       min-width: 14em;
 
       .query-label {
@@ -29,4 +40,8 @@
       }
     }
   }
+
+  .users-list {
+    flex: 1 0 30em;
+  }
 }

src/components/settings_modal/admin_tabs/users_tab.vue

@@ -6,10 +6,11 @@
     <h3>
       {{ $t('admin_dash.users.title') }}
     </h3>
+    <div class="splitter">
       <div class="filters-section">
         <label class="filter">
           <div class="query-label">
-          {{ $t('admin_dash.users.labels.query') }}
+            {{ $t('admin_dash.users.labels.nickname') }}
           </div>
           <input
             v-model="filtersQuery"
@@ -122,6 +123,7 @@
       </div>
       <List
         ref="usersList"
+        class="users-list"
         :fetch-function="fetchUsers"
         selectable
         scrollable
@@ -141,6 +143,7 @@
         </template>
       </List>
     </div>
+  </div>
 </template>
 <script src="./users_tab.js"></script>
 <style lang="scss" src="./users_tab.scss"></style>

src/components/settings_modal/helpers/vertical_tab_switcher.jsx

@@ -160,19 +160,25 @@ export default {
         'tab-content-wrapper',
         active ? '-active' : '-hidden',
       ]
+      const slotWrapperClasses = [
+        'tab-slot-wrapper',
+        active ? '-active' : '-hidden',
+      ]
       const contentClasses = ['tab-content']
-      if (props['full-width'] || props['full-width'] === '') {
+      if (props['full-width'] || props['full-width'] != null) {
         contentClasses.push('-full-width')
         wrapperClasses.push('-full-width')
+        slotWrapperClasses.push('-full-width')
       }
-      if (props['full-height'] || props['full-width'] === '') {
+      if (props['full-height'] || props['full-width'] != null) {
         contentClasses.push('-full-height')
         wrapperClasses.push('-full-height')
+        slotWrapperClasses.push('-full-height')
       }
       return (
         <div class={wrapperClasses}>
           <div class="tab-mobile-header">{header}</div>
-          <div class="tab-slot-wrapper">
+          <div class={slotWrapperClasses}>
             <div class={contentClasses}>{renderSlot}</div>
           </div>
         </div>

src/components/settings_modal/helpers/vertical_tab_switcher.scss

@@ -49,6 +49,16 @@
       grid-template-areas: ". content .";
       flex-direction: column;
 
+      &.-full-width {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      &.-full-height {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
       .tab-content {
         grid-area: content;
 
@@ -57,6 +67,8 @@
         }
 
         &.-full-height {
+          display: flex;
+          flex-direction: column;
           height: 100%;
 
           > * {

src/i18n/en.json

@@ -1297,7 +1297,8 @@
       "local_id": "Local ID",
       "labels": {
         "query": "Search",
-        "name": "Name",
+        "nickname": "@handle",
+        "name": "Display Name",
         "name_colon": "Name:",
         "email": "Email",
         "email_colon": "Email:",