3 Commits

6 changed files with 138 additions and 0 deletions

View File

@ -1,6 +1,9 @@
$(document).ready( ->
$('#nav-toggle').on('click', toggleNav)
if getCookie('navCollapsed') == 'true'
$('body').addClass('collapsed')
$('#mobile-nav-toggle').on('click', toggleMobileNav)
)
@ -8,5 +11,33 @@ toggleNav = () ->
bodyElem = $('body')
if bodyElem.hasClass('collapsed')
bodyElem.removeClass('collapsed')
setCookie('navCollapsed', 'false')
else
bodyElem.addClass('collapsed')
setCookie('navCollapsed', 'true')
toggleMobileNav = () ->
navElem = $('#mobile-nav')
if navElem.hasClass('expanded')
navElem.removeClass('expanded')
else
navElem.addClass('expanded')
getCookie = (cName) ->
name = cName + '='
cDecoded = decodeURIComponent(document.cookie)
#to be careful
cArr = cDecoded.split('; ')
res = undefined
cArr.forEach (val) ->
if val.indexOf(name) == 0
res = val.substring(name.length)
return
res
setCookie = (cName, cValue, expDays = 30) ->
date = new Date
date.setTime date.getTime() + expDays * 24 * 60 * 60 * 1000
expires = 'expires=' + date.toUTCString()
document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
return

View File

@ -16,6 +16,87 @@ body{
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{
position: fixed;
top: 0;
@ -130,3 +211,7 @@ body.collapsed #main-nav{
font-style: italic;
}
}
.u-text-centered{
text-align: center;
}

View File

@ -28,4 +28,11 @@ namespace '/ip-tracker' do
redirect '/ip-tracker'
end
get '/delete/:ip_id' do
ip = IpAddress.where(id: params[:ip_id]).first()
ip.delete()
redirect '/ip-tracker'
end
end

View File

@ -8,6 +8,7 @@
<th>Address</th>
<th>DNS Name</th>
<th>Comments</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@ -16,6 +17,9 @@
<td><%= ip.address %></td>
<td><%= ip.dns_name %></td>
<td><%= ip.comment %></td>
<td>
<a href="/ip-tracker/delete/<%= ip.id %>"><i class="fa-solid fa-trash"></i></a>
</td>
</tr>
<% end %>
</tbody>

View File

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

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>