contract finalized indicator

views/contract-view.ejs

@@ -19,11 +19,29 @@
   </ul>
 </nav>
 
-<h1 class="title is-1">
-  Contract
-  #<%= contract.contractId %>:
-  <%= contract.burialSiteName || "(No Burial Site)" %>
-</h1>
+<div class="level is-mobile">
+  <div class="level-left">
+    <div class="level-item">
+      <h1 class="title is-1">
+        Contract
+        #<%= contract.contractId %>:
+        <%= contract.burialSiteName || "(No Burial Site)" %>
+      </h1>
+    </div>
+  </div>
+  <% if (contract.contractEndDate) { %>
+    <div class="level-right">
+      <div class="level-item">
+        <span class="tag is-warning is-medium">
+          <span class="icon is-small">
+            <i class="fas fa-stop" aria-hidden="true"></i>
+          </span>
+          <span>Finalized</span>
+        </span>
+      </div>
+    </div>
+  <% } %>
+</div>
 
 <div class="columns is-vcentered is-fixed-bottom has-background-white has-shadow is-hidden-print">
   <div class="column">
@@ -614,7 +632,20 @@
 
 <% if (contract.contractComments.length > 0) { %>
   <div class="panel">
-    <h2 class="panel-heading">Comments</h2>
+    <div class="panel-heading">
+      <div class="level is-mobile">
+        <div class="level-left">
+          <div class="level-item">
+            <h2 class="has-text-weight-bold">Comments</h2>
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            <i class="fas fa-comment-dots" aria-hidden="true"></i>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="panel-block is-block">
       <table class="table is-fullwidth is-striped is-hoverable">
         <thead>