Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #808 from Stremio/fix/PWA-height-width-global-bugs

Browse source 
PWA: Fix mobile devices style issues
This commit is contained in:
Timothy Z. 2025-01-23 18:19:56 +02:00 committed by GitHub
commit 2e45f097e2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/App/styles.less
View file

@ -23,8 +23,8 @@
// HTML sizes
@html-width: ~"calc(max(var(--small-viewport-width), var(--dynamic-viewport-width)))";
@html-height: ~"calc(max(var(--small-viewport-height), var(--dynamic-viewport-height)))";
@html-standalone-width: ~"calc(max(100%, var(--large-viewport-width)))";
@html-standalone-height: ~"calc(max(100%, var(--large-viewport-height)))";
@html-standalone-width: ~"calc(max(100%, var(--small-viewport-width)))";
@html-standalone-height: ~"calc(max(100%, var(--small-viewport-height)))";
// Safe area insets
@safe-area-inset-top: env(safe-area-inset-top, 0rem);
@ -64,7 +64,6 @@
--modal-background-color: rgba(15, 13, 32, 1);
--outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
--border-radius: 0.75rem;
--calculated-bottom-safe-inset: @calculated-bottom-safe-inset;
--top-overlay-size: @top-overlay-size;
--bottom-overlay-size: @bottom-overlay-size;
--overlap-size: @overlap-size;
@ -99,6 +98,10 @@
@supports (height: 100lvh) and (height: 100svh) {
--viewport-height-diff: calc(100lvh - 100svh);
}
@media (display-mode: standalone) {
--safe-area-inset-bottom: @calculated-bottom-safe-inset;
}
}
* {
@ -174,7 +177,7 @@ html {
position: absolute;
top: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
right: var(--safe-area-inset-right);
bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem));
bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-bottom, 0rem));
left: auto;
z-index: 1;
padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));

2
src/components/BottomSheet/BottomSheet.less
View file

@ -101,7 +101,7 @@
@media only screen and (orientation: landscape) {
.bottom-sheet {
.container {
max-width: 90%;
max-width: calc(90% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
}
}
}

10
src/components/MainNavBars/MainNavBars.less
View file

@ -6,9 +6,9 @@
position: relative;
z-index: 0;
overflow: clip;
margin-left: env(safe-area-inset-left, 0px);
margin-right: env(safe-area-inset-right, 0px);
width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
margin-left: var(--safe-area-inset-left);
margin-right: var(--safe-area-inset-right);
width: calc(100% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
height: 100%;
.horizontal-nav-bar {
@ -22,14 +22,14 @@
.vertical-nav-bar {
position: absolute;
top: var(--horizontal-nav-bar-size);
bottom: var(--calculated-bottom-safe-inset);
bottom: 0;
left: 0;
z-index: 1;
}
.nav-content-container {
position: absolute;
padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
top: 0;
right: 0;
bottom: 0;

2
src/routes/Addons/styles.less
View file

@ -22,7 +22,7 @@
}
.addons-container {
height: 100%;
height: calc(100% - var(--safe-area-inset-bottom));
background-color: transparent;
.addons-content {

2
src/routes/Board/styles.less
View file

@ -13,7 +13,7 @@
.board-container {
width: 100%;
height: 100%;
height: calc(100% - var(--safe-area-inset-bottom));
display: flex;
flex-direction: column;

3
src/routes/Calendar/Calendar.less
View file

@ -3,8 +3,7 @@
@import (reference) '~stremio/common/screen-sizes.less';
.calendar {
width: 100%;
height: 100%;
height: calc(100% - var(--safe-area-inset-bottom));
background-color: transparent;
.content {

2
src/routes/Discover/styles.less
View file

@ -17,7 +17,7 @@
}
.discover-container {
height: 100%;
height: calc(100% - var(--safe-area-inset-bottom));
background-color: transparent;
.discover-content {

2
src/routes/Library/styles.less
View file

@ -13,7 +13,7 @@
}
.library-container {
height: 100%;
height: calc(100% - var(--safe-area-inset-bottom));
background-color: transparent;
.library-content {

2
src/routes/MetaDetails/styles.less
View file

@ -52,7 +52,7 @@
flex-direction: row;
margin-top: calc(var(--top-overlay-size) * -1);
padding-top: var(--top-overlay-size);
padding-bottom: var(--calculated-bottom-safe-inset, 0rem);
padding-bottom: var(--safe-area-inset-bottom, 0rem);
.vertical-nav-bar {
flex: none;
}

2
src/routes/Settings/styles.less
View file

@ -13,7 +13,7 @@
}
.settings-container {
height: 100%;
height: calc(100% - var(--safe-area-inset-bottom));
width: 100%;
background-color: transparent;