fixing more formatting stuff on the users page

3 files changed, 87 insertions, 55 deletions

diff --git a/public/assets/js/lib/views/users/users.js b/public/assets/js/lib/views/users/users.js
index cebc6f9..b7e6450 100644
--- a/public/assets/js/lib/views/users/users.js
+++ b/public/assets/js/lib/views/users/users.js
@@ -52,13 +52,13 @@ var UsersView = View.extend({
       var fileSize = stats.files ? hush_size(stats.fileSize) : ['','']
       var commentCount = stats.comments ? hush_null(stats.comments, 'c') : ['','']
       var firstseen_datetime = verbose_date(user.firstseen)
-      var lastseen = get_age(user.lastseen)
+      var lastseen = get_age(user.lastseen, true)
       var avatar = profile_image(user.username)
       var t = this.template
         .replace(/{{username}}/g, sanitizeHTML(user.username))
         .replace(/{{id}}/g, user.id)
         .replace(/{{avatar}}/g, user.avatar)
-        .replace(/{{location}}/g, user.location)
+        .replace(/{{location}}/g, sanitizeHTML(user.location))
         .replace(/{{realname}}/g, sanitizeHTML(user.realname))
         .replace(/{{firstseen_date}}/g, firstseen_datetime[0])
         .replace(/{{firstseen_time}}/g, firstseen_datetime[1])
diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js
index b04c056..d868ddd 100644
--- a/public/assets/js/util/format.js
+++ b/public/assets/js/util/format.js
@@ -23,19 +23,20 @@ function querystring(opt){
   }).join("&")
 }
 function commatize (n, radix) {
-  radix = radix || 1024
+  radix = radix || 1000
   var nums = [], i, counter = 0, r = Math.floor
-  if (n > radix) {
+  if (radix !== -1 && n > radix) {
     n /= radix
     nums.unshift(r((n * 10) % 10))
     nums.unshift(".")
   }
   do {
-    i = n % 10
+    i = r(n % 10)
     n = r(n / 10)
-    if (n && ! (++counter % 3))
+    counter += 1
+    if (n && ! (counter % 3))
       { i = ' ' + r(i) }
-    nums.unshift(r(i))
+    nums.unshift(i)
   }
   while (n)
   return nums.join("")
@@ -102,14 +103,14 @@ function hush_views (n, bias, no_bold) {
   n = n || 0
   if (n < 30) { return["quiet", n + "&nbsp;v."] }
   if (n < 200) { return ["quiet", txt + "&nbsp;v."] }
-  else if (n < 500) { return ["quiet", txt + "&nbsp;v."] }
-  else if (n < 1000) { return ["old", txt + "&nbsp;v."] }
-  else if (n < 5000) { return ["med", txt + "&nbsp;kv."] }
+  else if (n < 500) { return ["old", txt + "&nbsp;v."] }
+  else if (n < 1000) { return ["med", txt + "&nbsp;v."] }
+  else if (n < 5000) { return ["recent", txt + "&nbsp;kv."] }
   else if (no_bold || n < 10000) { return ["recent", txt + "&nbsp;kv."] }
   else { return ["new", txt + "&nbsp;kv."] }
 }
 function hush_threads (n, bias, no_bold) {
-  var txt = commatize(n, 1000)
+  var txt = commatize(n, -1)
   bias = bias || 1
   n = n || 0
   if (n < 10) { return["quiet", n + "&nbsp;t."] }
@@ -120,33 +121,37 @@ function hush_threads (n, bias, no_bold) {
 }
 
 function hush_size (n, bias, no_bold) {
-  var txt = commatize(Math.floor(n / 1024))
+  var txt = commatize(Math.floor(n / 1024), 1000)
   bias = 1 || bias
   n = n || 0
   if (n < 1024) {
     return ["quiet", n + "&nbsp;b."]
   }
-  if (n < 1024*1024) {
+  if (n < 1000*1000) {
     return ["quiet", txt + "&nbsp;kb."]
   }
-  else if (n < (20000000/bias)) {
+  if (n < (20000000/bias)) {
     return ["quiet", txt + "&nbsp;mb."]
   }
-  else if (n < (50000000/bias)) {
+  if (n < (50000000/bias)) {
     return ["old", txt + "&nbsp;mb."]
   }
-  else if (n < (80000000/bias)) {
+  if (n < (80000000/bias)) {
     return ["med", txt + "&nbsp;mb."]
   }
-  else if (no_bold || n < (170000000/bias)) {
+  if (no_bold || n < (170000000/bias)) {
     return ["recent", txt + "&nbsp;mb."]
   }
-  else {
-    return ["new", txt + "&nbsp;mb."]
+  if (n >= 10000*1000*1000) {
+    console.log(n)
+    txt = commatize(Math.floor(n / (1024 * 1024 * 1024)))
+    return ["new", txt + "&nbsp;gb."]
   }
+  return ["new", txt + "&nbsp;mb."]
 }
 
 function hush_null (n, unit, no_bold) {
+  n = commatize(n, -1)
   var s = unit ? n + "&nbsp;" + unit + "." : n
   if (n < 3) {
     return ["quiet", s]
@@ -185,26 +190,26 @@ function get_revision (thread) {
   return digits
 }
 
-function get_age (t) {
+function get_age (t, long) {
   var age = Math.abs( Date.now()/1000 - t)
   var r = Math.floor
   var m
   if (age < 5) { return "now" }
-  if (age < 60) { return r(age) + "s" }
+  if (age < 60) { return r(age) + (long ? ' seconds' : "s") }
   age /= 60
-  if (age < 60) { return r(age) + "m" }
+  if (age < 60) { return r(age) + (long ? ' minutes' : "m") }
   m = r(age % 60)
   age /= 60
-  if (m > 0 && age < 2) { return r(age) + "h" + m + "m" }
-  if (age < 24) { return r(age) + "h" }
+  if (m > 0 && age < 2) { return r(age) + (long ? ' hours ' + m + ' minutes' : "h" + m + "m") }
+  if (age < 24) { return r(age) + (long ? ' hours' : "h") }
   age /= 24
-  if (age < 7) { return r(age) + "d" }
+  if (age < 7) { return r(age) + (long ? ' days' : "d") }
   age /= 7
-  if (age < 12) { return r(age) + "w" }
+  if (age < 12) { return r(age) + (long ? ' weeks' : "w") }
   age /= 4
-  if (age < 12) { return r(age) + "m" }
+  if (age < 12) { return r(age) + (long ? ' months' : "m") }
   age /= 12
-  return r(age) + "y"
+  return r(age) + (long ? ' years' : "y")
 }
 
 function tidy_urls (s, short_urls) {
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>