Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 09:42:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor (styles): landscape mode on mobile

Browse source
This commit is contained in:
Timothy Z. 2024-12-09 18:05:10 +02:00
parent d9cec1205c
commit 5a422b5b33
2 changed files with 44 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/routes/Player/SideDrawer/SideDrawer.less
View file

@ -2,7 +2,9 @@
@import (reference) '~stremio/common/screen-sizes.less';
@seasons-bar-height: 5rem;
@seasons-bar-height: 6rem;
@padding: 1rem;
@videos-height: 60%;
.overlay {
display: none;
@ -23,19 +25,55 @@
display: flex;
flex-direction: column;
justify-content: space-around;
padding: @padding;
height: 100dvh;
max-width: 30%;
overflow-y: auto;
.info {
padding: 1rem;
padding: @padding;
overflow-y: auto;
}
.content {
min-height: 60%;
max-height: 60%;
min-height: @videos-height;
max-height: @videos-height;
.videos {
overflow-y: auto;
height: calc(100% - @seasons-bar-height);
}
}
}
}
@media screen and (max-width: @small) {
.side-drawer {
max-width: 40%;
}
}
@media (orientation: portrait) and (max-width: @xsmall) {
.side-drawer {
max-width: 90%;
}
}
@media (orientation: landscape) and (max-width: @xsmall) {
.side-drawer {
max-width: 50%;
.content {
min-height: calc(@videos-height * 1.2);
max-height: calc(@videos-height * 1.2);
}
}
}
@media screen and (max-width: @xxsmall) {
.side-drawer {
padding: calc(@padding / 2);
.info {
padding: calc(@padding / 2);
}
}
}

18
src/routes/Player/styles.less
View file

@ -170,37 +170,21 @@ html:not(.active-slider-within) {
right: 0;
left: initial;
bottom: initial;
max-width: 30%;
height: 100dvh;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40),
0 1.1rem 0.85rem var(--color-background-dark5-20);
backdrop-filter: blur(15px);
overflow-y: auto;
z-index: 1;
padding: 1rem;
transition: transform 0.3s ease-in-out;
transform: translateX(100%);
pointer-events: none;
z-index: 1;
&.open {
transform: translateX(0);
pointer-events: all;
}
@media screen and (max-width: @small) {
max-width: 40%;
}
@media (orientation: landscape) and (max-width: @xsmall) {
max-width: 50%;
}
@media (orientation: portrait) and (max-width: @xsmall) {
max-width: 90%;
}
}
}
}