From 481c71517e41cdfc097b489b781847e0319f71fa Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Sat, 12 Dec 2020 15:17:42 +0300
Subject: Group staff members by role in the About page

---
 src/components/staff_panel/staff_panel.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

(limited to 'src/components/staff_panel/staff_panel.vue')

diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
index 1d13003d..c52ade42 100644
--- a/src/components/staff_panel/staff_panel.vue
+++ b/src/components/staff_panel/staff_panel.vue
@@ -7,11 +7,18 @@
         </div>
       </div>
       <div class="panel-body">
-        <basic-user-card
-          v-for="user in staffAccounts"
-          :key="user.screen_name"
-          :user="user"
-        />
+        <div
+          v-for="group in groupedStaffAccounts"
+          :key="group.role"
+          class="staff-group"
+        >
+          <h4>{{ $t('general.role.' + group.role) }}</h4>
+          <basic-user-card
+            v-for="user in group.users"
+            :key="user.screen_name"
+            :user="user"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -20,4 +27,14 @@
 <script src="./staff_panel.js" ></script>
 
 <style lang="scss">
+
+.staff-group {
+  padding-left: 1em;
+  padding-top: 1em;
+
+  .basic-user-card {
+    padding-left: 0;
+  }
+}
+
 </style>
-- 
cgit v1.2.3-70-g09d2