From 114d322b50eaaaa291e45541ec4c402f0f45ba48 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Sun, 9 Nov 2014 18:28:21 +0000 Subject: [PATCH] Redesigned front page. Made font smalled for the thread list. Gravatars are now shown for each user that posted in each thread listed. Time since last reply is now calculated and shown beside each thread. --- forms.tmpl | 51 +++++++++++++++++++++----------------------- forum.nim | 49 ++++++++++++++++++++++++++++++++++++------ main.tmpl | 3 ++- public/css/style.css | 40 +++++++++++++++++++++++----------- 4 files changed, 95 insertions(+), 48 deletions(-) diff --git a/forms.tmpl b/forms.tmpl index 96b6c59..b4f531e 100644 --- a/forms.tmpl +++ b/forms.tmpl @@ -15,9 +15,9 @@ # count = 0
Topic
-
Last
+
Users
Details
-
Author
+
Activity
# for row in rows(db, query, $((c.pageNum-1) * ThreadsPerPage), $ThreadsPerPage): @@ -25,47 +25,44 @@
- ${UrlButton(c, xmlEncode(%name), c.genThreadUrl(threadid = %threadid))} + ${xmlEncode(%name)} ${genPagenumLocalNav(c, (%threadid).parseInt)}
+ + #let users = getAllRows(db, + # sql("select distinct name, email from person where id in " & + # "(select author from post where thread = ?)"), %threadId) +
+
+ #for i in 0 .. min(6, users.len-1): + + #end for +
+
#let latestReplyAuthor = getValue(db, sql("select name from person where id = " & # "(select author from post where id = " & # "(select max(id) from post where thread = ?))"), %threadId) - #let latestReplyDate = getValue(db, sql("SELECT strftime('%s', " & - # "(select creation from post where id = (select max(id) from post where thread = ?)))"), %threadId) - #let timeStr = formatTimestamp(latestReplyDate.parseInt()) + #let replyProfileUrl = c.req.makeUri("profile/", false) & # xmlEncode(latestReplyAuthor) -
-
- $latestReplyAuthor -
-
# let posts = getValue(db, sql"select count(*) from post where thread = ?", %threadId)
-
${xmlEncode(%views)}
-
$posts
+
${xmlEncode(%views)}
+
$posts
- - #let authorName = getValue(db, sql("select name from person where id = " & - # "(select author from post where id = " & - # "(select min(id) from post where thread = ?))"), %threadId) - #let profileUrl = c.req.makeUri("profile/", false) & xmlEncode(authorName) -
-
$authorName
+ + #let latestReplyDate = getValue(db, sql("SELECT strftime('%s', " & + # "(select creation from post where id = (select max(id) from post where thread = ?)))"), %threadId) + #let timeStr = formatTimestamp(latestReplyDate.parseInt()) +
+
$timeStr
# end for - -
-
-
-
135
8
-
-
#end proc diff --git a/forum.nim b/forum.nim index bb6a29c..dc32cfb 100644 --- a/forum.nim +++ b/forum.nim @@ -143,15 +143,50 @@ proc genButtons(c: var TForumData, btns: seq[TStyledButton]): string = result.add(("""$2""") % [ btns[i].link, btns[i].text, class, anchor]) +proc toInterval(diff: int64): TimeInterval = + var remaining = diff + let years = remaining div 31536000 + remaining -= years * 31536000 + let months = remaining div 2592000 + remaining -= months * 2592000 + let days = remaining div 86400 + remaining -= days * 86400 + let hours = remaining div 3600 + remaining -= hours * 3600 + let minutes = remaining div 60 + remaining -= minutes * 60 + #assert false + result = initInterval(0, remaining.int, minutes.int, hours.int, days.int, + months.int, years.int) + proc formatTimestamp(t: int): string = - let t2 = getGMTime(TTime(t)) - return t2.format("ddd',' d MMM yyyy HH':'mm 'UTC'") + let t2 = TTime(t) + let now = getTime() + let diff = (now - t2).toInterval() + if diff.years > 0: + return getGMTime(t2).format("MMMM d',' yyyy") + elif diff.months > 0: + return $diff.months & (if diff.months > 1: " months ago" else: " month ago") + elif diff.days > 0: + return $diff.days & (if diff.days > 1: " days ago" else: " day ago") + elif diff.hours > 0: + return $diff.hours & (if diff.hours > 1: " hours ago" else: " hour ago") + elif diff.minutes > 0: + return $diff.minutes & + (if diff.minutes > 1: " minutes ago" else: " minute ago") + elif diff.seconds > 0: + return $diff.seconds & + (if diff.seconds > 1: " seconds ago" else: " second ago") + else: + return "less than a second ago" + +proc getGravatarUrl(email: string, size = 80): string = + let emailMD5 = email.toLower.toMD5 + return ("http://www.gravatar.com/avatar/" & $emailMD5 & "?s=" & $size & + "&d=identicon") proc genGravatar(email: string, size: int = 80): string = - let emailMD5 = email.toLower.toMD5 - result = "" % - ("http://www.gravatar.com/avatar/" & $emailMD5 & "?s=" & $size & - "&d=identicon") + result = "" % getGravatarUrl(email, size) proc randomSalt(): string = result = "" @@ -535,8 +570,8 @@ proc genPagenumNav(c: var TForumData, stats: TForumStats): string = else: lastTag = htmlgen.a(href=lastUrl, ">>") nextTag = htmlgen.a(href=nextUrl, "••>") - result.add(lastTag) result.add(nextTag) + result.add(lastTag) proc gatherTotalPostsByID(c: var TForumData, thrid: int): int = ## Gets the total post count of a thread. diff --git a/main.tmpl b/main.tmpl index 44a7dfb..c44dea3 100644 --- a/main.tmpl +++ b/main.tmpl @@ -110,7 +110,8 @@ #if c.errorMsg != "": $c.errorMsg #end if - Register + Register Login
diff --git a/public/css/style.css b/public/css/style.css index a285984..1bf81f0 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -26,7 +26,7 @@ pre .end { background:url("/images/tabEnd.png") no-repeat left bottom; } .page-layout { margin:0 auto; width:1000px; } .docs-layout { margin:0 40px; } -.talk-layout { margin:0 40px; } +.talk-layout { margin:0 40px; min-height: 700px; } .wide-layout { margin:0 auto; } #head { height:100px; background:url("/images/head.png") repeat-x bottom; } @@ -167,11 +167,11 @@ pre .end { background:url("/images/tabEnd.png") no-repeat left bottom; } #talk-heads > div { float:left; font-size:120%; font-weight:bold; } #talk-heads > .topic { width:55%; } #talk-heads > .detail { width:15%; } - #talk-heads > .author { width:15%; } - #talk-heads > .reply { width:15%; } + #talk-heads > .activity { width:15%; } + #talk-heads > .users { width:15%; } #talk-heads > div > div { margin:0 10px 10px 10px; padding:0 10px 10px 10px; border-bottom:1px dashed rgba(0,0,0,0.4); } #talk-heads > .topic > div { margin-left:0; } - #talk-heads > .author > div { margin-right:0; } + #talk-heads > .activity > div { margin-right:0; } #talk-thread > div, #talk-threads > div { @@ -186,21 +186,35 @@ pre .end { background:url("/images/tabEnd.png") no-repeat left bottom; } #talk-thread > div:nth-child(odd) { background:rgba(255,255,255,0.1); } #talk-threads > div:nth-child(odd) { background:rgba(0,0,0,0.2); } #talk-thread > div > div, - #talk-threads > div > div { float:left; } + #talk-threads > div > div + { + float:left; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: 10pt; + } #talk-thread > div > div > div, - #talk-threads > div > div > div { margin:10px 20px; } + #talk-threads > div > div > div { margin: 5px 20px; } #talk-threads > div > .topic { width:55%; } - #talk-threads > div > .reply { width:15%; overflow:hidden; } + #talk-threads > div > .users { width:15%; overflow:hidden; } + #talk-threads > div > .users > div > img + { + margin-bottom: -4pt; + cursor: help; + } #talk-threads > div > .detail { width:15%; overflow:hidden; } - #talk-thread > div > .author, - #talk-threads > div > .author { + #talk-thread > div > .activity, + #talk-threads > div > .activity { position:absolute; right:0; top:0; bottom:0; width:15%; overflow:hidden; - background:rgba(0,0,0,0.8); } + background:rgba(0,0,0,0.8); + color: white; + } #talk-thread > div > .author a, #talk-threads > div > .author a { color:#1cb3ec !important; } #talk-thread > div > .author a:hover, @@ -208,10 +222,10 @@ pre .end { background:url("/images/tabEnd.png") no-repeat left bottom; } #talk-threads > div > .topic .pages { float:right; } #talk-threads > div > .topic > div > a { font-weight:bold; } #talk-threads > div > .detail > div { float:left; margin:0; } - #talk-threads > div > .detail > div > div { margin-left:20px; padding:10px 10px 10px 22px; } + #talk-threads > div > .detail > div > div { margin-left:20px; padding: 5px 5px 5px 22px; } #talk-threads > div > .detail > div { width:50%; } - #talk-threads > div > .detail > div:first-child > div { background:url("/images/forum-views.png") no-repeat left; } - #talk-threads > div > .detail > div:last-child > div { background:url("/images/forum-posts.png") no-repeat left; } + #talk-threads > div > .detail > div:first-child > div { background:url("/images/forum-views.png") no-repeat left; cursor: help; } + #talk-threads > div > .detail > div:last-child > div { background:url("/images/forum-posts.png") no-repeat left; cursor: help; } #talk-thread > div { margin:20px 0; min-height:150px; box-shadow:1px 3px 12px rgba(0,0,0,.4) } #talk-thread > div > .author > div > .avatar { margin-top:20px; }