diff options
| -rw-r--r-- | public/assets/js/lib/views/users/users.js | 4 | ||||
| -rw-r--r-- | public/assets/js/util/format.js | 57 | ||||
| -rw-r--r-- | views/pages/users.ejs | 81 |
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 + " v."] } if (n < 200) { return ["quiet", txt + " v."] } - else if (n < 500) { return ["quiet", txt + " v."] } - else if (n < 1000) { return ["old", txt + " v."] } - else if (n < 5000) { return ["med", txt + " kv."] } + else if (n < 500) { return ["old", txt + " v."] } + else if (n < 1000) { return ["med", txt + " v."] } + else if (n < 5000) { return ["recent", txt + " kv."] } else if (no_bold || n < 10000) { return ["recent", txt + " kv."] } else { return ["new", txt + " 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 + " 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 + " b."] } - if (n < 1024*1024) { + if (n < 1000*1000) { return ["quiet", txt + " kb."] } - else if (n < (20000000/bias)) { + if (n < (20000000/bias)) { return ["quiet", txt + " mb."] } - else if (n < (50000000/bias)) { + if (n < (50000000/bias)) { return ["old", txt + " mb."] } - else if (n < (80000000/bias)) { + if (n < (80000000/bias)) { return ["med", txt + " mb."] } - else if (no_bold || n < (170000000/bias)) { + if (no_bold || n < (170000000/bias)) { return ["recent", txt + " mb."] } - else { - return ["new", txt + " mb."] + if (n >= 10000*1000*1000) { + console.log(n) + txt = commatize(Math.floor(n / (1024 * 1024 * 1024))) + return ["new", txt + " gb."] } + return ["new", txt + " mb."] } function hush_null (n, unit, no_bold) { + n = commatize(n, -1) var s = unit ? n + " " + 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> · <a href="/profile">Profile</a> - · + ·:· <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> |