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;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
#webContent {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.light-tooltip {
|
||||
--bs-tooltip-bg: #04385c;
|
||||
}
|
||||
|
||||
#sidebar .nav-item > a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
html, body {
|
||||
overflow: hidden !important;
|
||||
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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -6,10 +7,13 @@
|
||||
<title>{% block title %}{% endblock title %}Angling Trust Results</title>
|
||||
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'icons/font/bootstrap-icons.min.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/index.css' %}">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
|
||||
<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' %}
|
||||
{% block style %}
|
||||
{% endblock style %}
|
||||
@ -17,40 +21,49 @@
|
||||
<body class="font-helvetica mw-100">
|
||||
|
||||
<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">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 text-reset text-decoration-none px-2">
|
||||
<aside id="sidebar" class="shadow-lg font-raleway">
|
||||
<a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
|
||||
<img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
|
||||
</a>
|
||||
<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">
|
||||
<a class="nav-link text-reset d-flex align-items-center py-3" href="/">
|
||||
<i class="bi bi-house-fill fs-4 mx-auto"></i>
|
||||
<a class="nav-link py-3" href="/">
|
||||
<i class="bi bi-house-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<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">
|
||||
<i class="bi bi-people-fill fs-4 mx-auto"></i>
|
||||
<a class="nav-link py-3" href="/anglers">
|
||||
<i class="bi bi-people-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Anglers</span>
|
||||
</a>
|
||||
</li>
|
||||
<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="#">
|
||||
<i class="bi bi-award-fill fs-4 mx-auto"></i>
|
||||
<a class="nav-link py-3" href="#">
|
||||
<i class="bi bi-award-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Matches</span>
|
||||
</a>
|
||||
</li>
|
||||
<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="#">
|
||||
<i class="bi bi-clipboard-data-fill fs-4 mx-auto"></i>
|
||||
<a class="nav-link py-3" href="#">
|
||||
<i class="bi bi-clipboard-data-fill fs-4"></i>
|
||||
<span class="sidebar-item-text">Scoreboard</span>
|
||||
</a>
|
||||
</li>
|
||||
</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">
|
||||
<a class="nav-link text-reset d-flex align-items-center py-3" href="/admin">
|
||||
<i class="bi bi-person-fill-gear fs-4 mx-auto"></i>
|
||||
<a class="nav-link py-3" href="/admin">
|
||||
<i class="bi bi-person-fill-gear fs-4"></i>
|
||||
<span class="sidebar-item-text">Administration</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mx-2">
|
||||
<button class="sidebar-collapse-button">
|
||||
<i class="bi bi-chevron-double-right"></i>
|
||||
</button>
|
||||
</aside>
|
||||
<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;">
|
||||
@ -73,6 +86,7 @@
|
||||
<script src="{% static 'js/jquery.validate.min.js' %}"></script>
|
||||
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
||||
<script src="{% static 'js/custom.js' %}"></script>
|
||||
<script src="{% static 'js/base.js' %}"></script>
|
||||
{% block scripts %}
|
||||
{% endblock scripts %}
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user