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

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

Enhance ui for sidenav
pull/14/head
Angel Aviel Domaoan 4 years ago committed by GitHub
parent
b7fe818b8f d2163c87ec
commit
32945d3de8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 154 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      app/components/sidenav_component/sidenav_component.html.erb
  2. 52
      app/components/subjects_sidenav_sub_menu_component/subjects_sidenav_sub_menu_component.html.erb
  3. 91
      app/javascript/src/application/sidenav.scss
  4. 2
      app/views/layouts/application.html.erb

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

@ -1,29 +1,48 @@
<% if @current_user.present? %> <% if @current_user.present? %>
<div class="accordion accordion-flush flex-column align-items-stretch p-3 overflow-auto sidenav" id="sidenav"> <div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Home", root_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div> <ul class="nav flex-column text-white w-100">
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Search", documents_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div> <a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100">
PJET
<div class="accordion-item"> </a>
<div class="accordion-header"> <hr/>
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu"> <li class="nav-link d-flex align-items-center d-flex align-items-center">
<h5> <%= link_to "Subject Index", "#", class: "accordion-link text-decoration-none text-dark" %> </h5> <i class="fas fa-home"></i> <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %>
</li>
<li class="nav-link d-flex align-items-center">
<i class="fas fa-search"></i><%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100" %>
</li>
<li class="nav-link">
<div class="accordion-item accordion-body bg-transparent ">
<div class="accordion-header bg-transparent">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
<i class="fas fa-indent"></i> <%= link_to "Subject Index", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
</button> </button>
</div> </div>
<%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_subjects_index: true, main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %> <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_subjects_index: true, main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %>
</div> </div>
<div class="accordion-item"> <li class="nav-link ">
<div class="accordion-item bg-transparent accordion-body">
<div class="accordion-header"> <div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu"> <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
<h5> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none text-dark" %> </h5> <i class="fas fa-book"></i> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
</button> </button>
</div> </div>
<%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_doctrines_index: true, main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %> <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_doctrines_index: true, main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %>
</div> </div>
</li>
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Desicions", decisions_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div> <li class="nav-link d-flex align-items-center">
<div class="accordion-item"> <h5 class="accordion-header"> <%= link_to "Logout", destroy_user_session_path, class: "accordion-link text-decoration-none text-dark" %> </h5> </div> <i class="fas fa-map-signs"></i><%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %>
</li>
<li class="nav-link d-flex align-items-center">
<i class="fas fa-sign-out-alt"></i><%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %>
</li>
</ul>
</div> </div>
<% end %> <% end %>

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

