jyapayne/nimforum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesigned front page.

Browse source 
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.
This commit is contained in:
Dominik Picheta 2014-11-09 18:28:21 +00:00
commit 114d322b50
4 changed files with 95 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

51
forms.tmpl
View file

@ -15,9 +15,9 @@
# count = 0
<div id="talk-heads">
<div class="topic"><div>Topic</div></div>
<div class="reply"><div>Last</div></div>
<div class="users"><div>Users</div></div>
<div class="detail"><div>Details</div></div>
<div class="author"><div>Author</div></div>
<div class="activity"><div>Activity</div></div>
</div>
<div id="talk-threads">
# for row in rows(db, query, $((c.pageNum-1) * ThreadsPerPage), $ThreadsPerPage):
@ -25,47 +25,44 @@
<div>
<div class="topic">
<div>
${UrlButton(c, xmlEncode(%name), c.genThreadUrl(threadid = %threadid))}
<a href="${c.genThreadUrl(threadid = %threadid)}"
title="${xmlEncode(%name)}">${xmlEncode(%name)}</a>
${genPagenumLocalNav(c, (%threadid).parseInt)}
</div>
</div>
#let users = getAllRows(db,
# sql("select distinct name, email from person where id in " &
# "(select author from post where thread = ?)"), %threadId)
<div class="users">
<div>
#for i in 0 .. min(6, users.len-1):
<img src="${getGravatarUrl(users[i][1], 20)}" title="${users[i][0]}">
#end for
</div>
</div>
#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)
<div class="reply">
<div>
<a href="$replyProfileUrl" title="$timeStr">$latestReplyAuthor</a>
</div>
</div>
# let posts = getValue(db, sql"select count(*) from post where thread = ?", %threadId)
<div class="detail">
<div><div>${xmlEncode(%views)}</div></div>
<div><div>$posts</div></div>
<div><div title="Views">${xmlEncode(%views)}</div></div>
<div><div title="Posts">$posts</div></div>
</div>
#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)
<div class="author">
<div><a href="$profileUrl">$authorName</a></div>
#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())
<div class="activity">
<div>$timeStr</div>
</div>
</div>
# end for
<div>
<div class="topic"><div><a href="http://reign-studios.net/philipwitte/nim/forum-thread.htm">Cannot generate code for N (static[int]) in template</a></div></div>
<div class="reply"><div><a href="#" title="Mon, 29 Sep 2014 23:11 UTC">marcianx</a></div></div>
<div class="detail"><div><div>135</div></div><div><div>8</div></div></div>
<div class="author"><div><a href="#">marcianx</a></div></div>
</div>
</div>
#end proc

49
forum.nim
View file

@ -143,15 +143,50 @@ proc genButtons(c: var TForumData, btns: seq[TStyledButton]): string =
result.add(("""<a class="$3active button" href="$1$4">$2</a>""") % [
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 = "<img src=\"$1\" />" %
("http://www.gravatar.com/avatar/" & $emailMD5 & "?s=" & $size &
"&d=identicon")
result = "<img src=\"$1\" />" % 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.

3
main.tmpl
View file

@ -110,7 +110,8 @@
#if c.errorMsg != "":
<span class="error">$c.errorMsg</span>
#end if
<a href="#" class="button" style="float: left;">Register</a>
<a href="${frontQuery}register" class="button"
style="float: left;">Register</a>
<a href="#" onclick="document.forms['login'].submit()"
class="button">Login</a>
</div>

40
public/css/style.css
View file

@ -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; }