Implemented new design for thread view.

forms.tmpl

@@ -110,39 +110,45 @@
 #  const userEmail = 6
 #  result = ""
 #  count = 0
-#  for row in fastRows(db, query, threadId, $((c.pageNum-1) * PostsPerPage), $PostsPerPage):
+#  let posts = getAllRows(db, query, threadId, $((c.pageNum-1) * PostsPerPage), $PostsPerPage)
+<div id="talk-head">
+  <div class="info">
+    <div>
+      <a href="${c.req.makeUri("/")}"><b>forum index</b></a> &gt;
+      <a href="${c.req.makeUri("/t/" & $threadId)}">${posts[0][postHeader]}</a>
+    </div>
+  </div>
+  <div class="user detail"><div><div>???</div></div><div><div>?</div></div></div>
+</div>
+<div id="talk-thread">
+#  for row in posts:
 #    inc(count)
-<a name="${%postId}"></a>
+  <div>
-<table class="post">
+    <div class="topic">
-  <tr>
+      <div>
-    <th colspan="2">
+        #try:
-      <span>${xmlEncode(%postHeader)}</span>
+          ${(%postContent).rstToHtml}
-      <span style="float:right;">${xmlEncode(%postCreation)}</span>
+        #except EParseError:
-    </th>
+        #  c.errorMsg = getCurrentExceptionMsg()
-  </tr>
+        #end
-  <tr>
+      </div>
-    <td class="left">
+    </div>
-      #let profileUrl = c.req.makeUri("profile/", false) & xmlEncode(%userName)
+    <div class="author">
-      <span><a href="$profileUrl">${xmlEncode(%userName)}</a></span>
+      <div>
-      <hr/>
+        #let profileUrl = c.req.makeUri("profile/", false) & xmlEncode(%userName)
-      <a href="$profileUrl">${genGravatar(%userEmail)}</a>
+        <div class="avatar">${genGravatar(%userEmail)}</div>
-      #if c.userId == %postAuthor and c.currentPost.subject.len == 0:
+        <a class="name" href="$profileUrl">marcianx</a>
-        <hr/>${UrlButton(c, "Edit post", c.genThreadUrl(%postId, "edit"))}
+        <p class="date">${xmlEncode(%postCreation)}</p>
-      #elif c.isAdmin and c.currentPost.subject.len == 0:
+        #if c.userId == %postAuthor and c.currentPost.subject.len == 0:
-        <hr/><span style="color:red">
+          <hr/><a href="${c.genThreadUrl(%postId, "edit")}">Edit post</a>
-          ${UrlButton(c, "Edit post", c.genThreadUrl(%postId, "edit"))}</span>
+        #elif c.isAdmin and c.currentPost.subject.len == 0:
-      #end if
+          <hr/><a style="color: red;" href="${c.genThreadUrl(%postId, "edit")}">Edit post</a>
-    </td>
+        #end if
-    <td class="content">
+      </div>
-    #try:
+    </div>
-      ${(%postContent).rstToHtml}
+  </div>
-    #except EParseError:
-    #  c.errorMsg = getCurrentExceptionMsg()
-    #end
-    </td>
-  </tr>
-</table>
 #  end for
+</div>
 #end proc
 #
 #

main.tmpl

@@ -79,10 +79,25 @@
               </div>
             </div>
           </div>
+          <div id="talk-nav">
+            ${genPagenumNav(c, stats)}
+          </div>
+        #else:
+          <div id="talk-info">
+            <div class="info-post">
+              <div>
+              ${genPagenumNav(c, stats)}
+              </div>
+            </div>
+            <div class="user-post">
+              <div>
+                #let replyUri = c.req.makeUri(c.req.path & "?action=reply#reply")
+                <a class="reply" href="$replyUri">Reply</a>
+              </div>
+            </div>
+          </div>
         #end if
-        <div id="talk-nav">
+        
-          ${genPagenumNav(c, stats)}
-        </div>
       </article>
     </div>
   </section>

public/css/style.css

@@ -440,6 +440,7 @@ pre .end { background:url("/images/tabEnd.png") no-repeat left bottom; }
     #talk-thread > div > .author > div > .avatar { margin-top:20px; }
     #talk-thread > div > .author > div > .avatar > img { box-shadow:0 0 12px #1cb3ec; }
     #talk-thread > div > .author > div > .name { }
+    #talk-thread > div > .author > div > .date { font-size: 8pt; color: white; }
     #talk-thread > div > .topic { width:85%; padding-bottom:10px; }
     #talk-thread > div > .topic pre {
       overflow:auto;
@@ -465,9 +466,11 @@ pre .end { background:url("/images/tabEnd.png") no-repeat left bottom; }
     #talk-info > div { float:left; }
     #talk-head > .info,
     #talk-info > .info { width:80%; }
+    #talk-info > .info-post { width: 85%; }
     #talk-head > .user,
     #talk-info > .user { width:20%; background:rgba(0,0,0,.2); }
-    #talk-info > .user > div > .reply { font-weight:bold; padding-left:22px; background:url("/images/forum-reply.png") no-repeat left; }
+    #talk-info > .user-post { width: 15%; background:rgba(0,0,0,.2); }
+    #talk-info > .user-post > div > .reply { font-weight:bold; padding-left:22px; background:url("/images/forum-reply.png") no-repeat left; }
     #talk-head > div > div,
     #talk-info > div > div { padding:5px 20px; }
     #talk-head > .detail > div { float:left; margin:0; }