Discussion Tree View Improvements

src/Vervis/Widget/Discussion.hs

@@ -74,7 +74,7 @@ messageTreeW reply cReplies now t = go t
     go (Node mtn trees) = do
         messageW now mtn reply
         [whamlet|
-            <div .#{cReplies}>
+            <ul .#{cReplies}>
               $forall tree <- trees
                 ^{go tree}
         |]

templates/discussion/widget/message.cassius

@@ -0,0 +1,29 @@
+.message
+  list-style-type: none
+  background-color: #333
+  border-radius: 10px
+  margin-top: 1rem
+  margin-bottom: 1rem
+  margin-right: 0.25rem
+  margin-left: -3rem
+  padding: 1rem
+
+.griddiv
+  display: grid 
+  grid-template-columns: 1fr 1fr 1fr
+  justify-items: stretch
+
+.author
+   grid-area: 1 / 1 / 1 / 1
+
+.time
+  grid-area: 1 / 3 / 1 / 3
+  text-align: right
+
+.content
+  grid-area: 2 / 1 / 3 / 4
+  text-align: left
+  vertical-align: top
+
+.reply
+  grid-area: 4 / 1 / 4 / 1

templates/discussion/widget/message.hamlet

@@ -12,16 +12,19 @@ $# You should have received a copy of the CC0 Public Domain Dedication along
 $# with this software. If not, see
 $# <http://creativecommons.org/publicdomain/zero/1.0/>.
 
-^{actorLinkW author}
+<li .message>
-<div>
+  <div .griddiv>
-  $case author
+    <span .author>
-    $of MessageTreeNodeLocal lmid s
+      ^{actorLinkW author}
-      <a href=@{MessageR (sharerIdent s) (encodeHid lmid)}>
+    <span .time>
-        #{showTime $ messageCreated msg}
+      $case author
-    $of MessageTreeNodeRemote h luMsg _luAuthor _mname
+        $of MessageTreeNodeLocal lmid s
-      <a href="#{renderObjURI $ ObjURI h luMsg}"}>
+          <a href=@{MessageR (sharerIdent s) (encodeHid lmid)}>
-        #{showTime $ messageCreated msg}
+            #{showTime $ messageCreated msg}
-<div>
+        $of MessageTreeNodeRemote h luMsg _luAuthor _mname
-  ^{showContent $ messageContent msg}
+          <a href="#{renderObjURI $ ObjURI h luMsg}"}>
-<div>
+            #{showTime $ messageCreated msg}
-  <a href=@{reply msgid}>reply
+    <span .content>
+      ^{showContent $ messageContent msg}
+    <span .reply>
+      <a href=@{reply msgid}>reply

templates/discussion/widget/tree.cassius

@@ -14,4 +14,4 @@
  */
 
 .#{cReplies}
-    margin-left: 2em
+    margin-left: 1em

templates/discussion/widget/tree.hamlet

@@ -15,6 +15,6 @@ $# <http://creativecommons.org/publicdomain/zero/1.0/>.
 <div>
   <a href=@{topic}>new topic
 
-<div>
+<ul .tree>
   $forall tree <- forest
     ^{msgTree tree}