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 {