From e24088c27863001154a302fb32f02c81832800e0 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 5 Apr 2020 16:03:05 +0200
Subject: fixing more formatting stuff on the users page

---
 views/pages/users.ejs | 81 ++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 27 deletions(-)

(limited to 'views')

diff --git a/views/pages/users.ejs b/views/pages/users.ejs
index 2c45321..7c8f417 100644
--- a/views/pages/users.ejs
+++ b/views/pages/users.ejs
@@ -10,36 +10,45 @@
   <a href="/inbox">Inbox</a>
   &middot;
   <a href="/profile">Profile</a>
-  &middot;
+  &middot;:&middot;
   <a class='all_link'></a>
 </div>
 
 <div id="content">
   <div id="user_list" class="ledger">
     <script type="text/html" class="template">
-      <div class="user_row">
+      <div class="user_main_row">
         <div><a href="/profile/{{username}}" class="avatar" style="background-image:url({{avatar}})"></a></div>
-        <div class="username"><a href="/profile/{{username}}">{{username}}</a></div>
-        <div class='realname'>
-          {{realname}}
-        </div>
-        <div class="location">
-          {{location}}
-        </div>
-        <div class="date {{firstseen_date_class}}">
-          joined {{firstseen_date}} <small>{{firstseen_time}}</small>
-        </div>
-        <div class="date {{lastseen_date_class}}">
-          seen {{lastseen}} ago
-        </div>
-        <div class="count {{threadcount_class}}">
-          {{threadcount}}
-        </div>
-        <div class="count {{commentcount_class}}">
-          {{commentcount}}
-        </div>
-        <div class="count {{filesize_class}}">
-          {{filesize}}
+        <div>
+          <div class="user_row">
+            <div class="username"><a href="/profile/{{username}}">{{username}}</a></div>
+            <div class='realname'>
+              {{realname}}
+            </div>
+            <div class="count {{threadcount_class}}">
+              {{threadcount}}
+            </div>
+            <div class="count {{commentcount_class}}">
+              {{commentcount}}
+            </div>
+            <div class="count {{filecount_class}}">
+              {{filecount}}
+            </div>
+            <div class="size {{filesize_class}}">
+              {{filesize}}
+            </div>
+          </div>
+          <div class="user_sub_row">
+            <div class="location">
+              {{location}}
+            </div>
+            <div class="date {{lastseen_date_class}}">
+              seen {{lastseen}} ago
+            </div>
+            <div class="date {{firstseen_date_class}}">
+              joined {{firstseen_date}} <small>{{firstseen_time}}</small>
+            </div>
+          </div>
         </div>
       </div>
     </script>
@@ -49,13 +58,24 @@
 <% include ../partials/footer %>
 
 <style>
+.user_main_row {
+  display: flex;
+  flex-flow: row;
+  margin-bottom: 10px;
+}
 .user_row {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   margin-top: 10px;
 }
-.user_row .avatar {
+.user_sub_row {
+  padding-left: 110px;
+}
+.user_sub_row div {
+  margin-top: 5px;
+}
+.user_main_row .avatar {
   display: block;
   width: 40px;
   height: 40px;
@@ -63,13 +83,13 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.user_row .avatar.hidden {
+.user_main_row .avatar.hidden {
   opacity: 0;
   height: 0;
 }
 .user_row .username {
   min-width: 100px;
-  margin-left: 5px;
+  margin-left: 10px;
 }
 .user_row .username a {
   font-size: 12px;
@@ -87,6 +107,9 @@
 .user_row .realname {
   min-width: 150px;
 }
+.user_row .location {
+  min-width: 150px;
+}
 .user_row .date {
   min-width: 160px;
 }
@@ -105,8 +128,12 @@
   justify-content: center;
 }
 .user_row .count {
-  min-width: 40px;
+  min-width: 50px;
   justify-content: flex-end;
   margin-right: 10px;
 }
+.user_row .size {
+  min-width: 60px;
+  justify-content: flex-end;
+}
 </style>
-- 
cgit v1.2.3-70-g09d2