Improved Ticket Layout

templates/ticket/list.cassius

@@ -0,0 +1,4 @@
+.container
+    display: grid
+    grid-template-columns: 1rem 1rem 2fr 2fr 8fr 1rem 1rem
+    grid-column-gap: 1rem

templates/ticket/list.hamlet

@@ -23,6 +23,6 @@ $# <http://creativecommons.org/publicdomain/zero/1.0/>.
   <div class="submit">
     <input type="submit" value="Filter">
 
-<ul>
+<div .container>
   $forall ts <- rows
-    <li>^{ticketSummaryW shr prj ts Nothing}
+    ^{ticketSummaryW shr prj ts Nothing}

templates/ticket/widget/summary.cassius

@@ -21,3 +21,24 @@
 
 .#{cClosed}
     color: #{dark green}
+
+.ticket-status-column
+  grid-column: 1 / 1
+"
+.ticket-number-column
+  grid-column: 2 / 2
+
+.ticket-date-column
+  grid-column: 3 / 3
+
+.ticket-sharer-column
+  grid-column: 4 / 4
+
+.ticket-title-column
+  grid-column: 5 / 5
+
+.ticket-tree-column
+  grid-column: 6 / 6
+
+.ticket-node-column
+  grid-column: 7 / 7

templates/ticket/widget/summary.hamlet

@@ -12,7 +12,7 @@ $# 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/>.
 
-<div>
+<span .ticket-status-column>
   $case tsStatus ts
     $of TSNew
       <span .#{cNew}>
@@ -24,28 +24,32 @@ $# <http://creativecommons.org/publicdomain/zero/1.0/>.
       <span .#{cClosed}>
         ☒
 
+<span .ticket-number-column>
   <a href=@{TicketR shr prj $ tsNumber ts}>
     #{tsNumber ts}
 
-  <span>
+<span .ticket-date-column>
   #{showDate $ tsCreatedAt ts}
 
+<span .ticket-sharer-column>
   ^{sharerLinkFedW $ tsCreatedBy ts}
 
+<span .ticket-title-column>
   <a href=@{TicketR shr prj $ tsNumber ts}>
     #{tsTitle ts}
 
+<span .ticket-tree-column>
   $if tsComments ts > 0
-    <span>
     💬
     #{tsComments ts}
 
 $maybe params <- mparams
-  <div>
+  <span .ticket-node-column>
     <a href="#node-#{tsNumber ts}" title="Jump to subtree">
       ☝
     $maybe route <- mroute
       <a href=@?{(route, params)} title="Move subtree here">
         ☚
 $nothing
+  <span .ticket-node-column>
     <a id="node-#{tsNumber ts}">