Enahnce ui document show

app/javascript/src/application.scss

@@ -40,3 +40,57 @@
   min-height: 100vh !important;
   overflow: auto;
 }
+
+// Modal Form custom styling //
+
+.modal-doctrine-body .selectize-control {
+  border: none !important;
+}
+
+
+.modal-doctrine-body .modal-header {
+  background: darkred !important;
+  color: #fff !important;
+
+  button.btn-close-x {
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 18px;
+    width: 30px;
+  }
+  
+  button.btn-close-x:hover {
+    background: white !important;
+    border-radius: 18px;
+    color: darkred !important;
+    width: 30px;
+  }
+}
+
+// Document custom styling //
+
+.doct-body-index div:last-child .hr {
+  display: none !important;
+}
+
+.doc-nav-body.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+  color: #ffffff !important;
+  background: darkred !important;
+  font-weight: 800;
+}
+
+.doc-nav-body .nav-item button {
+  color: #000;
+}
+
+// Cited custom styling //
+
+.cited-table-body .table-width {
+  width: 97%;
+  margin: 0 auto;
+}
+
+.doctrine-index-body .doctrine-content-body {
+  padding-left: 15px;
+}

app/views/documents/show.html.erb

@@ -1,24 +1,45 @@
-<div class="card mt-1 g-3">
-  <div class="card-header mt-1 mb-2 col-sm-12">
-    <table class="table table-borderless">
-      <tbody>
-        <tr>
-          <td class="text-start" style="width: 160px;"> Reference Number: </td>
-          <td class="text-start"> <strong> <%= @document.reference_number %> </strong> </td>
-          <td class="text-end" style="width: 50px;" > Date: </td>
-          <td class="text-end" style="width: 160px;"> <strong> <%= @document.docdate.present? ? @document.docdate.strftime("%m/%d/%Y") : @document.year %> </strong> </td>
-        </tr>
 
-        <tr>
-          <td style="width: 160px;" class="text-start"> Title: </td>
-          <td colspan="3" class="text-start"> <strong> <%= @document.title %> </strong> </td>
-        </tr>
-      </tbody>
-    </table>
+
+<div class="card mt-1 g-3">
+  <div class="container p-2 card-header">
+    <div class="row">
+      <div class="col-lg-12"> 
+        <div class="row">
+          <div class="col-lg-6">
+          </div>
+          <div class="col-lg-3 text-end"> 
+          <b>Date : </b>
+          </div>
+          <div class="col-lg-3 text-end"> 
+            <b><%= @document.docdate.present? ? @document.docdate.strftime("%m/%d/%Y") : @document.year %> </b>
+          </div>
+        </div>
       </div>
 
-  <div class="card-body">
-    <ul class="nav nav-tabs" id="menuTab" role="tablist">
+      <div class="col-lg-12 mt-2 mb-2"> 
+        <div class="row"> 
+          <div class="col-lg-3"> 
+            Reference Number :
+          </div>
+          <div class="col-lg-9"> 
+            <b><%= @document.reference_number %></b>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-12  mb-2"> 
+        <div class="row">
+          <div class="col-lg-3"> 
+            Title : 
+          </div>
+          <div class="col-lg-9"> 
+          <strong> <%= @document.title %> </strong> 
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card-body p-0">
+    <ul class="doc-nav-body nav nav-tabs nav-justified" id="menuTab" role="tablist">
       <li class="nav-item" role="presentation">
         <button class="nav-link active" id="analysisMenuTab" data-bs-toggle="tab" data-bs-target="#analysisTabContent" type="button" role="tab" aria-controls="analysisTab" aria-selected="true">Analysis</button>
       </li>
@@ -30,19 +51,18 @@
       </li>
     </ul>
 
-    <div class="tab-content">
+    <div class="tab-content" style="height: 550px;overflow: auto;">
       <div class="tab-pane fade show active" id="analysisTabContent" role="tabpanel" aria-labelledby="home-tab">
         <div class="row">
-          <div class="d-flex justify-content-end p-3">
+          <div class="d-flex justify-content-end" style="margin: 10px 0 0 -20px;">
             <a class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Add Doctrine </a>
           </div>
-
           <div class="container-sm row-flex col-sm-12 mt-2">
             <%= render(DoctrineModalFormComponent.new(current_user: current_user, doctrine: @document.doctrines.new, subjects: @subjects.order(name: :asc), opts: { form_url: jurisprudence_doctrines_path(jurisprudence_id: @document.id), form_method: :post })) %>
           </div>
         </div>
 
-        <div class="container-sm row-flex col-sm-12 mt-2">
+        <div class="container-sm row-flex col-sm-12 p-0 doct-body-index">
           <%= render(DocumentDoctrineIndexComponent.with_collection(@doctrines, current_user: current_user)) %>
         </div>
       </div>
@@ -53,10 +73,10 @@
         </div>
       </div>
 
-      <div class="tab-pane fade" id="ciatatonTabContent" role="tabpanel">
-        <div class="card card-header mt-1"> <h4> Cited Ins Documents </h4> </div>
-        <table class="table table-striped table-hover mb-0">
-          <thead>
+      <div class="tab-pane fade cited-table-body" id="ciatatonTabContent" role="tabpanel">
+        <div class="mt-3 ps-3"> <h4> Cited Ins Documents </h4> </div>
+        <table class="table table-hover mb-0 table-width">
+          <thead style="position: sticky;top: 0">
             <th class="bg-light"> Reference No. </th>
             <th class="bg-light"> Title </th>
             <th class="bg-light"> Date </th>