github/MIND
1
1
Fork 0
mirror of https://github.com/Casvt/MIND.git synced 2026-02-19 11:54:46 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactored and refined navigation bar

Browse Source
This commit is contained in:
CasVT
2025-06-23 17:43:48 +02:00
parent 8fced3c978
commit b583250fc7
5 changed files with 138 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/static/css/general.css
View File

@@ -6,6 +6,7 @@
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
font-size: 1rem;
-webkit-tap-highlight-color: transparent;
}
:root {
@@ -22,9 +23,12 @@
--header-height: 4.5rem;
--nav-width: 4rem;
--nav-show-speed: 300ms;
--nav-button-spacing: .5rem;
--scrollbar-width: 12px;
--rem-clamp: clamp(.5rem, 2vw, 1rem);
--dyn-spacing: clamp(.5rem, 2vw, 1rem);
--playful-curve: cubic-bezier(0.87, 0, 0.13, 1);
--default-shadow:
0 1px 2px 0 rgb(0 0 0 / 60%),
0 2px 6px 2px rgb(0 0 0 / 30%);
@@ -104,10 +108,8 @@ table {
display: block !important;
}
.error-icon path,
.error-icon rect,
.error-container path,
.error-container rect {
.error-icon :where(path, rect),
.error-container :where(path, rect) {
fill: var(--color-error) !important;
}
@@ -145,10 +147,10 @@ svg.spinning {
transition: background-color 150ms ease-in-out;
font-size: 1rem;
}
:where(input, textarea, select, button, div).input-style:focus-within {
border-color: var(--color-light-gray);
&:focus-within {
border-color: var(--color-light-gray);
}
}
:where(input, textarea, select, button).input-style,
@@ -397,7 +399,7 @@ header {
display: flex;
align-items: center;
padding: 1rem;
padding: .25rem calc(var(--dyn-spacing) + .75rem);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
background-color: var(--color-gray);
@@ -613,4 +615,4 @@ dialog[open]::backdrop {
opacity: 0;
}
}
}
}

4
frontend/static/css/library.css
View File

