piair/MsRewards-Reborn
2
2
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add sidebar toggling

Browse Source
This commit is contained in:
augustin64 2023-08-29 15:30:03 +02:00
parent fcc7f4d46e
commit 221921e3f3
2 changed files with 95 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
Flask/static/css/flask.css
View File

@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat'); @import url('https://fonts.googleapis.com/css?family=Montserrat');
/* Colors */
:root { :root {
--color-background0: #212121; --color-background0: #212121;
--color-background1: #212121; --color-background1: #212121;
@ -15,6 +16,13 @@
--color-transparent: rgba(0, 0, 0, 0); --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 { html {
text-align: center; text-align: center;
font-family: Montserrat; font-family: Montserrat;
@ -197,7 +205,6 @@ body {
border: 1px solid var(--color-border0); border: 1px solid var(--color-border0);
border-radius: 5px; border-radius: 5px;
padding: 20px; padding: 20px;
width: 80%;
height: 80%; height: 80%;
} }
@ -318,3 +325,78 @@ input[type="time"]::-webkit-calendar-picker-indicator {
input[type="time"]::-webkit-calendar-picker-indicator:hover { input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1; 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;
}

13
Flask/templates/base.html
View File

@ -12,6 +12,17 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<input id="slide-sidebar" type="checkbox" role="button"/>
<label for="slide-sidebar">
<div id="slide">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 6l16 0"></path>
<path d="M4 12l16 0"></path>
<path d="M4 18l16 0"></path>
</svg>
</div>
</label>
<div class="left-pannel"> <div class="left-pannel">
{% block left_pannel %} {% block left_pannel %}
{% endblock %} {% endblock %}
@ -21,7 +32,7 @@
{% endblock %} {% endblock %}
</div> </div>
</div> </div>
<div class="footer">Version not detected yet</div> <div class="footer">v6.2.11</div>
</body> </body>
</html> </html>