LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix spacing / centering live stream + comments section (#7225)

Browse source
This commit is contained in:
saltrafael 2021-10-04 10:19:52 -03:00 committed by GitHub
parent 5ed9e3e3ae
commit 2ba6023926
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/scss/component/_livestream.scss
View file

@ -27,8 +27,6 @@ $recent-msg-button__height: 2rem;
.livestream__discussion { .livestream__discussion {
width: 100%; width: 100%;
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-s);
@media (min-width: $breakpoint-medium) { @media (min-width: $breakpoint-medium) {
margin: 0; margin: 0;

42
ui/scss/component/_main.scss
View file

@ -207,17 +207,43 @@
} }
.main--livestream { .main--livestream {
width: calc(100vw - var(--spacing-xs) * 2); @extend .main--file-page;
margin: var(--spacing-xs); margin: 0;
padding: 0;
max-width: none;
@media (min-width: $breakpoint-medium) { .card-stack {
margin: var(--spacing-m); margin-top: var(--spacing-m);
margin-right: calc(var(--livestream-comments-width) + var(--spacing-m)); margin-bottom: var(--spacing-m);
width: calc(100vw - var(--livestream-comments-width) - var(--spacing-m) * 2);
@media (min-width: $breakpoint-large + 300px) {
max-width: calc(var(--page-max-width--filepage) / 1.25);
margin-left: auto;
margin-right: auto;
} }
@media (min-width: $breakpoint-large) { @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large + 300px) {
margin-right: calc(10vw + var(--livestream-comments-width) + var(--spacing-m)); max-width: calc(100vw - var(--livestream-comments-width) - var(--spacing-m) * 3);
margin-left: var(--spacing-m);
margin-right: var(--spacing-m);
}
@media (max-width: $breakpoint-medium) {
max-width: none;
}
}
.main__right-side {
width: var(--livestream-comments-width);
@media (max-width: $breakpoint-medium) {
width: 100%;
margin-bottom: var(--spacing-m);
}
}
@media (max-width: $breakpoint-medium) {
padding: 0 var(--spacing-m);
} }
} }