Dynamic sidebar implementation
This commit is contained in:
Corban-Lee
parent
4c09b8470d
commit
0e4de968db
@ -124,22 +124,10 @@ input[type='radio']:checked {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#webContent {
|
|
||||||
margin-left: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light-tooltip {
|
.light-tooltip {
|
||||||
--bs-tooltip-bg: #04385c;
|
--bs-tooltip-bg: #04385c;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar .nav-item > a:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
|
|||||||
17
src/static/js/base.js
Normal file
17
src/static/js/base.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
$(".sidebar-collapse-button").on("click", function () {
|
||||||
|
|
||||||
|
const sidebar = $("#sidebar")
|
||||||
|
const content = $("#webContent")
|
||||||
|
const collapsed = !sidebar.hasClass("sidebar-enlarged");
|
||||||
|
|
||||||
|
if (collapsed) {
|
||||||
|
sidebar.addClass("sidebar-enlarged");
|
||||||
|
sidebar.find(".nav-item").tooltip("disable");
|
||||||
|
content.addClass("webcontent-collapsed")
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
sidebar.removeClass("sidebar-enlarged");
|
||||||
|
sidebar.find(".nav-item").tooltip("enable");
|
||||||
|
content.removeClass("webcontent-collapsed")
|
||||||
|
}
|
||||||
|
});
|
||||||
105
src/static/scss/base.scss
Normal file
105
src/static/scss/base.scss
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
#webContent {
|
||||||
|
margin-left: 80px;
|
||||||
|
transition: margin 400ms ease-in-out;
|
||||||
|
|
||||||
|
&.webcontent-collapsed {
|
||||||
|
margin-left: 280px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background-color: #04385c;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 3;
|
||||||
|
padding: 1rem 0;
|
||||||
|
|
||||||
|
transition: width 400ms ease-in-out;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.sidebar-collapse-button {
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
transition: transform 200ms ease-in-out;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sidebar-enlarged {
|
||||||
|
width: 280px !important;
|
||||||
|
|
||||||
|
.sidebar-collapse-button > i { transform: rotate(-180deg); }
|
||||||
|
|
||||||
|
a.nav-link {
|
||||||
|
text-align: start !important;
|
||||||
|
|
||||||
|
i.bi {
|
||||||
|
margin: 0 1rem 0 .5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.sidebar-item-text {
|
||||||
|
display: inline !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.sidebar-enlarged) {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-brand {
|
||||||
|
|
||||||
|
max-width: 120px;
|
||||||
|
align-self: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sidebar-items {
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: auto;
|
||||||
|
|
||||||
|
li.nav-item {
|
||||||
|
|
||||||
|
a.nav-link {
|
||||||
|
|
||||||
|
color: inherit;
|
||||||
|
transition: all 200ms;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover { background-color: rgba(0, 0, 0, 0.15); }
|
||||||
|
|
||||||
|
i.bi {
|
||||||
|
// transition: all 200ms ease-in-out;
|
||||||
|
// margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.sidebar-item-text {
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
{% load compress %}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@ -6,10 +7,13 @@
|
|||||||
<title>{% block title %}{% endblock title %}Angling Trust Results</title>
|
<title>{% block title %}{% endblock title %}Angling Trust Results</title>
|
||||||
|
|
||||||
{% load static %}
|
{% load static %}
|
||||||
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
|
||||||
<link rel="stylesheet" href="{% static 'icons/font/bootstrap-icons.min.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
|
||||||
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
|
||||||
<link rel="stylesheet" href="{% static 'css/index.css' %}">
|
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" media="screen">
|
||||||
|
{% compress css %}
|
||||||
|
<link rel="stylesheet" type="text/x-scss" href="{% static 'scss/base.scss' %}" media="screen">
|
||||||
|
{% endcompress %}
|
||||||
{% include 'fonts.html' %}
|
{% include 'fonts.html' %}
|
||||||
{% block style %}
|
{% block style %}
|
||||||
{% endblock style %}
|
{% endblock style %}
|
||||||
@ -17,40 +21,49 @@
|
|||||||
<body class="font-helvetica mw-100">
|
<body class="font-helvetica mw-100">
|
||||||
|
|
||||||
<div class="d-flex align-content-stretch h-100 align-self-stretch">
|
<div class="d-flex align-content-stretch h-100 align-self-stretch">
|
||||||
<aside class="company-bg text-white d-flex flex-column flex-shrink-0 py-3 position-fixed h-100 shadow-lg z-3" id="sidebar">
|
<aside id="sidebar" class="shadow-lg font-raleway">
|
||||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 text-reset text-decoration-none px-2">
|
<a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
|
||||||
<img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
|
<img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
|
||||||
</a>
|
</a>
|
||||||
<hr class="mx-2">
|
<hr class="mx-2">
|
||||||
<ul class="nav nav-pills flex-column mb-auto">
|
<ul class="sidebar-items nav nav-pills">
|
||||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
|
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
|
||||||
<a class="nav-link text-reset d-flex align-items-center py-3" href="/">
|
<a class="nav-link py-3" href="/">
|
||||||
<i class="bi bi-house-fill fs-4 mx-auto"></i>
|
<i class="bi bi-house-fill fs-4"></i>
|
||||||
|
<span class="sidebar-item-text">Home</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
|
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
|
||||||
<a class="nav-link text-reset d-flex align-items-center py-3" href="/anglers">
|
<a class="nav-link py-3" href="/anglers">
|
||||||
<i class="bi bi-people-fill fs-4 mx-auto"></i>
|
<i class="bi bi-people-fill fs-4"></i>
|
||||||
|
<span class="sidebar-item-text">Anglers</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
|
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
|
||||||
<a class="nav-link text-reset d-flex align-items-center py-3" href="#">
|
<a class="nav-link py-3" href="#">
|
||||||
<i class="bi bi-award-fill fs-4 mx-auto"></i>
|
<i class="bi bi-award-fill fs-4"></i>
|
||||||
|
<span class="sidebar-item-text">Matches</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
|
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
|
||||||
<a class="nav-link text-reset d-flex align-items-center py-3" href="#">
|
<a class="nav-link py-3" href="#">
|
||||||
<i class="bi bi-clipboard-data-fill fs-4 mx-auto"></i>
|
<i class="bi bi-clipboard-data-fill fs-4"></i>
|
||||||
|
<span class="sidebar-item-text">Scoreboard</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav nav-pills flex-column">
|
<ul class="sidebar-items nav nav-pills mb-0">
|
||||||
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
|
<li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
|
||||||
<a class="nav-link text-reset d-flex align-items-center py-3" href="/admin">
|
<a class="nav-link py-3" href="/admin">
|
||||||
<i class="bi bi-person-fill-gear fs-4 mx-auto"></i>
|
<i class="bi bi-person-fill-gear fs-4"></i>
|
||||||
|
<span class="sidebar-item-text">Administration</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<hr class="mx-2">
|
||||||
|
<button class="sidebar-collapse-button">
|
||||||
|
<i class="bi bi-chevron-double-right"></i>
|
||||||
|
</button>
|
||||||
</aside>
|
</aside>
|
||||||
<div class="flex-grow-1 d-flex flex-column" id="webContent">
|
<div class="flex-grow-1 d-flex flex-column" id="webContent">
|
||||||
<div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: flex;">
|
<div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: flex;">
|
||||||
@ -73,6 +86,7 @@
|
|||||||
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
|
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
|
||||||
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
||||||
<script src="{% static 'js/custom.js' %}"></script>
|
<script src="{% static 'js/custom.js' %}"></script>
|
||||||
|
<script src="{% static 'js/base.js' %}"></script>
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
{% endblock scripts %}
|
{% endblock scripts %}
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user