From 2e6da67d265d7c103f3c87e25cb56faa6d6b878a Mon Sep 17 00:00:00 2001
From: janpaulo <janpaulobinaluyo@gmail.com>
Date: Wed, 23 Feb 2022 13:59:34 +0800
Subject: [PATCH] Enhance ui for subject index

---
 .../sidenav_component.html.erb                |   2 +-
 .../subject_accordion_component.html.erb      |  10 +-
 .../subject_index_form_component.html.erb     |   8 +-
 ...bjects_sidenav_sub_menu_component.html.erb |  93 -------------
 app/javascript/src/application.scss           |   1 +
 app/javascript/src/application/offcanvas.scss | 123 +++++++++---------
 .../src/application/subject-accordion.scss    |  29 +++++
 app/views/subject_indexes/edit.html.erb       |   4 +-
 app/views/subject_indexes/index.html.erb      |  24 ++--
 app/views/subject_indexes/new.html.erb        |   5 +-
 app/views/subject_indexes/show.html.erb       |  22 ++--
 11 files changed, 128 insertions(+), 193 deletions(-)
 create mode 100644 app/javascript/src/application/subject-accordion.scss

diff --git a/app/components/sidenav_component/sidenav_component.html.erb b/app/components/sidenav_component/sidenav_component.html.erb
index fa2fd91..013d2a6 100644
--- a/app/components/sidenav_component/sidenav_component.html.erb
+++ b/app/components/sidenav_component/sidenav_component.html.erb
@@ -73,7 +73,7 @@
       </div>
     </div>
   <% elsif opts[:is_nav_bar].present? %>
-    <nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light p-0 navbar-body">
       <div class="container-fluid">
         <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
           <div>
diff --git a/app/components/subject_accordion_component/subject_accordion_component.html.erb b/app/components/subject_accordion_component/subject_accordion_component.html.erb
index b68cdf5..3dc7e0a 100644
--- a/app/components/subject_accordion_component/subject_accordion_component.html.erb
+++ b/app/components/subject_accordion_component/subject_accordion_component.html.erb
@@ -1,5 +1,5 @@
 <% if opts[:accordionFor].present? %>
-  <div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
+  <div class="accordion accordion-flash offcanvas-item" id="<%= parent_accordion_id %>">
     <div class="accordion-item">
       <div class="accordion-header d-flex justify-content-between">
         <% if search_result["has_children?"].present? %>
@@ -28,22 +28,22 @@
 <% else %>
   <div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
     <div class="accordion-item">
-      <div class="accordion-header d-flex justify-content-between">
+      <div class="accordion-header d-flex justify-content-between" id="<%= children_accordion_id %>">
         <% if search_result["has_children?"].present? %>
           <div class="accordion-button collapsed m-0 p-0 sub-label<%= search_result["heirarchy_level"] + 1 %>" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>" 
               data-controller="subjects" data-accordion-id="<%= children_accordion_id %>" data-subject-parent-id="<%= search_result["id"] %>" 
               data-accordion-target="#<%= accordion_body_id %>" data-action="click->subjects#loadSubjectsAccordion"> 
             <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
-            <%= link_to "Add Sub Level", new_subject_index_path(parent_id: search_result["id"]), class: "btn btn-success text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 me-5" %>
+            <%= link_to '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: search_result["id"]), class: "text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 me-5" %>
           </div>
         <% else %>
           <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
-          <%= link_to "Add Sub Level", new_subject_index_path(parent_id: search_result["id"]), class: "btn btn-success text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 me-5" %>
+          <%= link_to '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: search_result["id"]), class: "text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 non-toggle" %>
         <% end %>
       </div>
 
       <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
-        <div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-1" id="<%= accordion_body_id %>">
+        <div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-0" id="<%= accordion_body_id %>">
           <div class="text-center">
             <div class="spinner-border text-danger" role="status">
               <span class="visually-hidden">Loading...</span>
diff --git a/app/components/subject_index_form_component/subject_index_form_component.html.erb b/app/components/subject_index_form_component/subject_index_form_component.html.erb
index ceca007..27aa534 100644
--- a/app/components/subject_index_form_component/subject_index_form_component.html.erb
+++ b/app/components/subject_index_form_component/subject_index_form_component.html.erb
@@ -11,15 +11,15 @@
 		<div cass="row">
 			<div class="col-sm-12">
 				<strong> <%= label_tag :subjects %> </strong>
