Relayout document views

app/javascript/src/application.scss

@@ -4,6 +4,7 @@
 @import "./application/pagination";
 @import "./application/table";
 @import "./application/nav-bar";
+@import "./application/document-search";
 
 .tableFixHead { 
     overflow: auto;

app/javascript/src/application/nav-bar.scss

@@ -9,3 +9,8 @@ img.nav-bar-app-logo {
 .active-red a:hover {
     background: transparent;
 }
+
+.nav-body {
+    box-shadow: 0 2px 2px rgb(0 0 0 / 5%), 0 1px 0 rgb(0 0 0 / 5%);
+    background: #fff;
+}

app/views/documents/index.html.erb

@@ -1,46 +1,12 @@
 
-<div class="container">
-  <%= form_tag(documents_path, method: :get) do %>
-    <div class="row justify-content-center">
-      <div class="col-sm-8 col-md-7 col-lg-8 col-xl-9 p-2 ps-1">
-        <%= text_field_tag :q, params[:q], placeholder:  'Full text search',  class: "form-control" %>
-      </div>
-
-      <div class="col-sm-4 col-md-5 col-lg-4 col-xl-3 mt-2 d-flex justify-content-end align-items-baseline">
-        <%= submit_tag "Search", class: "btn btn-primary text-white me-3" %>
-        <button type="button" class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#citationFinder"> Citation Finder </button>
-        <div class="modal fade" id="citationFinder" tabindex="-1" aria-labelledby="citationFinder" aria-hidden="true">
-          <%= form_tag(documents_path, method: :get) do %>
-            <div class="modal-dialog modal-lg modal-dialog-scrollable">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h5 class="modal-title"> Citation Finder </h5>
-                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-
-                  <div class="modal-body">
-                    <div class="row">
-                      <div class="col-sm-12 p-2">
-                        <%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control", placeholder: "PHILREP/SCRA" %>
-                      </div>
-                    </div>
-                </div>
-
-                <div class="modal-footer">
-                  <button type="submit" class="btn btn-primary">Search</button>
-                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                </div>
-              </div>
-            </div>
-          <% end %>
+<div class="container-fluid row p-0 m-0">
+  <div class="container col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3" >
+    <div class="advanced-search-box">
+      <%= render(DocumentAdvancedSearchComponent.new(current_user: current_user,  opts: {})) %>
     </div>
   </div>
-    </div>
-  
-  <% end %>
-</div>
-</div>
-<% if @search_params.present? %>     
+  <div class="container col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9"> 
+    <% if @search_params.present? %>
       <div class="container m-2"> <%= render PaginationComponent.new(data: @jurisprudences) %> </div>
       <hr style="margin: 0 18px;"/>
       <div class="card-header mt-1 col-sm-12 bg-transparent">
@@ -60,4 +26,15 @@
           </div>
         </div>
       </div>
-<% end %>
+    <% else %>  
+    <div class="d-flex justify-content-center flex-column no-search-body"> 
+      <div class="text-center ">
+        <%= image_pack_tag 'application/search-icon.png', class: "search-doc-icon"%>
+      </div>
+      <div class="text-center label-no-search" >
+        No Documents Found
+      </div>
+    </div>
+    <% end %>
+  </div>
+</div>

app/views/documents/show.html.erb

@@ -1,4 +1,11 @@
-<div class="card mt-1 g-3">
+<div class="container-fluid row p-0 m-0">
+  <div class="container col-md-3">
+    <div class="advanced-search-box">
+      <%= render(DocumentAdvancedSearchComponent.new(current_user: current_user,  opts: {})) %>
+    </div>
+  </div>
+  <div class="container col-md-9"> 
+    <div class="card mt-1 g-3">
       <div class="container p-2 card-header">
         <div class="row">
           <div class="col-lg-12"> 
@@ -87,4 +94,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>