alexdbondoc17
/
cdao-pjet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Enhance ui for subject index

pull/53/head
janpaulo 4 years ago
parent
c9b765942f
commit
2e6da67d26
No known key found for this signature in database
GPG Key ID: 50CA753050F1541C
11 changed files with 128 additions and 193 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/components/sidenav_component/sidenav_component.html.erb
  2. 10
      app/components/subject_accordion_component/subject_accordion_component.html.erb
  3. 8
      app/components/subject_index_form_component/subject_index_form_component.html.erb
  4. 93
      app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
  5. 1
      app/javascript/src/application.scss
  6. 123
      app/javascript/src/application/offcanvas.scss
  7. 29
      app/javascript/src/application/subject-accordion.scss
  8. 4
      app/views/subject_indexes/edit.html.erb
  9. 24
      app/views/subject_indexes/index.html.erb
  10. 5
      app/views/subject_indexes/new.html.erb
  11. 22
      app/views/subject_indexes/show.html.erb

2
app/components/sidenav_component/sidenav_component.html.erb
Unescape View File

@ -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>

10
app/components/subject_accordion_component/subject_accordion_component.html.erb
Unescape View File

@ -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>

8
app/components/subject_index_form_component/subject_index_form_component.html.erb
Unescape View File

@ -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 %>

93
app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
Unescape View File

@ -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>

1
app/javascript/src/application.scss
Unescape View File

@ -6,6 +6,7 @@
@import "./application/nav-bar";
@import "./application/document-search";
@import "./application/offcanvas";
@import "./application/subject-accordion";
.tableFixHead {
overflow: auto;

123
app/javascript/src/application/offcanvas.scss
Unescape View File

@ -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;
}

29
app/javascript/src/application/subject-accordion.scss
Unescape View File

@ -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;
}

4
app/views/subject_indexes/edit.html.erb
Unescape View File

@ -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 })) %>

24
app/views/subject_indexes/index.html.erb
Unescape View File

@ -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,9 +31,9 @@
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>

5
app/views/subject_indexes/new.html.erb
Unescape View File

@ -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>

22
app/views/subject_indexes/show.html.erb
Unescape View File

@ -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">

Write Preview
Loading…
Cancel
Save