Merge pull request #23 from lexintegritastech/feature-enhancement-ui

Feature enhancement UI

app/components/pagination_component/pagination_component.html.erb

@@ -1,6 +1,6 @@
 <div class="col col-md-12">
   <header class="header bg-white b-b clearfix">
-    <div class="row m-t-sm">
+    <div class="row m-t-sm align-items-end pagination-body">
       <div class="col-md-6">
         <% if opts[:is_subject_breadcrums].present? && subjects.present? %>
           <ol class="breadcrumb">
@@ -9,7 +9,7 @@
                 <li class="breadcrumb-item d-inline-flex"> 
                   <h4> <%= link_to ancestor.name, subject_index_path(ancestor), class: "text-decoration-none" %> </h4> 
                 </li>
-              <% end %>
+              <% end %> 
 
               <li class="breadcrumb-item d-inline-flex active"> 
                 <h4> <%= subject.name %> </h4> 
@@ -17,7 +17,7 @@
             <% end %>
           </ol>
         <% else %>
-          <h4 style="color: darkred">Search Results</h4>
+          <h4 style="color: darkred" class="m-0">Search Results</h4>
           <small style="color: darkred">
             <%= page_entries_info data, entry_name: 'records' if data.present? %>
           </small>

app/javascript/src/application.scss

@@ -1,6 +1,8 @@
 @import "~bootstrap/scss/bootstrap";
 @import "./application/sidenav";
 @import "./application/sessions";
