Lars/shinkan-jinkendo
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Trainingsplanung und Rahmenplanung #9

Merged
Lars merged 29 commits from develop into main 2026-05-05 16:05:01 +02:00
Conversation 0 Commits 29 Files Changed 55 +43 -21
1 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b1af59b134 - Show all commits

64
frontend/src/app.css
View File

@ -33,7 +33,28 @@
html, body, #root { height: 100%; } html, body, #root { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text1); -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text1); -webkit-text-size-adjust: 100%; }
.app-shell { display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh; max-width: 600px; margin: 0 auto; } /* Mobile / Web-App: keine horizontale Seiten-Scroll-Leiste; volle Gerätebreite (<1024px) */
@media (max-width: 1023px) {
html {
overflow-x: clip;
}
body,
#root {
overflow-x: clip;
max-width: 100%;
}
}
/* Telefon & Tablet hochkant: volle Breite wie eine native App (kein 600px-Säulen-Layout) */
.app-shell {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100dvh;
width: 100%;
max-width: 100%;
margin: 0;
}
.app-header { .app-header {
height: var(--header-h); display: flex; align-items: center; padding: 0 16px; height: var(--header-h); display: flex; align-items: center; padding: 0 16px;
background: var(--surface); border-bottom: 1px solid var(--border); background: var(--surface); border-bottom: 1px solid var(--border);
@ -53,6 +74,9 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
/* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */ /* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */
.app-main { .app-main {
flex: 1; flex: 1;
min-width: 0;
max-width: 100%;
overflow-x: clip;
overflow-y: auto; overflow-y: auto;
padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px) max(16px, env(safe-area-inset-left, 0px)); padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px) max(16px, env(safe-area-inset-left, 0px));
} }
@ -60,10 +84,10 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
.bottom-nav { .bottom-nav {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 50%; left: 0;
transform: translateX(-50%); right: 0;
width: 100%; width: auto;
max-width: 600px; max-width: none;
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--surface); background: var(--surface);
@ -1548,7 +1572,7 @@ a.analysis-split__nav-item {
} }
.exercise-filter-modal.admin-modal-sheet { .exercise-filter-modal.admin-modal-sheet {
max-width: min(920px, calc(100vw - 16px)); max-width: min(920px, calc(100dvw - 16px));
} }
.exercise-filter-modal .admin-modal-sheet__body.exercise-filter-modal__scroll { .exercise-filter-modal .admin-modal-sheet__body.exercise-filter-modal__scroll {
flex: 1; flex: 1;
@ -1625,7 +1649,7 @@ a.analysis-split__nav-item {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: min(260px, 88vw); max-width: min(260px, 100%);
} }
.exercise-filter-chip__x { .exercise-filter-chip__x {
flex-shrink: 0; flex-shrink: 0;
@ -2045,6 +2069,8 @@ a.analysis-split__nav-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
width: 100%;
max-width: 100%;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
} }
@ -2180,17 +2206,6 @@ a.analysis-split__nav-item {
background: rgba(216, 90, 48, 0.08); background: rgba(216, 90, 48, 0.08);
} }
@media (max-width: 1023px) {
.app-shell {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100dvh;
max-width: 600px;
margin: 0 auto;
}
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.app-shell { .app-shell {
display: block; display: block;
@ -2804,6 +2819,7 @@ a.analysis-split__nav-item {
/* Horizontaler Überblick: äußerer Scroll‑Container (Zuverlässigkeit in Flex/Grid‑Eltern) */ /* Horizontaler Überblick: äußerer Scroll‑Container (Zuverlässigkeit in Flex/Grid‑Eltern) */
.framework-slots-board-outer { .framework-slots-board-outer {
container-type: inline-size;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
@ -2830,10 +2846,11 @@ a.analysis-split__nav-item {
scroll-snap-type: x proximity; scroll-snap-type: x proximity;
} }
/* Kartenbreite an den Scroll-Container koppeln (100vw wäre oft breiter als .app-main → horizontales Wischen der ganzen Seite) */
.framework-slots-board .framework-slot-card { .framework-slots-board .framework-slot-card {
flex: 0 0 min(300px, calc(100vw - 56px)); flex: 0 0 min(300px, calc(100vw - 72px));
width: min(300px, calc(100vw - 56px)); width: min(300px, calc(100vw - 72px));
min-width: min(300px, calc(100vw - 56px)); min-width: min(300px, calc(100vw - 72px));
height: min(520px, 72vh); height: min(520px, 72vh);
max-height: min(520px, 72vh); max-height: min(520px, 72vh);
display: flex; display: flex;
@ -2845,6 +2862,11 @@ a.analysis-split__nav-item {
scroll-snap-align: start; scroll-snap-align: start;
box-sizing: border-box; box-sizing: border-box;
} }
.framework-slots-board .framework-slot-card {
flex: 0 0 min(300px, calc(100cqw - 24px));
width: min(300px, calc(100cqw - 24px));
min-width: min(300px, calc(100cqw - 24px));
}
.framework-slot-card__head { .framework-slot-card__head {
display: flex; display: flex;