Metaunix/raven
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added better mobile navigation

Browse Source
This commit is contained in:
Gregory Ballantine 2023-01-17 02:15:00 -05:00
parent 57c5fb30c6
commit 2340dddd06
4 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/coffee/gargoyle.coffee
View File

@ -3,6 +3,7 @@ $(document).ready( ->
$('#nav-toggle').on('click', toggleNav) $('#nav-toggle').on('click', toggleNav)
if getCookie('navCollapsed') == 'true' if getCookie('navCollapsed') == 'true'
$('body').addClass('collapsed') $('body').addClass('collapsed')
$('#mobile-nav-toggle').on('click', toggleMobileNav)
) )
@ -15,6 +16,13 @@ toggleNav = () ->
bodyElem.addClass('collapsed') bodyElem.addClass('collapsed')
setCookie('navCollapsed', 'true') setCookie('navCollapsed', 'true')
toggleMobileNav = () ->
navElem = $('#mobile-nav')
if navElem.hasClass('expanded')
navElem.removeClass('expanded')
else
navElem.addClass('expanded')
getCookie = (cName) -> getCookie = (cName) ->
name = cName + '=' name = cName + '='
cDecoded = decodeURIComponent(document.cookie) cDecoded = decodeURIComponent(document.cookie)

85
assets/styles/kraken.scss
View File

@ -16,6 +16,87 @@ body{
box-shadow: $box-shadow-2; box-shadow: $box-shadow-2;
} }
@media screen and (max-width: 992px) {
body,
body.collapsed{
padding-left: 0 !important;
}
#main-nav{
display: none;
}
#mobile-nav{
display: block;
}
}
@media screen and (min-width: 993px) {
#mobile-nav{
display: none;
}
}
#mobile-nav{
width: calc(100% + 16px);
height: 55px;
margin-top: -8px;
margin-left: -8px;
margin-bottom: 15px;
background: #212121;
color: white;
font-size: 3rem;
box-shadow: $box-shadow-1;
overflow-y: hidden;
transition: height 230ms ease-in-out;
span{
display: inline-block;
width: 100%;
padding-top: 7px;
}
ul{
list-style: none;
li{
margin: 0;
border-bottom: 1px solid #999;
&:first-child{
border-top: 1px solid #999;
}
i{
display: none;
position: absolute;
right: 18px;
margin-top: 5px;
font-size: 3rem;
}
}
a{
display: block;
box-sizing: border-box;
width: 100%;
padding: 10px 15px;
color: limegreen;
font-size: 2.5rem;
text-decoration: none;
transition: all 230ms ease-in-out;
&:hover{
background: rgba(255, 255, 255, 0.1);
}
}
}
}
#mobile-nav.expanded{
height: 300px;
i{
display: inline;
}
}
#main-nav{ #main-nav{
position: fixed; position: fixed;
top: 0; top: 0;
@ -130,3 +211,7 @@ body.collapsed #main-nav{
font-style: italic; font-style: italic;
} }
} }
.u-text-centered{
text-align: center;
}

2
views/layout.erb
View File

@ -13,6 +13,8 @@
<body> <body>
<!-- Main navigation --> <!-- Main navigation -->
<%= erb :'layout/navbar', :locals => locals %> <%= erb :'layout/navbar', :locals => locals %>
<!-- Mobile navigatin -->
<%= erb :'layout/mobile_navbar', :locals => locals %>
<!-- Inventory search/actions bar --> <!-- Inventory search/actions bar -->
<%= erb :'layout/actions', :locals => locals %> <%= erb :'layout/actions', :locals => locals %>

9
views/layout/mobile_navbar.erb Normal file
View File

@ -0,0 +1,9 @@
<nav id="mobile-nav">
<span class="u-text-centered"><i id="mobile-nav-toggle" class="fa-solid fa-bars"></i></span>
<ul>
<li><a href="/">Dashboard <i class="fa-solid fa-gauge"></i></a></li>
<li><a href="/item/list">Items <i class="fa-solid fa-desktop"></i></a></li>
<li><a href="/license/list">Licenses <i class="fa-solid fa-floppy-disk"></i></a></li>
<li><a href="/ip-tracker">IP Tracker <i class="fa-solid fa-network-wired"></i></a></li>
</ul>
</nav>