+@import "./application/pagination";
+@import "./application/table";
 
 .tableFixHead { 
     overflow: auto;
@@ -33,3 +35,8 @@
 .accordion-button::after {
 	margin-right: 10px;
 }
+
+.main-content-body {
+  min-height: 100vh !important;
+  overflow: auto;
+}

app/javascript/src/application/pagination.scss

@@ -0,0 +1,9 @@
+.pagination-body .pagination .page-item a{
+    color: darkred;
+  }
+  
+.pagination-body .pagination span.page-item.page.current.page-link {
+border: darkred;
+background: darkred !important;
+color: #fff !important;
+}

app/javascript/src/application/table.scss

@@ -0,0 +1,8 @@
+
+.table > :not(:first-child) {
+  border-top: none !important;
+}
+
+thead tr {
+  border-bottom: 2px solid #782525
+}

app/views/documents/index.html.erb

@@ -1,23 +1,22 @@
-<div class="card mt-2 g-3">
-  <div class="card-header mt-1 col-sm-12">
-    <%= form_tag(documents_path, method: :get) do %>
-      <div class="row">
-        <div class="col-sm-8 p-2">
-          <%= text_field_tag :q, params[:q], class: "form-control" %>
-        </div>
 
-        <div class="col-sm-4 p-2">
+<div class="container">
-          <%= submit_tag "Search", class: "btn btn-primary text-dark" %>
+  <%= form_tag(documents_path, method: :get) do %>
-          <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#citationFinder"> Citation Finder </button>
+    <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="modal fade" id="citationFinder" tabindex="-1" aria-labelledby="citationFinder" aria-hidden="true">
+      <div class="col-sm-4 col-md-5 col-lg-4 col-xl-3 mt-2 d-flex justify-content-end align-items-baseline">
-            <%= form_tag(documents_path, method: :get) do %>
+        <%= submit_tag "Search", class: "btn btn-primary text-white me-3" %>
-              <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <button type="button" class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#citationFinder"> Citation Finder </button>
-                <div class="modal-content">
+        <div class="modal fade" id="citationFinder" tabindex="-1" aria-labelledby="citationFinder" aria-hidden="true">
-                  <div class="modal-header">
+          <%= form_tag(documents_path, method: :get) do %>
-                    <h5 class="modal-title"> Citation Finder </h5>
+            <div class="modal-dialog modal-lg modal-dialog-scrollable">
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <div class="modal-content">
-                  </div>
+                <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">
@@ -25,34 +24,40 @@
                         <%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control", placeholder: "PHILREP/SCRA" %>
                       </div>
                     </div>
+                </div>
 
-                  <div class="modal-footer">
+                <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary">Search</button>
+                  <button type="submit" class="btn btn-primary">Search</button>
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                  </div>
                 </div>
               </div>
-            <% end %>
+            </div>
-          </div>
+          <% end %>
         </div>
       </div>
-    <% end %>
+    </div>
-  </div>
+  
-
+  <% end %>
-  <div class="card-body col-sm-12 tableFixHead p-0 mt-1">
+</div>
-    <% if @search_params.present? %>
+</div>
-      <div class="container m-2"> <%= render PaginationComponent.new(data: @jurisprudences) %> </div>
+<% if @search_params.present? %>     
-      <table class="table table-striped table-hover mb-0">
+  <div class="container m-2"> <%= render PaginationComponent.new(data: @jurisprudences) %> </div>
-        <thead>
+  <hr style="margin: 0 18px;"/>
-          <th class="bg-light"> Reference No. </th>
+  <div class="card-header mt-1 col-sm-12 bg-transparent">
-          <th class="bg-light"> Title </th>
+    <div class="card g-3 " style="border:none;">
-          <th class="bg-light"> Date </th>
+      <div class="card-body col-sm-12 tableFixHead p-0">
-        </thead>
+        <table class="table table-hover mb-0">
+          <thead>
+            <th class="bg-light"> Reference No. </th>
+            <th class="bg-light"> Title </th>
+            <th class="bg-light"> Date </th>
+          </thead>
 
-        <tbody>
+          <tbody>
-          <%= render(DocumentIndexTableComponent.with_collection(@jurisprudences, current_user: current_user, opts: {})) %>
+            <%= render(DocumentIndexTableComponent.with_collection(@jurisprudences, current_user: current_user, opts: {})) %>
-        </tbody>
+          </tbody>
-      </table>
+        </table>
-    <% end %>
+      </div>
+    </div>
   </div>
-</div>
+<% end %>

app/views/kaminari/_first_page.html.erb

@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item first">
-  <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.first?, '<i class="fas fa-angle-double-left"></i>'.html_safe, url, remote: remote, class: "page-link" %>
 </span>

app/views/kaminari/_last_page.html.erb

@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item last">
-  <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.last?, '<i class="fas fa-angle-double-right"></i>'.html_safe, url, remote: remote, class: "page-link" %>
 </span>

app/views/kaminari/_next_page.html.erb

@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item next">
-  <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.last?, '<i class="fas fa-angle-right"></i>'.html_safe, url, rel: 'next', remote: remote, class: "page-link" %>
 </span>

app/views/kaminari/_paginator.html.erb

@@ -7,7 +7,7 @@
     paginator:     the paginator that renders the pagination tags inside
 -%>
 <%= paginator.render do -%>
-  <nav class="pagination" role="navigation" aria-label="pager">
+  <nav class="pagination pagination-sm" role="navigation" aria-label="pager">
     <%= first_page_tag unless current_page.first? %>
     <%= prev_page_tag unless current_page.first? %>
     <% each_page do |page| -%>

app/views/kaminari/_prev_page.html.erb

@@ -7,5 +7,5 @@
     remote:        data-remote
 -%>
 <span class="page-item prev">
-  <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote, class: "page-link" %>
+  <%= link_to_unless current_page.first?, '<i class="fas fa-angle-left"></i>'.html_safe, url, rel: 'prev', remote: remote, class: "page-link" %>
 </span>

app/views/layouts/application.html.erb

@@ -20,7 +20,7 @@
         </div>
       <% end %>
 
-      <div class="<%= current_user.present? ? 'col py-3' : 'col-sm-3 login-body-box' %>">
+      <div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-3 login-body-box' %>">
         <div class="content-body">
           <%= yield %>
         </div>