@ -2,14 +2,14 @@
<div class="accordion-body pb-0 pe-0 pt-0"> <div class="accordion-body pb-0 pe-0 pt-0">
<% Cdao::Subject.roots.each do |root| %> <% Cdao::Subject.roots.each do |root| %>
<div class="accordion accordion-flush ps-20" id="firstLevelSubMenu"> <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
<div class="accordion-item"> <div class="accordion-item bg-transparent">
<div class="accordion-header"> <div class="accordion-header bg-transparent">
<% if root.children.present? %> <% if root.children.present? %>
<button class="<%= root.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:second_sub_menu], root.id].join %>"> <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 %>">
<h5> <%= link_to root.name, index_url(root.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to root.name, index_url(root.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
</button> </button>
<% else %> <% else %>
<h5> <%= link_to root.name, index_url(root.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to root.name, index_url(root.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
<% end %> <% end %>
</div> </div>
@ -18,14 +18,14 @@
<div class="accordion-body pb-0 pe-0 pt-0"> <div class="accordion-body pb-0 pe-0 pt-0">
<% root.children.each do |sub1| %> <% root.children.each do |sub1| %>
<div class="accordion accordion-flush ps-20" id="secondLevelSubMenu"> <div class="accordion accordion-flush ps-20" id="secondLevelSubMenu">
<div class="accordion-item"> <div class="accordion-item bg-transparent">
<div class="accordion-header"> <div class="accordion-header bg-transparent">
<% if sub1.children.present? %> <% if sub1.children.present? %>
<button class="<%= sub1.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:third_sub_menu], sub1.id].join %>"> <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 %>">
<h5> <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub2 clickable-link" %>
</button> </button>
<% else %> <% else %>
<h5> <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to sub1.name, index_url(sub1.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub2 clickable-link" %>
<% end %> <% end %>
</div> </div>
@ -33,39 +33,39 @@
<div class="accordion-body pb-0 pe-0 pt-0"> <div class="accordion-body pb-0 pe-0 pt-0">
<% sub1.children.each do |sub2| %> <% sub1.children.each do |sub2| %>
<div class="accordion accordion-flush" id="thirdLevelSubMenu"> <div class="accordion accordion-flush" id="thirdLevelSubMenu">
<div class="accordion-item"> <div class="accordion-item bg-transparent">
<h5 class="accordion-header"> <div class="accordion-header bg-transparent">
<% if sub2.children.present? %> <% if sub2.children.present? %>
<button class="<%= sub2.children.present? ? 'accordion-button' : '' %> collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fourth_sub_menu], sub2.id].join %>"> <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 %>">
<h5> <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub3 clickable-link" %>
</button> </button>
<% else %> <% else %>
<h5> <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to sub2.name, index_url(sub2.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub3 clickable-link" %>
<% end %> <% end %>
</h5>
<div class="accordion-collapse collapse" id="<%= [opts[:fourth_sub_menu], sub2.id].join %>" data-bs-parent="#thirdLevelSubMenu"> <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"> <div class="accordion-body pb-0 pe-0 pt-0">
<% sub2.children.each do |sub3| %> <% sub2.children.each do |sub3| %>
<div class="accordion accordion-flush ps-20" id="fourthLevelSubMenu"> <div class="accordion accordion-flush ps-20" id="fourthLevelSubMenu">
<div class="accordion-item"> <div class="accordion-item bg-transparent">
<h5 class="accordion-header"> <div class="accordion-header">
<% if sub3.children.present? %> <% if sub3.children.present? %>
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], sub3.id].join %>"> <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#<%= [opts[:fifth_sub_menu], sub3.id].join %>">
<h5> <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub4 clickable-link" %>
</button> </button>
<% else%> <% else%>
<h5> <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> </h5> <%= link_to sub3.name, index_url(sub3.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub4 clickable-link" %>
<% end %> <% end %>
</h5>
<div class="accordion-collapse collapse" id="<%= [opts[:fifth_sub_menu], sub3.id].join %>" data-bs-parent="#fourthLevelSubMenu"> <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"> <div class="accordion-body pb-0 pe-0 pt-0">
<% sub3.children.each do |sub4| %> <% sub3.children.each do |sub4| %>
<div class="accordion-item"> <div class="accordion-item bg-transparent">
<h5 class="accordion-header"> <div class="accordion-header">
<%= link_to sub4.name, index_url(sub4.id), class: "accordion-link text-decoration-none text-dark clickable-link" %> <%= link_to sub4.name, index_url(sub4.id), class: "accordion-link text-white text-decoration-none text-dark d-block sub5 clickable-link" %>
</h5> </div>
</div> </div>
<% end if sub3.children.present? %> <% end if sub3.children.present? %>
</div> </div>

91
app/javascript/src/application/sidenav.scss
Unescape View File

@ -144,3 +144,94 @@
transform: translateX(50%); transform: translateX(50%);
} }
} }
.side-navbar {
width: 180px;
height: 100%;
position: fixed;
margin-left: -300px;
background-color: #100901;
transition: 0.5s;
}
.nav-link:active,
.nav-link:focus,
.nav-link:hover {
background-color: #ffffff26;
}
.my-container {
transition: 0.4s;
}
.active-nav {
margin-left: 0;
}
/* for main section */
.active-cont {
margin-left: 180px;
}
#menu-btn {
background-color: #100901;
color: #fff;
margin-left: -62px;
}
.accordion-body {
border: none !important;
padding: 0 !important;
}
.accordion-body .accordion-button {
border: none !important;
padding: 0 !important;
}
.accordion-button:focus {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
.sub1 {
padding-left: 22px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub2 {
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub3 {
padding-left: 60px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub4 {
padding-left: 80px;
padding-top: 10px;
padding-bottom: 10px;
}
.sub5 {
padding-left: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
.sidebar-body {
height: 100%;
overflow: scroll;
}
.sidebar-body svg {
color: #ffbca7 !important;
}

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

@ -15,7 +15,7 @@
<div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0' : 'row h-100 justify-content-center align-items-center' %>"> <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0' : 'row h-100 justify-content-center align-items-center' %>">
<% if current_user.present? %> <% if current_user.present? %>
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark"> <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
<%= render(SidenavComponent.new(current_user: current_user))%> <%= render(SidenavComponent.new(current_user: current_user))%>
</div> </div>
<% end %> <% end %>

Write Preview
Loading…
Cancel
Save