Make the dashboard more mobile friendly

This commit is contained in:
Donald Cheng Hong Zou
2022-04-11 20:01:29 -04:00
parent dcdd4aec85
commit a053504bb8
13 changed files with 585 additions and 384 deletions

View File

@@ -1,3 +1,76 @@
<div class="bottomNavWrapper"></div>
<div class="bottom">
<nav class="navbar navbar-dark fixed-bottom bg-light flex-md-nowrap p-0 bottomNav">
<div class="bottomNavContainer" style="z-index: 1000;">
<div class="bottomNavButton bottomNavHome">
<i class="bi bi-house"></i>
Home
</div>
<div class="bottomNavButton bottomNavConfigs">
<i class="bi bi-files"></i>
Configs
<div class="subNav bg-light animate__animated">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Configurations</span>
</h6>
<ul class="nav flex-column">
{% for i in conf%}
<li class="nav-item"><a class="nav-link nav-conf-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}" data-conf-id="{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
{%endfor%}
</ul>
<hr>
</div>
</div>
<div class="bottomNavButton bottomNavSettings">
<i class="bi bi-gear"></i>
Settings
</div>
<div class="bottomNavButton bottomNavMore">
<i class="bi bi-justify"></i>
More
<div class="subNav bg-light animate__animated">
<ul class="nav flex-column">
{% if session['update'] == "true" %}
<li class="nav-item sb-update-li">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>New Update</span>
</h6>
<a class="nav-link sb-update-url text-success" href="https://github.com/donaldzou/WGDashboard#-how-to-update-the-dashboard">
{{ session['updateInfo']['name'] }} -
<code>{{ session['updateInfo']['tag_name'] }}</code>
</a>
</li>
{% endif %}
</ul>
<hr>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Tools</span>
</h6>
<ul class="nav flex-column">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#ping_modal" href="#">Ping</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#traceroute_modal" href="#">Traceroute</a></li>
</ul>
</ul>
<hr>
{% if "username" in session %}
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link text-danger" href="/signout" style="font-weight: bold">Sign Out</a></li>
</ul>
{% endif %}
<ul class="nav flex-column">
<li class="nav-item"><a href="https://github.com/donaldzou/WGDashboard/releases/tag/{{ session['dashboard_version'] }}"><small class="nav-link text-muted">{{ session['dashboard_version'] }}</small></a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="row">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
@@ -9,7 +82,13 @@
{% endif %}
{% if session['update'] == "true" %}
<li class="nav-item sb-update-li">
<a class="nav-link sb-update-url" href="https://github.com/donaldzou/WGDashboard#-how-to-update-the-dashboard">New Update Available!<span class="dot dot-running"></span></a>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>New Update</span>
</h6>
<a class="nav-link sb-update-url text-success" href="https://github.com/donaldzou/WGDashboard#-how-to-update-the-dashboard">
{{ session['updateInfo']['name'] }} -
<code>{{ session['updateInfo']['tag_name'] }}</code>
</a>
</li>
{% endif %}
</ul>