MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: polish dashboard view toggle styling
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 23:52:15 +02:00
parent 9572b6116a
commit 14505c2296
6 changed files with 60 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
admin.html
View File

@@ -12,7 +12,7 @@
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png"> <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png"> <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
<link rel="stylesheet" href="/style.css?v=28"> <link rel="stylesheet" href="/style.css?v=29">
</head> </head>
<body> <body>
<header class="shell hero admin-hero"> <header class="shell hero admin-hero">

2
favorites.html
View File

@@ -12,7 +12,7 @@
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png"> <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png"> <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
<link rel="stylesheet" href="/style.css?v=28"> <link rel="stylesheet" href="/style.css?v=29">
</head> </head>
<body> <body>
<header class="shell hero admin-hero"> <header class="shell hero admin-hero">

2
index.html
View File

@@ -15,7 +15,7 @@
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png"> <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png"> <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
<link rel="stylesheet" href="style.css?v=28"> <link rel="stylesheet" href="style.css?v=29">
</head> </head>
<body> <body>
<header class="shell hero"> <header class="shell hero">

2
offline.html
View File

@@ -11,7 +11,7 @@
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png"> <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png"> <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
<link rel="stylesheet" href="/style.css?v=28"> <link rel="stylesheet" href="/style.css?v=29">
</head> </head>
<body> <body>
<main class="shell hero"> <main class="shell hero">

64
style.css
View File

@@ -176,8 +176,8 @@ main {
top: 0; top: 0;
z-index: 10; z-index: 10;
display: grid; display: grid;
grid-template-columns: minmax(220px, 340px) 1fr auto; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
gap: 12px; gap: 10px 12px;
align-items: center; align-items: center;
padding: 12px 0; padding: 12px 0;
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
@@ -214,8 +214,7 @@ main {
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08); box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
} }
.segments, .segments {
.view-toggle {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 6px; gap: 6px;
@@ -223,13 +222,23 @@ main {
scrollbar-width: none; scrollbar-width: none;
} }
.segments::-webkit-scrollbar, .view-toggle {
.view-toggle::-webkit-scrollbar { grid-column: 1 / -1;
justify-self: start;
display: inline-grid;
grid-template-columns: repeat(3, minmax(86px, auto));
gap: 3px;
padding: 4px;
background: rgba(17, 22, 36, 0.78);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.segments::-webkit-scrollbar {
display: none; display: none;
} }
.segment, .segment {
.view-option {
min-width: max-content; min-width: max-content;
height: 36px; height: 36px;
padding: 0 13px; padding: 0 13px;
@@ -240,13 +249,39 @@ main {
cursor: pointer; cursor: pointer;
} }
.segment.is-active, .view-option {
.view-option.is-active { min-width: 86px;
height: 30px;
padding: 0 12px;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 0.82rem;
font-weight: 650;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.segment.is-active {
color: #061014; color: #061014;
background: #67e8f9; background: #67e8f9;
border-color: #67e8f9; border-color: #67e8f9;
} }
.view-option:hover,
.view-option:focus-visible {
color: #fff;
background: rgba(255, 255, 255, 0.04);
outline: none;
}
.view-option.is-active {
color: #07111a;
background: #67e8f9;
border-color: #67e8f9;
}
.section { .section {
margin-top: 18px; margin-top: 18px;
} }
@@ -941,6 +976,15 @@ main {
justify-content: flex-start; justify-content: flex-start;
} }
.view-toggle {
width: 100%;
grid-template-columns: repeat(3, 1fr);
}
.view-option {
min-width: 0;
}
.grid { .grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }

4
sw.js
View File

@@ -1,10 +1,10 @@
const CACHE_NAME = 'mischlabs-pwa-v17'; const CACHE_NAME = 'mischlabs-pwa-v18';
const APP_SHELL = [ const APP_SHELL = [
'/', '/',
'/index.html', '/index.html',
'/favorites.html', '/favorites.html',
'/offline.html', '/offline.html',
'/style.css?v=28', '/style.css?v=29',
'/auth.js?v=1', '/auth.js?v=1',
'/app.js?v=34', '/app.js?v=34',
'/favorites.js?v=1', '/favorites.js?v=1',