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

feat: improve mobile design

Browse source
This commit is contained in:
IEduStu 2024-04-17 00:25:21 +00:00 committed by Timothy Z.
parent 04f579eab5
commit e03aba766a
12 changed files with 144 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/App/styles.less
View file

@ -85,13 +85,19 @@ svg {
}
html {
width: 100%;
height: 100%;
width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))";
height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))";
min-width: 640px;
min-height: 480px;
font-family: 'PlusJakartaSans', 'sans-serif';
overflow: auto;
overscroll-behavior: none;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
// 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, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))";
body {
width: 100%;

2
src/common/Button/styles.less
View file

@ -8,6 +8,8 @@
outline-offset: calc(-1 * var(--focus-outline-size));
-webkit-tap-highlight-color: transparent;
cursor: pointer;
-webkit-touch-callout: none;
touch-callout: none;
&:focus {
outline-style: solid;

33
src/common/MainNavBars/styles.less
View file

@ -5,6 +5,11 @@
.main-nav-bars-container {
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));
height: 100%;
.horizontal-nav-bar {
position: absolute;
@ -17,18 +22,32 @@
.vertical-nav-bar {
position: absolute;
top: var(--horizontal-nav-bar-size);
bottom: 0;
bottom: var(--calculated-bottom-safe-inset);
left: 0;
z-index: 1;
}
.nav-content-container {
position: absolute;
top: var(--horizontal-nav-bar-size);
padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
top: 0;
right: 0;
bottom: 0;
left: var(--vertical-nav-bar-size);
z-index: 0;
overflow: scroll;
--top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
--bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px));
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black 100%
);
}
}
@ -36,7 +55,15 @@
.main-nav-bars-container {
.nav-content-container {
left: 0;
bottom: var(--vertical-nav-bar-size);
padding-bottom: var(--vertical-nav-bar-size);
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)),
transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size))
);
}
.vertical-nav-bar {

4
src/common/NavBar/HorizontalNavBar/styles.less
View file

@ -12,6 +12,8 @@
padding-right: 1rem;
background-color: transparent;
overflow: visible;
padding-top: env(safe-area-inset-top,0px);
box-sizing: content-box;
.logo-container {
flex: none;
@ -32,7 +34,7 @@
}
.back-button-container {
margin-left: 1rem;
margin-left: max(0px, calc(1rem - env(safe-area-inset-left, 0px)));
}
.title {

13
src/common/StreamingServerWarning/styles.less
View file

@ -6,8 +6,11 @@
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
background-color: @color-accent5-dark3;
padding: 1rem;
border-radius: 8px;
margin: 0px 8px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48), 0px 8px 48px rgba(0, 0, 0, 0.64);
.warning-statement {
flex: 1;
@ -19,8 +22,12 @@
.warning-button {
flex: none;
margin-left: 1rem;
margin-left: 1.5rem;
color: @color-surface-light5-90;
background-color: rgba(0, 0, 0, 0.24);
padding: 8px 12px;
border-radius: 8px;
line-height: 18px;
&:first-child {
margin-left: 0;
@ -50,7 +57,7 @@
height: auto !important;
text-align: center;
.warning-statement {
margin-bottom: 0.5rem;
margin-bottom: 1rem;
margin-right: 0;
}
.warning-button {

2
src/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Stremio">
<link rel="icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/favicon.ico">

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

@ -22,17 +22,39 @@
}
.addons-container {
width: 100%;
height: 100%;
background-color: transparent;
.addons-content {
--selectable-inputs-assumed-height: 84px;
--top-overlay-size: var(--selectable-inputs-assumed-height);
--bottom-vertical-nav-bar-size: 0px;
--bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px));
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
width: 100%;
height: 100%;
height: calc(100% + var(--bottom-overlay-size));
margin-bottom: calc(var(--bottom-overlay-size) * -1);
display: flex;
flex-direction: column;
align-self: stretch;
.addons-list-container {
margin-top: calc(var(--selectable-inputs-assumed-height) * -1);
padding: 0 1.5rem;
padding-top: var(--selectable-inputs-assumed-height);
padding-bottom: var(--bottom-overlay-size, 0px);
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black 100%
);
z-index: 1;
}
.selectable-inputs-container {
flex: none;
align-self: stretch;
@ -41,6 +63,7 @@
justify-content: space-between;
padding: 1.5rem;
overflow: visible;
z-index: 2;
.add-button-container {
flex: none;
@ -53,6 +76,7 @@
padding: 0 1.5rem;
border-radius: 3rem;
background-color: var(--secondary-accent-color);
z-index: 3;
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
@ -133,7 +157,6 @@
.addons-list-container {
flex: 1;
align-self: stretch;
padding: 0 1.5rem;
overflow-y: auto;
.addon {
@ -278,6 +301,8 @@
@media only screen and (max-width: @minimum) {
.addons-container {
.addons-content {
--bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size);
.selectable-inputs-container {
.add-button-container {
z-index: 1;

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

@ -24,7 +24,6 @@
.board-content {
width: 100%;
height: 100%;
padding: 0 1rem;
overflow-y: auto;
@ -38,6 +37,7 @@
.board-warning-container {
flex: none;
align-self: stretch;
margin-bottom: var(--calculated-bottom-safe-inset, 0px);
}
}
@ -191,15 +191,7 @@
z-index: 0;
.board-content-container {
&:only-child {
.board-content {
height: 100%;
}
}
.board-content {
height: calc(100% - 4rem);
.board-row {
margin-bottom: 1.5rem;
}
@ -226,8 +218,9 @@
position: absolute;
left: 0;
right: 0;
bottom: var(--vertical-nav-bar-size);
bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px));
height: 4rem;
margin-bottom: 0px;
}
}
}

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

@ -17,13 +17,20 @@
}
.discover-container {
width: 100%;
height: 100%;
background-color: transparent;
.discover-content {
--selectable-inputs-assumed-height: 84px;
--top-overlay-size: var(--selectable-inputs-assumed-height);
--bottom-vertical-nav-bar-size: 0px;
--bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px));
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
width: 100%;
height: 100%;
height: calc(100% + var(--bottom-overlay-size));
margin-bottom: calc(var(--bottom-overlay-size) * -1);
display: flex;
flex-direction: row;
@ -33,6 +40,21 @@
display: flex;
flex-direction: column;
.meta-items-container {
margin-top: calc(var(--selectable-inputs-assumed-height) * -1);
padding: 0 1.5rem;
padding-top: var(--selectable-inputs-assumed-height);
padding-bottom: var(--bottom-overlay-size, 0px);
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black 100%
);
z-index: 1;
}
.selectable-inputs-container {
flex: none;
align-self: stretch;
@ -40,6 +62,7 @@
flex-direction: row;
padding: 1.5rem;
overflow: visible;
z-index: 2;
.select-input {
flex: 0 1 15rem;
@ -162,7 +185,6 @@
align-items: center;
grid-gap: 0.5rem;
margin-right: 1.5rem;
padding: 0 1.5rem;
overflow-y: auto;
.meta-item-placeholder {
@ -348,6 +370,8 @@
@media only screen and (max-width: @minimum) {
.discover-container {
.discover-content {
--bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size);
.catalog-container {
.selectable-inputs-container {
justify-content: space-between;

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

@ -13,16 +13,38 @@
}
.library-container {
width: 100%;
height: 100%;
background-color: transparent;
.library-content {
--selectable-inputs-assumed-height: 80px;
--top-overlay-size: var(--selectable-inputs-assumed-height);
--bottom-vertical-nav-bar-size: 0px;
--bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px));
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
width: 100%;
height: 100%;
height: calc(100% + var(--bottom-overlay-size));
margin-bottom: calc(var(--bottom-overlay-size) * -1);
display: flex;
flex-direction: column;
.meta-items-container {
margin-top: calc(var(--selectable-inputs-assumed-height) * -1);
padding: 0 1.5rem;
padding-top: var(--selectable-inputs-assumed-height);
padding-bottom: var(--bottom-overlay-size, 0px);
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black 100%
);
z-index: 1;
}
.selectable-inputs-container {
flex: none;
align-self: stretch;
@ -30,6 +52,7 @@
flex-direction: row;
padding: 1.5rem;
overflow: visible;
z-index: 2;
.select-input-container {
flex-grow: 0;
@ -119,7 +142,6 @@
grid-auto-rows: max-content;
align-items: center;
grid-gap: 0.5rem;
padding: 0 1.5rem;
overflow-y: auto;
}
}
@ -216,6 +238,8 @@
@media only screen and (max-width: @minimum) {
.library-container {
.library-content {
--bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size);
.selectable-inputs-container {
justify-content: space-between;
}

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

@ -17,6 +17,9 @@
flex-direction: column;
width: 100%;
height: 100%;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
box-sizing: border-box;
.nav-bar {
z-index: 1;
@ -91,6 +94,8 @@
flex: 0 1 auto;
align-self: stretch;
padding: 0 4rem 2rem 4rem;
padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0px)));
}
.spacing {

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

@ -13,13 +13,11 @@
}
.settings-container {
width: 100%;
height: 100%;
background-color: transparent;
.settings-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;