@@ -191,10 +191,6 @@ button.entry.fit {
}
@media (max-width: 543px) {
header > div {
transform: translateX(0);
}
.tab-selector > label {
flex: 1 0 25%;
}

134
frontend/static/css/reminders.css
View File

@@ -2,114 +2,130 @@
/* Nav collapse button */
/* */
header > div {
height: 100%;
transform: translateX(-2.6rem);
transform: translateX(-3.8rem);
display: flex;
align-items: center;
gap: 1rem;
transition: transform .3s ease-in-out;
transition: transform var(--nav-show-speed) var(--playful-curve);
}
#toggle-nav {
--height: 1.5rem;
height: var(--height);
height: 2.5rem;
width: 2.5rem;
background-color: transparent;
}
#toggle-nav svg {
height: var(--height);
width: var(--height);
height: 100%;
width: auto;
padding: 0.45rem;
}
#toggle-nav:hover svg :where(path, rect) {
animation: flash-nav-colour .2s forwards;
}
@keyframes flash-nav-colour {
0% {
fill: var(--color-light);
}
50% {
fill: var(--color-light-gray);
}
100% {
fill: var(--color-light);
}
}
header img:hover {
cursor: pointer;
}
/* */
/* Nav collapse */
/* */
.nav-divider {
height: calc(100% - var(--header-height));
display: grid;
grid-template-columns: calc(var(--nav-width) + var(--dyn-spacing)) 1fr;
transition: grid-template-columns var(--nav-show-speed) var(--playful-curve);
}
.nav-container {
height: 100%;
overflow-x: hidden;
display: flex;
justify-content: flex-end;
}
/* */
/* Nav */
/* */
.nav-divider {
position: relative;
height: calc(100% - var(--header-height));
display: flex;
padding-block: var(--rem-clamp);
}
body:has(#nav-switch:checked) .nav-divider > nav {
left: var(--rem-clamp);
}
body:has(#nav-switch:checked) .nav-divider > .window-container {
margin-left: calc(var(--nav-width) + var(--rem-clamp));
}
nav {
--padding: .5rem;
z-index: 1;
position: absolute;
left: var(--rem-clamp);
height: calc(100% - (2 * var(--rem-clamp)));
height: calc(100% - 2 * var(--dyn-spacing));
width: var(--nav-width);
margin: var(--dyn-spacing);
margin-right: 0rem;
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: var(--padding);
gap: var(--nav-button-spacing);
overflow-y: auto;
padding: var(--padding);
padding: var(--nav-button-spacing);
border-radius: 4px;
background-color: var(--color-gray);
transition: left .3s ease-in-out;
&::-webkit-scrollbar {
width: 0rem;
}
}
nav > div {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--padding);
gap: var(--nav-button-spacing);
}
nav > div > button {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: .5rem;
border: 0;
padding: var(--nav-button-spacing);
border-radius: 4px;
background-color: var(--color-dark);
color: var(--color-light);
transition: background-color .1s ease-in-out;
}
nav > div > button:hover {
background-color: var(--color-gray);
}
nav > div > button svg {
height: 1.8rem;
width: 2rem;
transition: background-color 150ms ease-in-out;
&:hover {
background-color: var(--color-light-gray);
}
& svg {
height: 1.8rem;
width: 2rem;
}
}
/* */
/* Window management */
/* */
.window-container {
margin-left: calc(4rem + var(--rem-clamp));
width: 100%;
display: flex;
overflow: hidden;
transition: margin-left .3s ease-in-out;
}
.window-container > :where(#home, .extra-window-container) {
@@ -147,7 +163,7 @@ nav > div > button svg {
/* Styling extra window */
/* */
.extra-window-container > div {
padding: var(--rem-clamp);
padding: var(--dyn-spacing);
}
.extra-window-container > div > h2 {
@@ -164,12 +180,12 @@ nav > div > button svg {
text-align: center;
}
@media (max-width: 543px) {
.window-container {
margin-left: 0;
@media (max-width: 34rem) {
header > div {
transform: translateX(0);
}
nav {
left: -100%;
body:has(#nav-toggle:checked) .nav-divider {
grid-template-columns: 0 auto;
}
}

2
frontend/static/js/reminders.js
View File

@@ -36,3 +36,5 @@ function showWindow(id) {
}
checkLogin()
document.querySelector("header img").onclick = e => showWindow("home")

92
frontend/templates/reminders.html
View File

@@ -31,7 +31,9 @@
<title>Reminders - MIND</title>
</head>
<body>
<input type="checkbox" class="hidden" id="wide-toggle">
<input type="checkbox" id="nav-toggle" class="hidden" checked>
<input type="checkbox" id="wide-toggle" class="hidden">
<div class="hidden element-storage">
<table>
<tbody>
@@ -44,7 +46,7 @@
</td>
<td class="action-column">
<button data-type="edit" title="Edit">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<g>
<g>
<path d="M22.94,1.06a3.626,3.626,0,0,0-5.124,0L0,18.876V24H5.124L22.94,6.184A3.627,3.627,0,0,0,22.94,1.06ZM4.3,22H2V19.7L15.31,6.4l2.3,2.3ZM21.526,4.77,19.019,7.277l-2.295-2.3L19.23,2.474a1.624,1.624,0,0,1,2.3,2.3Z"></path>
@@ -53,7 +55,7 @@
</svg>
</button>
<button data-type="save" title="Save Edits">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<g>
<path d="M12,10a4,4,0,1,0,4,4A4,4,0,0,0,12,10Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,16Z"></path>
<path d="M22.536,4.122,19.878,1.464A4.966,4.966,0,0,0,16.343,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V7.657A4.966,4.966,0,0,0,22.536,4.122ZM17,2.08V3a3,3,0,0,1-3,3H10A3,3,0,0,1,7,3V2h9.343A2.953,2.953,0,0,1,17,2.08ZM22,19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2V3a5.006,5.006,0,0,0,5,5h4a4.991,4.991,0,0,0,4.962-4.624l2.16,2.16A3.02,3.02,0,0,1,22,7.657Z"></path>
@@ -61,7 +63,7 @@
</svg>
</button>
<button data-type="delete" title="Delete">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<g>
<g>
<path d="M22,4H17V2a2,2,0,0,0-2-2H9A2,2,0,0,0,7,2V4H2V6H4V21a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V6h2ZM9,2h6V4H9Zm9,19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V6H18Z"></path>
@@ -79,9 +81,8 @@
<header>
<div>
<input type="checkbox" id="nav-switch" class="hidden">
<label for="nav-switch" id="toggle-nav">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<label for="nav-toggle" id="toggle-nav">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<g>
<rect y="11" width="24" height="2" rx="1"></rect>
<rect y="4" width="24" height="2" rx="1"></rect>
@@ -90,46 +91,49 @@
</svg>
</label>
<img src="{{ url_for('static', filename='img/favicon.svg') }}" alt="">
<h1>MIND</h1>
</div>
</header>
<div class="nav-divider">
<nav>
<div>
<button id="home-button" aria-label="Home" title="Home">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<g>
<path d="M23.121,9.069,15.536,1.483a5.008,5.008,0,0,0-7.072,0L.879,9.069A2.978,2.978,0,0,0,0,11.19v9.817a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V11.19A2.978,2.978,0,0,0,23.121,9.069ZM15,22.007H9V18.073a3,3,0,0,1,6,0Zm7-1a1,1,0,0,1-1,1H17V18.073a5,5,0,0,0-10,0v3.934H3a1,1,0,0,1-1-1V11.19a1.008,1.008,0,0,1,.293-.707L9.878,2.9a3.008,3.008,0,0,1,4.244,0l7.585,7.586A1.008,1.008,0,0,1,22,11.19Z"></path>
</g>
</svg>
</button>
<button id="notification-services-button" aria-label="Notification Services" title="Notification Services">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<g>
<path d="M23.83,14.12l-1.56-5.84c-.88-3.15-3.47-5.48-6.58-6.11-.01-.01-.02-.03-.03-.04-1.57-1.38-3.58-2.14-5.66-2.14C5.94,0,2.5,2.76,1.63,6.68L.11,12.35c-.31,1.38,.03,2.81,.91,3.91,.89,1.1,2.21,1.74,3.62,1.74h.19c.06,.09,.12,.18,.19,.26,.89,1.1,2.21,1.74,3.62,1.74h.96c.23,2.24,2.1,4,4.4,4s4.17-1.76,4.4-4h.95c1.46,0,2.81-.67,3.7-1.84,.88-1.17,1.17-2.64,.78-4.04Zm-21.25,.89c-.5-.63-.69-1.44-.53-2.19l1.52-5.67c.67-3.04,3.32-5.16,6.43-5.16,.62,0,1.22,.11,1.8,.28-3.05,.8-5.46,3.22-6.17,6.4l-1.52,5.67c-.12,.53-.14,1.06-.08,1.58-.57-.13-1.08-.45-1.45-.92Zm11.42,6.99c-1.2,0-2.19-.86-2.4-2h4.8c-.21,1.14-1.2,2-2.4,2Zm7.46-5.04c-.5,.66-1.27,1.04-2.11,1.04H8.64c-.81,0-1.56-.36-2.06-.99-.5-.63-.69-1.44-.53-2.19l1.52-5.67c.67-3.04,3.32-5.16,6.43-5.16,2.95,0,5.55,1.98,6.34,4.81l1.56,5.84c.22,.8,.06,1.64-.44,2.31Z"></path>
</g>
</svg>
</button>
<button id="settings-button" aria-label="Settings" title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<g>
<path d="M1,4.75H3.736a3.728,3.728,0,0,0,7.195,0H23a1,1,0,0,0,0-2H10.931a3.728,3.728,0,0,0-7.195,0H1a1,1,0,0,0,0,2ZM7.333,2a1.75,1.75,0,1,1-1.75,1.75A1.752,1.752,0,0,1,7.333,2Z"></path>
<path d="M23,11H20.264a3.727,3.727,0,0,0-7.194,0H1a1,1,0,0,0,0,2H13.07a3.727,3.727,0,0,0,7.194,0H23a1,1,0,0,0,0-2Zm-6.333,2.75A1.75,1.75,0,1,1,18.417,12,1.752,1.752,0,0,1,16.667,13.75Z"></path>
<path d="M23,19.25H10.931a3.728,3.728,0,0,0-7.195,0H1a1,1,0,0,0,0,2H3.736a3.728,3.728,0,0,0,7.195,0H23a1,1,0,0,0,0-2ZM7.333,22a1.75,1.75,0,1,1,1.75-1.75A1.753,1.753,0,0,1,7.333,22Z"></path>
</g>
</svg>
</button>
</div>
<div>
<button id="logout-button" aria-label="Log out of MIND" title="Logout">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<g>
<path d="M11.476,15a1,1,0,0,0-1,1v3a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2H7.476a3,3,0,0,1,3,3V8a1,1,0,0,0,2,0V5a5.006,5.006,0,0,0-5-5H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H7.476a5.006,5.006,0,0,0,5-5V16A1,1,0,0,0,11.476,15Z"></path>
<path d="M22.867,9.879,18.281,5.293a1,1,0,1,0-1.414,1.414l4.262,4.263L6,11a1,1,0,0,0,0,2H6l15.188-.031-4.323,4.324a1,1,0,1,0,1.414,1.414l4.586-4.586A3,3,0,0,0,22.867,9.879Z"></path>
</g>
</svg>
</button>
</div>
</nav>
<div class="nav-container">
<nav>
<div>
<button id="home-button" aria-label="Home" title="Home">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<g>
<path d="M23.121,9.069,15.536,1.483a5.008,5.008,0,0,0-7.072,0L.879,9.069A2.978,2.978,0,0,0,0,11.19v9.817a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V11.19A2.978,2.978,0,0,0,23.121,9.069ZM15,22.007H9V18.073a3,3,0,0,1,6,0Zm7-1a1,1,0,0,1-1,1H17V18.073a5,5,0,0,0-10,0v3.934H3a1,1,0,0,1-1-1V11.19a1.008,1.008,0,0,1,.293-.707L9.878,2.9a3.008,3.008,0,0,1,4.244,0l7.585,7.586A1.008,1.008,0,0,1,22,11.19Z"></path>
</g>
</svg>
</button>
<button id="notification-services-button" aria-label="Notification Services" title="Notification Services">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<g>
<path d="M23.83,14.12l-1.56-5.84c-.88-3.15-3.47-5.48-6.58-6.11-.01-.01-.02-.03-.03-.04-1.57-1.38-3.58-2.14-5.66-2.14C5.94,0,2.5,2.76,1.63,6.68L.11,12.35c-.31,1.38,.03,2.81,.91,3.91,.89,1.1,2.21,1.74,3.62,1.74h.19c.06,.09,.12,.18,.19,.26,.89,1.1,2.21,1.74,3.62,1.74h.96c.23,2.24,2.1,4,4.4,4s4.17-1.76,4.4-4h.95c1.46,0,2.81-.67,3.7-1.84,.88-1.17,1.17-2.64,.78-4.04Zm-21.25,.89c-.5-.63-.69-1.44-.53-2.19l1.52-5.67c.67-3.04,3.32-5.16,6.43-5.16,.62,0,1.22,.11,1.8,.28-3.05,.8-5.46,3.22-6.17,6.4l-1.52,5.67c-.12,.53-.14,1.06-.08,1.58-.57-.13-1.08-.45-1.45-.92Zm11.42,6.99c-1.2,0-2.19-.86-2.4-2h4.8c-.21,1.14-1.2,2-2.4,2Zm7.46-5.04c-.5,.66-1.27,1.04-2.11,1.04H8.64c-.81,0-1.56-.36-2.06-.99-.5-.63-.69-1.44-.53-2.19l1.52-5.67c.67-3.04,3.32-5.16,6.43-5.16,2.95,0,5.55,1.98,6.34,4.81l1.56,5.84c.22,.8,.06,1.64-.44,2.31Z"></path>
</g>
</svg>
</button>
<button id="settings-button" aria-label="Settings" title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<g>
<path d="M1,4.75H3.736a3.728,3.728,0,0,0,7.195,0H23a1,1,0,0,0,0-2H10.931a3.728,3.728,0,0,0-7.195,0H1a1,1,0,0,0,0,2ZM7.333,2a1.75,1.75,0,1,1-1.75,1.75A1.752,1.752,0,0,1,7.333,2Z"></path>
<path d="M23,11H20.264a3.727,3.727,0,0,0-7.194,0H1a1,1,0,0,0,0,2H13.07a3.727,3.727,0,0,0,7.194,0H23a1,1,0,0,0,0-2Zm-6.333,2.75A1.75,1.75,0,1,1,18.417,12,1.752,1.752,0,0,1,16.667,13.75Z"></path>
<path d="M23,19.25H10.931a3.728,3.728,0,0,0-7.195,0H1a1,1,0,0,0,0,2H3.736a3.728,3.728,0,0,0,7.195,0H23a1,1,0,0,0,0-2ZM7.333,22a1.75,1.75,0,1,1,1.75-1.75A1.753,1.753,0,0,1,7.333,22Z"></path>
</g>
</svg>
</button>
</div>
<div>
<button id="logout-button" aria-label="Log out of MIND" title="Logout">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
<g>
<path d="M11.476,15a1,1,0,0,0-1,1v3a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2H7.476a3,3,0,0,1,3,3V8a1,1,0,0,0,2,0V5a5.006,5.006,0,0,0-5-5H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H7.476a5.006,5.006,0,0,0,5-5V16A1,1,0,0,0,11.476,15Z"></path>
<path d="M22.867,9.879,18.281,5.293a1,1,0,1,0-1.414,1.414l4.262,4.263L6,11a1,1,0,0,0,0,2H6l15.188-.031-4.323,4.324a1,1,0,1,0,1.414,1.414l4.586-4.586A3,3,0,0,0,22.867,9.879Z"></path>
</g>
</svg>
</button>
</div>
</nav>
</div>
<main class="window-container">
<div id="home">
<div class="tab-selector">