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

Enhance UI for `subjects#offcanvas` and `doctrines#offcanvas`

pull/84/head
alexdbondoc17 4 years ago
parent
7dbac7e518
commit
e6ea4d4e6a
5 changed files with 83 additions and 17 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. 11
      app/components/doctrines_offcanvas_component.rb
  2. 38
      app/components/doctrines_offcanvas_component/doctrines_offcanvas_component.html.erb
  3. 4
      app/components/sidenav_component/sidenav_component.html.erb
  4. 29
      app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
  5. 10
      app/views/layouts/application.html.erb

11
app/components/doctrines_offcanvas_component.rb
Unescape View File

@ -0,0 +1,11 @@
class DoctrinesOffcanvasComponent < BaseComponent
attr_reader :opts
def initialize(current_user:, opts: {})
@opts = opts
end
def render?
opts[:is_render].present?
end
end

38
app/components/doctrines_offcanvas_component/doctrines_offcanvas_component.html.erb
Unescape View File

@ -0,0 +1,38 @@
<div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="doctrinesOffCanvas" data-controller="subjects">
<div class="offcanvas-header">
<h5 class="offcanvas-title"> Doctrines </h5>
<hr class="m-0">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush subject-index-body" id="doctrinesOffCanvasMainAccordion" >
<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if root.children.present? %>
<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["doctrinesOffCanvasAccordion", root.id].join %>"
data-controller="subjects" data-subject-parent-id="<%= root.id %>"
data-accordion-target="#<%= ['doctrinesOffCanvasAccordionBody', root.id].join %>"
data-action="click->subjects#loadDoctrinesOffcanvasAccordion">
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
</div>
<% else %>
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["doctrinesOffCanvasAccordion", root.id].join %>" data-bs-parent="#doctrinesOffCanvasMainAccordion">
<div class="accordion-body pt-1 pb-1 sub-body1" id="<%= ["doctrinesOffCanvasAccordionBody", root.id].join %>">
<div class="text-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>

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

@ -95,9 +95,7 @@
</a>
</li>
<li class="nav-item p-2">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas"
data-controller="subjects" data-accordion-target="#doctrinesOffCanvasAccordionBody"
data-action="click->subjects#loadDoctrinesOffcanvasAccordion">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas">
<i class="fas fa-book me-2"></i> Doctrines
</a>
</li>

29
app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
Unescape View File

@ -1,15 +1,38 @@
<div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="<%= opts[:element_id] %>" data-controller="subjects">
<div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas" data-controller="subjects">
<div class="offcanvas-header">
<h5 class="offcanvas-title"> <%=opts[:header_title]%> </h5>
<h5 class="offcanvas-title"> Subjects </h5>
<hr class="m-0">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="<%= opts[:accordion_body_id] %>">
<div class="offcanvas-body">
<div class="accordion accordion-flush subject-index-body" id="subjectsOffCanvasMainAccordion" >
<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if root.children.present? %>
<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["subjectsOffCanvasAccordion", root.id].join %>"
data-controller="subjects" data-subject-parent-id="<%= root.id %>"
data-accordion-target="#<%= ['subjectsOffCanvasAccordionBody', root.id].join %>"
data-action="click->subjects#loadSubjectsOffcanvasAccordion">
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
</div>
<% else %>
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["subjectsOffCanvasAccordion", root.id].join %>" data-bs-parent="#subjectsOffCanvasMainAccordion">
<div class="accordion-body pt-1 pb-1 sub-body1" id="<%= ["subjectsOffCanvasAccordionBody", root.id].join %>">
<div class="text-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>

10
app/views/layouts/application.html.erb
Unescape View File

@ -41,21 +41,17 @@
<%= render(SidenavComponent.new(current_user: current_user, opts: { is_nav_bar: true }))%>
<div class="<%= params[:is_index_table].present? ? '': "d-none"%>">
<% if params[:is_index_table] === "true" %>
<div class="for-side-button" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas"
data-controller="subjects" data-accordion-target="#subjectsOffCanvasAccordionBody"
data-action="click->subjects#loadSubjectsOffcanvasAccordion">
<div class="for-side-button" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas">
<i class="fas fa-angle-right"></i>
</div>
<% else %>
<div class="for-side-button" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas"
data-controller="subjects" data-accordion-target="#doctrinesOffCanvasAccordionBody"
data-action="click->subjects#loadDoctrinesOffcanvasAccordion">
<div class="for-side-button" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas">
<i class="fas fa-angle-right"></i>
</div>
<% end %>
</div>
<%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Subjects", element_id: "subjectsOffCanvas", accordion_body_id: "subjectsOffCanvasAccordionBody" })) %>
<%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Doctrines", element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesOffCanvasAccordionBody" })) %>
<%= render(DoctrinesOffcanvasComponent.new(current_user: current_user, opts: { is_render: true })) %>
<div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
<div class="<%= current_user.present? ? 'd-none' : 'col-sm-7 login-logo' %>">

Write Preview
Loading…
Cancel
Save