LogalDeveloper/owncast
0
Fork 0
Code Activity

Added mobile chat and some responsiveness

Browse Source 
weird 0 popping out when toggling chat. wasn't able to find which
component is responsible. Used bare mininum scss. May refactor in the
future.
This commit is contained in:
t1enne
2022-05-04 09:55:44 +02:00
parent 502cf4478a
commit 2cfb336411
6 changed files with 66 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/components/ui/Content/Content.module.scss
View File

@@ -1,14 +1,33 @@
.root {
display: grid;
grid-template-columns: 8fr 4fr;
grid-template-columns: 1fr;
}
.mobileChat {
display: block;
position: absolute;
background-color: white;
top: 0px;
width: 100%;
height: calc(50vh - var(--header-h));
}
.leftCol {
display: grid;
// -64px, which is the header
grid-template-rows: 50vh calc(50vh - 64px);
grid-template-rows: 50vh calc(50vh - var(--header-h));
}
.lowerRow {
position: relative;
display: grid;
grid-template-rows: 1fr 64px;
}
grid-template-rows: 1fr var(--header-h);
}
@media (min-width: 768px) {
.mobileChat {
display: none;
}
.root[data-columns='2'] {
grid-template-columns: 1fr var(--chat-w);
}
}