From 55048bda33bb7d23cae7e81ad6d8100e58c0ce0c Mon Sep 17 00:00:00 2001
From: Gregory Ballantine <gballantine@metaunix.net>
Date: Mon, 21 Nov 2022 18:04:24 -0500
Subject: [PATCH] Styled the ticket view page; added a section for future
 ticket comments

---
 assets/sass/darkmeyer.sass | 62 +++++++++++++++++++++++++++++++++++++-
 views/layout.twig          |  2 +-
 views/ticket/view.twig     | 46 ++++++++++++++++++++++++----
 3 files changed, 102 insertions(+), 8 deletions(-)

diff --git a/assets/sass/darkmeyer.sass b/assets/sass/darkmeyer.sass
index dcce1c6..e90a5f5 100644
--- a/assets/sass/darkmeyer.sass
+++ b/assets/sass/darkmeyer.sass
@@ -9,11 +9,16 @@ $nav-height: 60px
 body
   padding-top: $nav-height
   background: lightgrey
+  font-size: 16px
 
 .container
   max-width: 1100px
   padding: 20px 30px
 
+.card
+  background: white
+  box-shadow: $box-shadow-2
+
 #main-nav
   position: fixed
   top: 0
@@ -46,4 +51,59 @@ body
 
 #main-wrapper
   margin-top: 25px
-  background: white
+
+#ticket-header
+  margin-bottom: 15px
+
+  .ticket-title
+    margin-bottom: 5px
+
+  .ticket-created,
+  .ticket-updated
+    margin-bottom: 3px
+    color: #666
+    font-size: 1.5rem
+    font-style: italic
+
+#ticket-body
+  p:last-child
+    margin-bottom: 5px
+
+.ticket-status
+  list-style: none
+  margin: 0
+  border: 1px solid #bbb
+  border-bottom: none
+
+  > li
+    margin: 0
+    padding: 7px 12px
+    border-bottom: 1px solid #999
+
+  .ticket-actions
+    padding: 0
+
+    ul
+      list-style: none
+      margin: 0
+
+    li
+      display: inline
+      margin: 0
+      padding: 0
+      &:not(:first-child)
+        a
+          border-left: 1px solid #999
+
+      a
+        position: relative
+        display: inline-block
+        box-sizing: border-box
+        width: calc(50% - 2px)
+        height: 100%
+        padding: 7px 12px
+        text-align: center
+
+        i
+          margin-right: 5px
+          font-size: 1.75rem
diff --git a/views/layout.twig b/views/layout.twig
index 409e7db..07d2709 100644
--- a/views/layout.twig
+++ b/views/layout.twig
@@ -22,7 +22,7 @@
     </div>
   </nav>
 
-  <div id="main-wrapper" class="container">
+  <div id="main-wrapper" class="card container">
     {% block content %}{% endblock %}
   </div>
 </body>
diff --git a/views/ticket/view.twig b/views/ticket/view.twig
index 942f448..b3fea5c 100644
--- a/views/ticket/view.twig
+++ b/views/ticket/view.twig
@@ -4,18 +4,52 @@
 
 {% block content %}
   <div class="row">
-    <div class="columns twelve">
-      <h1>{{ ticket.title }}</h1>
-      <h4 class="ticket-status">Status: {{ ticket.status }}</h4>
-      <h5 class="ticket-created">Created at {{ ticket.created_at }} | Last updated at {{ ticket.updated_at }}</h5>
+    <!-- ticket content -->
+    <div class="nine columns">
+      <div id="ticket-header" class="row">
+        <div class="columns twelve">
+          <h1 class="ticket-title">{{ ticket.title }}</h1>
+          <h4 class="ticket-created">Created at {{ ticket.created_at }}</h4>
+          <h4 class="ticket-updated">Last updated at {{ ticket.updated_at }}</h4>
+        </div>
+      </div>
+
+      <div id="ticket-body" class="row">
+        <div class="columns twelve">
+          <p>{{ ticket.body }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- ticket status column -->
+    <div class="three columns">
+      <ul class="ticket-status">
+        <li class="ticket-actions">
+          <ul>
+            <li><a href="{{ url_for('ticket.edit', {ticket_id: ticket.id}) }}"><i class="fa-solid fa-pen-to-square"></i>Edit</a></li>
+            <li><a href="{{ url_for('ticket.edit', {ticket_id: ticket.id}) }}"><i class="fa-solid fa-trash"></i>Delete</a></li>
+          </ul>
+        </li>
+        <li>
+          Severity {{ ticket.severity | capitalize }}
+        </li>
+        <li>
+          Status: {{ ticket.status | capitalize }}
+        </li>
+        <li>
+          Assignee(s): N/a
+        </li>
+      </ul>
     </div>
   </div>
 
   <hr>
 
+  <!-- ticket updates -->
   <div class="row">
-    <div class="columns twelve">
-      <p>{{ ticket.body }}</p>
+    <div class="twelve columns">
+      <h3>Ticket comments/Updates</h3>
+      <p>There are no comments to display at this time.</p>
     </div>
   </div>
 {% endblock %}