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

Merge pull request #800 from Stremio/fix/older-ios-versions-support

Browse source 
fix(App): older iOS versions support
This commit is contained in:
Timothy Z. 2025-01-15 21:50:46 +02:00 committed by GitHub
commit 33e4e79323
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 39 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/App/styles.less
View file

@ -14,11 +14,19 @@
} }
// iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp
@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))"; @calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(var(--viewport-height-diff) - env(safe-area-inset-top, 0rem))))";
@html-width: ~"calc(max(100svw, 100dvw))";
@html-height: ~"calc(max(100svh, 100dvh))"; // Viewport sizes
@html-standalone-width: ~"calc(max(100%, 100lvw))"; @viewport-width: ~"100vw";
@html-standalone-height: ~"calc(max(100%, 100lvh))"; @viewport-height: ~"100vh";
// 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)))";
// Safe area insets
@safe-area-inset-top: env(safe-area-inset-top, 0rem); @safe-area-inset-top: env(safe-area-inset-top, 0rem);
@safe-area-inset-right: env(safe-area-inset-right, 0rem); @safe-area-inset-right: env(safe-area-inset-right, 0rem);
@safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem); @safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem);
@ -65,6 +73,32 @@
--safe-area-inset-right: @safe-area-inset-right; --safe-area-inset-right: @safe-area-inset-right;
--safe-area-inset-bottom: @safe-area-inset-bottom; --safe-area-inset-bottom: @safe-area-inset-bottom;
--safe-area-inset-left: @safe-area-inset-left; --safe-area-inset-left: @safe-area-inset-left;
--dynamic-viewport-width: @viewport-width;
--dynamic-viewport-height: @viewport-height;
--large-viewport-width: @viewport-width;
--large-viewport-height: @viewport-height;
--small-viewport-width: @viewport-width;
--small-viewport-height: @viewport-height;
--viewport-height-diff: calc(100vh - 100vh);
@supports (height: 100dvh) {
--dynamic-viewport-width: 100dvw;
--dynamic-viewport-height: 100dvh;
}
@supports (height: 100lvh) {
--large-viewport-width: 100lvw;
--large-viewport-height: 100lvh;
}
@supports (height: 100svh) {
--small-viewport-width: 100svw;
--small-viewport-height: 100svh;
}
@supports (height: 100lvh) and (height: 100svh) {
--viewport-height-diff: calc(100lvh - 100svh);
}
} }
* { * {
@ -112,8 +146,6 @@ svg {
html { html {
width: @html-width; width: @html-width;
height: @html-height; height: @html-height;
min-width: 640px;
min-height: 480px;
font-family: 'PlusJakartaSans', 'sans-serif'; font-family: 'PlusJakartaSans', 'sans-serif';
overflow: auto; overflow: auto;
overscroll-behavior: none; overscroll-behavior: none;
@ -212,9 +244,6 @@ html {
@media only screen and (max-width: @xsmall) { @media only screen and (max-width: @xsmall) {
html { html {
min-width: inherit;
min-height: inherit;
body { body {
:global(#app) { :global(#app) {
.toasts-container { .toasts-container {