social.io/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-17 09:22:02 +00:00
parent bbb6d09ecf
commit 2323d1a01c
2 changed files with 80 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
ts_web/elements/sio-combox.ts
View File

@@ -181,65 +181,68 @@ export class SioCombox extends DeesElement {
border-radius: ${unsafeCSS(radius['2xl'])};
}
/* Responsive layout */
@media (max-width: 600px) {
:host {
width: 100%;
height: 100%;
border-radius: 0;
}
.container {
position: relative;
}
sio-conversation-selector {
position: absolute;
width: 100%;
height: 100%;
transition: left 300ms ease, opacity 200ms ease;
}
sio-conversation-view {
position: absolute;
width: 100%;
height: 100%;
transition: left 300ms ease, opacity 200ms ease;
}
/* Mobile navigation states */
.container.show-list sio-conversation-selector {
left: 0;
opacity: 1;
}
.container.show-list sio-conversation-view {
left: 100%;
opacity: 0;
}
.container.show-conversation sio-conversation-selector {
left: -100%;
opacity: 0;
}
.container.show-conversation sio-conversation-view {
left: 0;
opacity: 1;
}
/* Desktop layout (default) */
sio-conversation-selector {
width: 320px;
flex-shrink: 0;
}
@media (min-width: 601px) {
sio-conversation-selector {
width: 320px;
flex-shrink: 0;
}
sio-conversation-view {
flex: 1;
}
sio-conversation-view {
flex: 1;
}
`,
// Mobile responsive layout - full screen with sliding mechanics
cssManager.cssForPhablet(css`
:host {
width: 100%;
height: 100%;
border-radius: 0;
}
:host::before {
border-radius: 0;
}
.container {
position: relative;
overflow: hidden;
}
sio-conversation-selector {
position: absolute;
width: 100%;
height: 100%;
transition: left 300ms ease, opacity 200ms ease;
}
sio-conversation-view {
position: absolute;
width: 100%;
height: 100%;
transition: left 300ms ease, opacity 200ms ease;
}
/* Mobile navigation states */
.container.show-list sio-conversation-selector {
left: 0;
opacity: 1;
}
.container.show-list sio-conversation-view {
left: 100%;
opacity: 0;
}
.container.show-conversation sio-conversation-selector {
left: -100%;
opacity: 0;
}
.container.show-conversation sio-conversation-view {
left: 0;
opacity: 1;
}
`),
];
public render(): TemplateResult {

24
ts_web/elements/sio-fab.ts
View File

@@ -230,14 +230,34 @@ export class SioFab extends DeesElement {
pointer-events: all;
}
`,
// Mobile responsive styles - smaller FAB on phablet and phone
// Mobile responsive styles - smaller FAB and full-screen combox
cssManager.cssForPhablet(css`
:host {
--fab-size: 48px;
--fab-combox-offset: calc(var(--fab-size) + ${unsafeCSS(spacing["3"])});
bottom: 16px;
right: 16px;
}
#comboxContainer {
position: fixed;
top: 0;
left: 0;
bottom: auto;
right: auto;
width: 100vw;
height: 100vh;
height: 100dvh;
}
#comboxContainer sio-combox {
bottom: 0;
right: 0;
transform: none;
}
#comboxContainer.show sio-combox {
transform: none;
}
`),
];