syonad/two
2
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases 9 Packages Wiki Activity Actions

web: start: responsive work

Browse source 
Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>
This commit is contained in:
GnomeZworc 2026-06-01 19:33:27 +02:00
commit 9e1e125d00
Signed by: nicolas.boufideline
GPG key ID: 4406BBBF8845D632
4 changed files with 331 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web/components/side-panel/side-panel.js
View file

@ -109,11 +109,13 @@ export class SidePanel extends HTMLElement {
--offset: 0px;
--width: ${width};
--dur: ${ANIM_DURATION}ms;
/* Cap width to viewport — never overflows on mobile */
--actual-width: min(var(--width), 100vw);
position: fixed;
top: 0;
right: calc(-1 * var(--width));
width: var(--width);
right: calc(-1 * var(--actual-width));
width: var(--actual-width);
height: 100vh;
background: #1e1e2e;
border-left: 1px solid #313244;
@ -121,8 +123,7 @@ export class SidePanel extends HTMLElement {
display: flex;
flex-direction: column;
z-index: calc(1000 + var(--stack, 0));
transition: right var(--dur) cubic-bezier(0.4, 0, 0.2, 1),
transform var(--dur) cubic-bezier(0.4, 0, 0.2, 1);
transition: right var(--dur) cubic-bezier(0.4, 0, 0.2, 1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #cdd6f4;
}
@ -131,6 +132,16 @@ export class SidePanel extends HTMLElement {
right: var(--offset);
}
/* On mobile: always full-width, no stack offset */
@media (max-width: 600px) {
:host {
--actual-width: 100vw;
}
:host([data-open]) {
right: 0;
}
}
.header {
display: flex;
align-items: center;