-				<select class="form-control subjects-selectize ps-0" name="parent_id" id="parent_id" value="<%= parent_id %>"> </select>
+				<select class="form-control subjects-selectize ps-0 pe-0" name="parent_id" id="parent_id" value="<%= parent_id %>"> </select>
 			</div>
 		</div>
 	<% end %>
 
 	<div class="row">
-		<div class="col-sm-12 d-flex justify-content-end p-2">
-			<%= submit_tag "Save", class: "btn btn-success" %>
-			<button type="button" class="btn btn-danger" href="<%= subject_indexes_path() %>"> Back </button>
+		<div class="col-sm-12 d-flex justify-content-end p-3">
+			<%= submit_tag "Save", class: "btn btn-success me-3" %>
+			<a type="button" class="btn btn-danger" href="<%= subject_indexes_path() %>"> Back </a>
 		</div>
 	</div>
 <% end %>
diff --git a/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb b/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
index 155775d..e69de29 100644
--- a/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
+++ b/app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
@@ -1,93 +0,0 @@
-<div class="accordion-collapse collapse" id="<%= opts[:main_sub_menu] %>" data-bs-parent="#sidenav">
-  <div class="accordion-body pb-0 pe-0 pt-0">
-    <% Cdao::Subject.roots.order(name: :asc).each do |root| %>
-      <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
-        <div class="accordion-item bg-transparent">
-          <div class="accordion-header bg-transparent">
-            <% if root.children.present? %>
-              <button class="<%= root.children.present? ? 'accordion-button' : '' %> collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:second_sub_menu], root.id].join %>">
-                <%= link_to root.name, index_url(root.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
-              </button>
-            <% else %>
-              <%= link_to root.name, index_url(root.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
-            <% end %>
-          </div>
-
-          <% if root.children.present? %>
-            <div class="accordion-collapse collapse" id="<%= [opts[:second_sub_menu], root.id].join %>" data-bs-parent="#firstLevelSubMenu">
-              <div class="accordion-body pb-0 pe-0 pt-0">
-                <% root.children.order(name: :asc).each do |sub1| %>
-                  <div class="accordion accordion-flush ps-20" id="secondLevelSubMenu">
-                    <div class="accordion-item bg-transparent">
-                      <div class="accordion-header bg-transparent">
-                        <% if sub1.children.present? %>
-                          <button class="<%= sub1.children.present? ? 'accordion-button' : '' %> collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:third_sub_menu], sub1.id].join %>">
-                            <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub2 clickable-link" %> 
-                          </button>
-                        <% else %>
-                          <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub2 clickable-link" %>
-                        <% end %>
-                      </div>
-
-                      <div class="accordion-collapse collapse" id="<%= [opts[:third_sub_menu], sub1.id].join %>" data-bs-parent="#secondLevelSubMenu">
-                        <div class="accordion-body pb-0 pe-0 pt-0">
-                          <% sub1.children.order(name: :asc).each do |sub2| %>
-                            <div class="accordion accordion-flush" id="thirdLevelSubMenu">
-                              <div class="accordion-item bg-transparent">
-                                <div class="accordion-header bg-transparent">
-                                  <% if sub2.children.present? %>
-                                    <button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fourth_sub_menu], sub2.id].join %>">
-                                      <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub3 clickable-link" %>
-                                    </button>
-                                  <% else %>
-                                    <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub3 clickable-link" %>
-                                  <% end %>
-                                </div>
-
-                                <div class="accordion-collapse collapse" id="<%= [opts[:fourth_sub_menu], sub2.id].join %>" data-bs-parent="#thirdLevelSubMenu">
-                                  <div class="accordion-body pb-0 pe-0 pt-0">
-                                    <% sub2.children.order(name: :asc).each do |sub3| %>
-                                      <div class="accordion accordion-flush ps-20" id="fourthLevelSubMenu">
-                                        <div class="accordion-item bg-transparent">
-                                          <div class="accordion-header">
-                                            <% if sub3.children.present? %>
-                                              <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], sub3.id].join %>">
-                                                <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub4 clickable-link" %> 
-                                              </button>
-                                            <% else%>
-                                              <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub4 clickable-link" %> 
-                                            <% end %>
-                                          </div>
-
-                                          <div class="accordion-collapse collapse" id="<%= [opts[:fifth_sub_menu], sub3.id].join %>" data-bs-parent="#fourthLevelSubMenu">
-                                            <div class="accordion-body pb-0 pe-0 pt-0">
-                                              <% sub3.children.order(name: :asc).each do |sub4| %>
-                                                <div class="accordion-item bg-transparent">
-                                                  <div class="accordion-header">
-                                                    <%= link_to sub4.name, index_url(sub4.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub5 clickable-link" %>
-                                                  </div>
-                                                </div>
-                                              <% end if sub3.children.present? %>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    <% end if sub2.children.present? %>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          <% end if sub1.children.present? %>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                <% end if root.children.present? %>
-              </div>
-            </div>
-          <% end %>
-        </div>
-      </div>
-    <% end if Cdao::Subject.roots.present? %>
-  </div>
-</div>
diff --git a/app/javascript/src/application.scss b/app/javascript/src/application.scss
index 8e7c3e6..b72fcff 100644
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@@ -6,6 +6,7 @@
 @import "./application/nav-bar";
 @import "./application/document-search";
 @import "./application/offcanvas";
+@import "./application/subject-accordion";
 
 .tableFixHead { 
     overflow: auto;
diff --git a/app/javascript/src/application/offcanvas.scss b/app/javascript/src/application/offcanvas.scss
index 3480cd6..f46cb8d 100644
--- a/app/javascript/src/application/offcanvas.scss
+++ b/app/javascript/src/application/offcanvas.scss
@@ -4,11 +4,11 @@
     box-shadow: 0 0 15px -5px #000 !important;
 }
 
-.offcanvas-contents .accordion, .accordion-item {
+.offcanvas-contents .offcanvas-item.accordion, .accordion-item {
     border: none !important;
 }
 
-.offcanvas-contents .accordion-button:not(.collapsed) {
+.offcanvas-contents .offcanvas-item.accordion-button:not(.collapsed) {
     background-color: #fff;
     a {
         color: darkred !important;
@@ -16,90 +16,89 @@
     }
 }
 
-// .for-body-grid.sub-body1{
-//     display: grid;
-//     grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
-//     max-width: 500px;
-//     padding-left: 10px !important;
-// }
-
-// .for-body-grid.sub-body2{
-//     display: grid;
-//     grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
-//     max-width: 600px;
-//     padding-left: 20px!important;
-// }
-
-// .for-body-grid.sub-body3{
-//     display: grid;
-//     grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
-//     max-width: 700px;
-//     padding-left: 30px!important;
-// }
-
-// .for-body-grid.sub-body4{
-//     display: grid;
-//     grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
-//     max-width: 800px;
-//     padding-left: 40px!important;
-// }
-
-// .for-body-grid.sub-body5{
-//     display: grid;
-//     grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
-//     max-width: 900px;
-//     padding-left: 50px!important;
-// }
-
-// .for-body-grid.sub-body6{
-//     display: grid;
-//     grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
-//     max-width: 1000px;
-//     padding-left: 60px!important;
-// }
-
-// .for-body-grid.sub-body7{
-//     display: grid;
-//     grid-template-columns: 1fr 1fr;
-//     column-gap: 10px;
-//     max-width: 1000px;
-//     padding-left: 70px!important;
-// }
+.for-body-grid.sub-body1{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    // max-width: 500px;
+    padding-left: 10px !important;
+}
+
+.for-body-grid.sub-body2{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 600px;
+    padding-left: 20px!important;
+}
+
+.for-body-grid.sub-body3{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 700px;
+    padding-left: 30px!important;
+}
+
+.for-body-grid.sub-body4{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 800px;
+    padding-left: 40px!important;
+}
+
+.for-body-grid.sub-body5{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 900px;
+    padding-left: 50px!important;
+}
+
+.for-body-grid.sub-body6{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 1000px;
+    padding-left: 60px!important;
+}
+
+.for-body-grid.sub-body7{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 1000px;
+    padding-left: 70px!important;
+}
 
 .sub-body1{
     width: auto;
-    max-width: 1000px;
+    max-width: 1200px;
     padding-left: 10px !important;
 }
 
 .sub-body2{
     width: auto;
     max-width: 1000px;
-    min-width: 400px;
     padding-left: 20px!important;
 }
 
 .sub-body3{
     width: auto;
-    max-width: 800px;
+    max-width: 1000px;
     padding-left: 30px!important;
 }
 
 .sub-body4{
     width: auto;
-    max-width: 800px;
+    max-width: 1000px;
     padding-left: 40px!important;
 }
 
 .sub-body5{
     width: auto;
-    max-width: 900px;
+    max-width: 1000px;
     padding-left: 50px!important;
 }
 
diff --git a/app/javascript/src/application/subject-accordion.scss b/app/javascript/src/application/subject-accordion.scss
new file mode 100644
index 0000000..8f3476b
--- /dev/null
+++ b/app/javascript/src/application/subject-accordion.scss
@@ -0,0 +1,29 @@
+.subject-body-index .accordion-item{
+    border-bottom: 1px solid #e5e5e5 !important;
+  }
+  
+  .subject-body-index .accordion-button:not(.collapsed) {
+    background-color: #fff;
+    a {
+      color: darkred !important;
+      font-weight: 600;
+    }
+  }
+  
+  .subject-body-index .sub-body1 {
+    max-width: 100% !important;
+    padding-bottom: 0 !important;
+    padding-left: 26px !important;
+    padding-right: 0 !important;
+  }
+  
+  .subject-body-index .sub-body2, .sub-body3, .sub-body4, .sub-body5, .sub-body6, .sub-body7 {
+    max-width: 100% !important;
+    padding-bottom: 0 !important;
+    padding-right: 0 !important;
+  }
+  
+  .non-toggle {
+    margin-right: 65px !important;
+  }
+  
\ No newline at end of file
diff --git a/app/views/subject_indexes/edit.html.erb b/app/views/subject_indexes/edit.html.erb
index a45ce06..0260bfe 100644
--- a/app/views/subject_indexes/edit.html.erb
+++ b/app/views/subject_indexes/edit.html.erb
@@ -1,7 +1,7 @@
 <div class="container-fluid mt-2 p-0">
 	<div class="col-sm-12">
-		<div class="card">
-			<div class="card-header"> <h2> Edit Subject Index </h2> </div>
+		<div>
+		<div class="card-header" style="border-bottom: 1px solid darkred;"> <h4 class="mb-0"> Edit Subject Index </h4> </div>
 
 			<div class="card-body">
 				<%= render(SubjectIndexFormComponent.new(current_user: current_user, subject_index: @subject_index, opts: { form_url: subject_index_path(@subject_index), form_method: :patch, parent_id: @subject_index.parent_id })) %>
diff --git a/app/views/subject_indexes/index.html.erb b/app/views/subject_indexes/index.html.erb
index b5bf9cb..e6788ed 100644
--- a/app/views/subject_indexes/index.html.erb
+++ b/app/views/subject_indexes/index.html.erb
@@ -1,28 +1,28 @@
-<div class="container-fluid mt-2 p-0">
 	<div class="col-sm-12">
-		<div class="card">
-			<div class="card-header"> <h2> Subjects </h2> </div>
-			<div class="card-body">
+		<div class="subject-body-index">
+			<div class="card-header" style="border-bottom: 1px solid darkred;"> <h4 class="mb-0"><i class="fas fa-indent me-2"></i> Subjects </h4> </div>
+			<div class="card-body" style="position: relative;">
+				<div class="accordion accordion-flash subject-index-body" id="mainPanelBody" >
 				<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
-					<div class="accordion accordion-flash" id="mainPanel<%= root.id %>">
 						<div class="accordion-item">
-							<div class="accordion-header d-flex justify-content-between">
+							<div class="accordion-header d-flex justify-content-between" id="<%= ["rootLevel", root.id].join %>">
 								<% if root.children.present? %>
 									<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"
 											 data-controller="subjects" data-accordion-id="<%= ["subjectsAccordion", root.id].join %>" 
-											 data-subject-parent-id="<%= root.id %>" data-accordion-target="#<%= ['subjectsAccordionBody', root.id].join %>"
+											 data-subject-parent-id="<%= root.id %>" 
+											 data-accordion-target="#<%= ['subjectsAccordionBody', root.id].join %>"
 											 data-action="click->subjects#loadSubjectsAccordion"> 
 										<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
-										<%= link_to "Add Sub Level", new_subject_index_path(parent_id: root.id), class: "btn btn-success text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
+										<%= link_to '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: root.id), class: "text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
 									</div>
 								<% else %>
 									<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
-									<%= link_to "Add Sub Level", new_subject_index_path(parent_id: root.id), class: "btn btn-success text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
+									<%= link_to '<i class="fas fa-folder-plus"></i>'.html_safe, new_subject_index_path(parent_id: root.id), class: "text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin non-toggle" %>
 								<% end %>
 							</div>
 
-							<div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>">
-								<div class="accordion-body pt-1 pb-1" id="<%= ['subjectsAccordionBody', root.id].join %>">
+							<div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanelBody">
+								<div class="accordion-body pt-1 pb-1 sub-body1" id="<%= ['subjectsAccordionBody', root.id].join %>">
 									<div class="text-center">
 										<div class="spinner-border text-danger" role="status">
 											<span class="visually-hidden">Loading...</span>
@@ -31,8 +31,8 @@
 								</div>
 							</div>
 						</div>
-					</div>
 				<% end %>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/app/views/subject_indexes/new.html.erb b/app/views/subject_indexes/new.html.erb
index 9a7977f..4bcfd17 100644
--- a/app/views/subject_indexes/new.html.erb
+++ b/app/views/subject_indexes/new.html.erb
@@ -1,8 +1,7 @@
 <div class="container-fluid mt-2 p-0">
 	<div class="col-sm-12">
-		<div class="card">
-			<div class="card-header"> <h2> New Subject Index </h2> </div>
-
+		<div >
+			<div class="card-header" style="border-bottom: 1px solid darkred;"> <h4 class="mb-0"> New Subject Index </h4> </div>
 			<div class="card-body">
 				<%= render(SubjectIndexFormComponent.new(current_user: current_user, subject_index: @subject_index, opts: { form_url: subject_indexes_path, form_method: :post, parent_id: params[:parent_id] })) %>
       </div>
diff --git a/app/views/subject_indexes/show.html.erb b/app/views/subject_indexes/show.html.erb
index d4fb851..935e905 100644
--- a/app/views/subject_indexes/show.html.erb
+++ b/app/views/subject_indexes/show.html.erb
@@ -1,11 +1,11 @@
-<div class="card">
-  <div class="card-header"> 
+<div>
+  <div class="card-header" style="border-bottom: 1px solid darkred;"> 
     <div class="row">
       <div class="col-sm-10">
         <% if @subject_index.is_root? %>
-          <ol class="breadcrumb"> 
+          <ol class="breadcrumb mb-0"> 
             <li class="breadcrumb-item d-inline-flex active"> 
-              <h4> <%= @subject_index.name %> </h4> 
+              <h4 class="mb-0"> <%= @subject_index.name %> </h4> 
             </li> 
           </ol>
         <% else %>
@@ -23,18 +23,18 @@
         <% end %>
       </div>
 
-      <div class="col-sm-2 position-relative">
-        <a class="btn btn-secondary m-1" href="<%= edit_subject_index_path(@subject_index) %>"> Edit </a>
-        <a class="btn btn-danger m-1" href="<%= subject_index_path(@subject_index) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
+      <div class="col-sm-2 d-flex justify-content-end ">
+        <a class="btn btn-secondary me-3 btn-sm" href="<%= edit_subject_index_path(@subject_index) %>"> Edit </a>
+        <a class="btn btn-danger btn-sm" href="<%= subject_index_path(@subject_index) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
       </div>
     </div>
   </div>
   <div class="card-body">
-    <div class="card">
-      <div class="card-header">
+    <div>
+      <div class="card-header" style="border-bottom: 1px solid darkred;">
         <div class="row">
-          <div class="col-sm-11"> <h4> Sub Levels </h4> </div>
-          <div class="col-sm-1 justify-content-end"> <a class="btn btn-success p-1" href="<%= new_subject_index_path(parent_id: @subject_index) %>"> Add </a> </div>
+          <div class="col-sm-11"> <h4 class="mb-0"> Sub Levels </h4> </div>
+          <div class="col-sm-1 d-flex justify-content-end align-items-end"> <a class="btn btn-success p-1 btn-sm ps-3 pe-3" href="<%= new_subject_index_path(parent_id: @subject_index) %>"> Add </a> </div>
         </div>
       </div>
       <div class="card-body">