Kieran/zap.stream
5
8
Fork 9
Code Issues 27 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

fml

Browse Source
This commit is contained in:
Alejandro Gomez 2023-06-27 16:35:37 +02:00
parent baa20a6fd0
commit f17d97eca9
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
2 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/element/live-chat.css
View File

@ -4,7 +4,8 @@
flex-direction: column; flex-direction: column;
padding: 8px 16px; padding: 8px 16px;
border: none; border: none;
height: unset; max-width: calc(100vw - 32px);
height: calc(100vh - 72px - 230px - 64px);
} }
@media (min-width: 1020px) { @media (min-width: 1020px) {

69
src/pages/layout.css
View File

@ -1,18 +1,21 @@
.page { .page {
display: grid; display: grid;
gap: 0;
grid-template-areas: grid-template-areas:
"header" "header"
"main-content" "main-content"
"profile" "profile"
"chat"; "chat";
grid-template-rows: 64px 230px 56px min-content; grid-template-rows: 64px 230px 56px 1fr;
grid-template-columns: 1fr; grid-template-columns: 1fr;
height: 100vh; height: 100vh;
gap: 0; width: 100vw;
} }
.page.home { .page.home {
display: grid; display: grid;
height: 100vh;
width: 100vw;
grid-template-areas: grid-template-areas:
"header" "header"
"main-content"; "main-content";
@ -20,51 +23,34 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.popout-chat {
display: grid;
grid-template-areas:
"main-content";
grid-template-rows: 1fr;
grid-template-columns: 1fr;
height: 100vh;
gap: 0;
}
.live-chat {
max-height: calc(100vh - 385px);
}
.popout-chat .live-chat {
max-height: unset;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.video-content video {
height: calc(100vh - 64px);
}
.live-chat {
width: fit-content;
max-height: calc(100vh - 82px);
}
.page { .page {
display: grid; display: grid;
width: 100vw;
height: 100vh;
grid-template-areas: grid-template-areas:
"header header" "header header"
"main-content profile" "main-content profile"
"main-content chat"; "main-content chat";
grid-template-rows: 64px min-content; grid-template-rows: 64px min-content;
grid-template-columns: minmax(600px, 1fr) min-content; grid-template-columns: minmax(600px, 1fr) 1fr;
gap: 0; gap: 0;
}
.video-content video {
height: calc(100vh - 64px);
}
.live-chat {
height: calc(100vh - 56px);
} }
} }
@media (min-width: 1020px) { @media (min-width: 1020px) {
.page { .page {
width: unset;
display: grid; display: grid;
height: calc(100vh - 72px - 32px - 32px); width: unset;
height: calc(100vh - 72px);
padding: 0 40px; padding: 0 40px;
grid-template-columns: auto 376px; grid-template-columns: auto 376px;
grid-template-rows: unset; grid-template-rows: unset;
@ -74,6 +60,10 @@
"profile chat"; "profile chat";
gap: 0; gap: 0;
} }
.live-chat {
width: unset;
}
} }
@media (min-width: 2000px) { @media (min-width: 2000px) {
@ -155,3 +145,18 @@ header .profile img {
display: none; display: none;
} }
} }
.popout-chat {
display: grid;
grid-template-areas:
"main-content";
grid-template-rows: 1fr;
grid-template-columns: 1fr;
height: 100vh;
gap: 0;
}
.popout-chat .live-chat {
max-height: unset;
}