From 221921e3f3e2ce940ab503a8ca76f7bf2e5267a1 Mon Sep 17 00:00:00 2001 From: augustin64 Date: Tue, 29 Aug 2023 15:30:03 +0200 Subject: [PATCH] Add sidebar toggling --- Flask/static/css/flask.css | 84 +++++++++++++++++++++++++++++++++++++- Flask/templates/base.html | 13 +++++- 2 files changed, 95 insertions(+), 2 deletions(-) diff --git a/Flask/static/css/flask.css b/Flask/static/css/flask.css index 4d977b7..0164a00 100644 --- a/Flask/static/css/flask.css +++ b/Flask/static/css/flask.css @@ -1,5 +1,6 @@ @import url('https://fonts.googleapis.com/css?family=Montserrat'); +/* Colors */ :root { --color-background0: #212121; --color-background1: #212121; @@ -15,6 +16,13 @@ --color-transparent: rgba(0, 0, 0, 0); } +/* Sidebar size is the left panel size when opened */ +:root { + --sidebar-size: max(20vw, 160px); + --sidebar-sz-plus10: calc(var(--sidebar-size) + 10px); + --sidebar-sz-plus30: calc(var(--sidebar-size) + 30px); +} + html { text-align: center; font-family: Montserrat; @@ -197,7 +205,6 @@ body { border: 1px solid var(--color-border0); border-radius: 5px; padding: 20px; - width: 80%; height: 80%; } @@ -318,3 +325,78 @@ input[type="time"]::-webkit-calendar-picker-indicator { input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } + + +/** Sidebar stuff */ +#slide-sidebar { + display: none; +} + +label[for="slide-sidebar"] { + all: initial; + z-index: 1; /* Always on top */ + position: absolute; + top: 20px; + left: var(--sidebar-sz-plus30); + + -moz-transition: left 0.5s ease; + transition: left 0.5s ease; + background: var(--color-transparent); +} + +label[for="slide-sidebar"]:after { + all:unset; +} + +input:checked + label[for="slide-sidebar"] { + background: var(--color-transparent); +} + +#slide { + border-style: solid; + border-radius: 4px; + border-width: 1px; + border-color: var(--color-border0); + + color: var(--color-text); + background-color: var(--color-background0); + padding: 8px 8px 2px 8px; +} + +/* When opened behaviour */ +.left-pannel { + width: var(--sidebar-size); + position: fixed; + top: 0; + left: 0; + bottom: 0; +} + +.content { + position: absolute; + top: 0; + left: var(--sidebar-sz-plus10); + right: 0; + bottom: 0; + + -moz-transition: left 0.5s ease; + transition: left 0.5s ease; + + padding: 0 25px; + background-color: var(--color-background0); /* we need no transparency when switching */ + overflow: hidden; +} + +/* When closed behaviour */ +input:checked#slide-sidebar~label { + left: 20px; +} + +input:checked#slide-sidebar~.left-pannel { + display: none; + transition: display 0s 0.5s; +} + +input:checked#slide-sidebar~.content { + left: 0; +} \ No newline at end of file diff --git a/Flask/templates/base.html b/Flask/templates/base.html index 50cf062..8ae9b08 100644 --- a/Flask/templates/base.html +++ b/Flask/templates/base.html @@ -12,6 +12,17 @@
+ +
{% block left_pannel %} {% endblock %} @@ -21,7 +32,7 @@ {% endblock %}
-
Version not detected yet
+
v6.2.11