Improved UI of account manager.

LinneaStudenttidning · Nov 18, 2024 · 3d417e4 · 3d417e4
1 parent 1a2b1d3
commit 3d417e4
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 12 deletions.
diff --git a/scss/control_panel.scss b/scss/control_panel.scss
@@ -59,6 +59,50 @@
     }
 }
 
+.user-box {
+    display: grid;
+    grid-template-areas: 'pfp displayname' 'pfp username' 'pfp joined' 'pfp actions';
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: repeat(auto, 4);
+    gap: settings.$pad-fixed-m;
+
+    > * {
+        margin: 0;
+    }
+
+    > img.pfp {
+        grid-area: pfp;
+        aspect-ratio: 1 / 1;
+    }
+
+    > .displayname {
+        grid-area: displayname;
+    }
+
+    > .username {
+        grid-area: username;
+
+        > .role {
+            font-family: settings.$font-family-default;
+            font-size: .85em;
+            font-weight: 400;
+            padding: settings.$pad-relative-xxs settings.$pad-relative-xs;
+            margin-right: .5em;
+            color: palette.$primary400;
+            background-color: palette.$primary100;
+            grid-area: role;
+        }
+    }
+
+    .joined {
+        grid-area: joined;
+    }
+
+    > .actions {
+        grid-area: actions;
+    }
+}
+
 @container (width < 60ch) {
     .profile {
         grid-template-areas: 'pfp' 'name' 'info';
@@ -70,4 +114,10 @@
             width: min(45ch, 100%);
         }
     }
+
+    .user-box {
+        grid-template-areas: 'pfp' 'displayname' 'username' 'joined' 'actions';
+        grid-template-columns: auto;
+        grid-template-rows: repeat(auto, 5);
+    }
 }
diff --git a/templates/control_panel/account_manager.html.tera b/templates/control_panel/account_manager.html.tera
@@ -20,7 +20,9 @@
 </div>
 {% endif %}
 
-<form action="/api/creator/new" method="post">
+<form class="box pad margin-bottom" action="/api/creator/new" method="post">
+    <h2 icon="person_add">Skapa ny användare</h2>
+
     <label>Användarnamn</label>
     <input name="username" placeholder="bob_andersen" type="text" autocomplete="new-password" required>
 
@@ -45,19 +47,24 @@
     <h2 icon="group">Alla användare:</h2>
     {% if creators | length > 0 %}
     {% for user in creators %}
-    <div class="box pad flex wrap gap">
+    <div class="box pad margin-bottom user-box">
         <img src="/dynamic-data/profile-pictures/{{ user.username }}.webp" alt="Profilbild" class="pfp">
-        <p>{{ user.display_name }}</p>
-        <p>{{ user.username }}</p>
-        <p>{{ user.role }}</p>
-        <p>{{ user.joined_at | date(format="%F %T") }}</p>
+        <h3 class="displayname">{{ user.display_name }}</h3>
+        <p class="username"><span class="role">{{ user.role }}</span> {{ user.username }}</p>
+        <p class="joined">Kontot skapades {{ user.joined_at | date(format="%F %T") }}.</p>
         {% if creator.username != user.username %}
-        {% if user.password != "LOCKED" %}
-        <button class="btn dangerous" icon="lock_person" data-dialog-button="lock-creator-{{ user.username }}">Lås användare</button>
-        {% endif %}
-        <button class="btn dangerous" icon="add_moderator" data-dialog-button="change-role-{{ user.username }}">Ändra roll</button>
-        {% endif %}
-        <button class="btn" icon="password" data-dialog-button="change-password-{{ user.username }}">Ändra lösenord</button>
+        <div class="actions flex wrap gap">
+            {% if user.password != "LOCKED" %}
+            <button class="btn dangerous" icon="lock_person" data-dialog-button="lock-creator-{{ user.username }}">Lås
+                användare</button>
+            {% endif %}
+            <button class="btn dangerous" icon="add_moderator"
+                data-dialog-button="change-role-{{ user.username }}">Ändra
+                roll</button>
+            {% endif %}
+            <button class="btn" icon="password" data-dialog-button="change-password-{{ user.username }}">Ändra
+                lösenord</button>
+        </div>
     </div>
     {% endfor %}
     {% else %}