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 #765 from Stremio/refactor/overall-app-styles

Browse source 
refactor(styles): improve PWA styles on mobile devices (1)
This commit is contained in:
Tim 2025-01-03 17:10:21 +01:00 committed by GitHub
commit a5ae0c12ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 150 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/App/styles.less
View file

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@ -13,6 +13,20 @@
@import (once, less) '~stremio-router/styles.css';
}
// 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))))";
@html-width: ~"calc(max(100svw, 100dvw))";
@html-height: ~"calc(max(100svh, 100dvh))";
@safe-area-inset-top: env(safe-area-inset-top, 0rem);
@safe-area-inset-right: env(safe-area-inset-right, 0rem);
@safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem);
@safe-area-inset-left: env(safe-area-inset-left, 0rem);
@top-overlay-size: 5.25rem;
@bottom-overlay-size: 0rem;
@overlap-size: 3rem;
@transparency-grandient-pad: 6rem;
:root {
--landscape-shape-ratio: 0.5625;
--poster-shape-ratio: 1.464;
@ -40,6 +54,15 @@
--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;
--transparency-grandient-pad: @transparency-grandient-pad;
--safe-area-inset-top: @safe-area-inset-top;
--safe-area-inset-right: @safe-area-inset-right;
--safe-area-inset-bottom: @safe-area-inset-bottom;
--safe-area-inset-left: @safe-area-inset-left;
}
* {
@ -85,13 +108,16 @@ svg {
}
html {
width: 100%;
height: 100%;
width: @html-width;
height: @html-height;
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;
body {
width: 100%;
@ -106,9 +132,9 @@ html {
.toasts-container {
position: absolute;
top: calc(1.2 * var(--horizontal-nav-bar-size));
right: 0;
bottom: calc(1.2 * var(--horizontal-nav-bar-size));
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));
left: auto;
z-index: 1;
padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));
@ -193,4 +219,10 @@ html {
}
}
}
}
@media only screen and (max-width: @minimum) {
:root {
--bottom-overlay-size: 6rem;
}
}

1
src/common/BottomSheet/BottomSheet.less
View file

@ -23,7 +23,6 @@
opacity: 0.8;
transition: opacity 0.1s ease-out;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.container {

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@ -6,7 +6,6 @@
outline-width: var(--focus-outline-size);
outline-color: @color-surface-light5;
outline-offset: calc(-1 * var(--focus-outline-size));
-webkit-tap-highlight-color: transparent;
cursor: pointer;
&:focus {

1
src/common/Chips/Chip/Chip.less
View file

@ -16,7 +16,6 @@
text-transform: capitalize;
padding: 0 1.75rem;
border-radius: @height;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
user-select: none;
overflow: hidden;

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

@ -1,10 +1,15 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.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,20 @@
.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;
}
}
@ -36,7 +43,7 @@
.main-nav-bars-container {
.nav-content-container {
left: 0;
bottom: var(--vertical-nav-bar-size);
padding-bottom: var(--vertical-nav-bar-size);
}
.vertical-nav-bar {

3
src/common/MetaItem/styles.less
View file

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -23,7 +23,6 @@
.meta-item-container {
padding: 1rem;
overflow: visible;
-webkit-tap-highlight-color: transparent;
&:hover, &:focus, &:global(.active), &:global(.selected) {
outline-style: none;

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -12,6 +12,8 @@
padding-right: 1rem;
background-color: transparent;
overflow: visible;
padding-top: var(--safe-area-inset-top);
box-sizing: content-box;
.logo-container {
flex: none;
@ -32,7 +34,7 @@
}
.back-button-container {
margin-left: 1rem;
margin-left: max(0rem, calc(1rem - var(--safe-area-inset-left)));
}
.title {

12
src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
View file

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -11,11 +11,13 @@
background-color: transparent;
border-radius: 0.75rem;
&:hover {
background-color: var(--overlay-color);
@media (pointer: fine) {
&:hover {
background-color: var(--overlay-color);
.label {
opacity: 0.6;
.label {
opacity: 0.6;
}
}
}

1
src/common/RadioButton/RadioButton.less
View file

@ -24,7 +24,6 @@
outline-width: var(--focus-outline-size);
outline-color: @color-surface-light5;
outline-offset: calc(-1 * var(--focus-outline-size));
-webkit-tap-highlight-color: transparent;
input[type='radio'] {
opacity: 0;

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">

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -22,17 +22,22 @@
}
.addons-container {
width: 100%;
height: 100%;
background-color: transparent;
.addons-content {
width: 100%;
height: 100%;
margin-bottom: calc(var(--bottom-overlay-size) * -1);
display: flex;
flex-direction: column;
align-self: stretch;
.addons-list-container {
padding: 0 1.5rem;
z-index: 1;
}
.selectable-inputs-container {
flex: none;
align-self: stretch;
@ -41,6 +46,7 @@
justify-content: space-between;
padding: 1.5rem;
overflow: visible;
z-index: 2;
.add-button-container {
flex: none;
@ -53,6 +59,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 +140,6 @@
.addons-list-container {
flex: 1;
align-self: stretch;
padding: 0 1.5rem;
overflow-y: auto;
.addon {

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -23,8 +23,8 @@
background: transparent;
.board-content {
width: 100%;
height: 100%;
width: 100%;
padding: 0 1rem;
overflow-y: auto;
@ -38,6 +38,7 @@
.board-warning-container {
flex: none;
align-self: stretch;
margin-bottom: var(--calculated-bottom-safe-inset, 0rem);
}
}
@ -191,15 +192,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 +219,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, 0rem));
height: 4rem;
margin-bottom: 0rem;
}
}
}

1
src/routes/Calendar/Details/Details.less
View file

@ -16,7 +16,6 @@
font-size: 1rem;
font-weight: 500;
color: var(--primary-foreground-color);
-webkit-tap-highlight-color: transparent;
.name {
flex: auto;

1
src/routes/Calendar/Selector/Selector.less
View file

@ -22,7 +22,6 @@
gap: 0.5rem;
border-radius: 0.5rem;
transition: background-color 0.1s ease-out;
-webkit-tap-highlight-color: transparent;
.label, .icon {
color: var(--primary-foreground-color);

1
src/routes/Calendar/Table/Cell/Cell.less
View file

@ -13,7 +13,6 @@
overflow: hidden;
cursor: pointer;
transition: border-color 0.1s ease-out;
-webkit-tap-highlight-color: transparent;
&:first-child {
border-radius: var(--border-radius) 0 0 0;

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -17,13 +17,13 @@
}
.discover-container {
width: 100%;
height: 100%;
background-color: transparent;
.discover-content {
width: 100%;
height: 100%;
margin-bottom: calc(var(--bottom-overlay-size) * -1);
display: flex;
flex-direction: row;
@ -32,6 +32,12 @@
align-self: stretch;
display: flex;
flex-direction: column;
contain: strict;
.meta-items-container {
padding: 0 1.5rem;
z-index: 1;
}
.selectable-inputs-container {
flex: none;
@ -40,6 +46,7 @@
flex-direction: row;
padding: 1.5rem;
overflow: visible;
z-index: 2;
.select-input {
flex: 0 1 15rem;
@ -162,7 +169,6 @@
align-items: center;
grid-gap: 0.5rem;
margin-right: 1.5rem;
padding: 0 1.5rem;
overflow-y: auto;
.meta-item-placeholder {

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -13,16 +13,21 @@
}
.library-container {
width: 100%;
height: 100%;
background-color: transparent;
.library-content {
width: 100%;
height: 100%;
margin-bottom: calc(var(--bottom-overlay-size) * -1);
display: flex;
flex-direction: column;
.meta-items-container {
padding: 0 1.5rem;
z-index: 1;
}
.selectable-inputs-container {
flex: none;
align-self: stretch;
@ -30,6 +35,7 @@
flex-direction: row;
padding: 1.5rem;
overflow: visible;
z-index: 2;
.select-input-container {
flex-grow: 0;
@ -119,7 +125,6 @@
grid-auto-rows: max-content;
align-items: center;
grid-gap: 0.5rem;
padding: 0 1.5rem;
overflow-y: auto;
}
}

35
src/routes/MetaDetails/MetaDetails.js
View file

@ -76,8 +76,29 @@ const MetaDetails = ({ urlParams, queryParams }) => {
setSeason(event.value);
}, [setSeason]);
const renderBackgroundImageFallback = React.useCallback(() => null, []);
const renderBackground = React.useMemo(() => !!(
metaPath &&
metaDetails?.metaItem &&
metaDetails.metaItem.content.type !== 'Loading' &&
typeof metaDetails.metaItem.content.content?.background === 'string' &&
metaDetails.metaItem.content.content.background.length > 0
), [metaPath, metaDetails]);
return (
<div className={styles['metadetails-container']}>
{
renderBackground ?
<div className={styles['background-image-layer']}>
<Image
className={styles['background-image']}
src={metaDetails.metaItem.content.content.background}
renderFallback={renderBackgroundImageFallback}
alt={' '}
/>
</div>
:
null
}
<HorizontalNavBar
className={styles['nav-bar']}
backButton={true}
@ -120,20 +141,6 @@ const MetaDetails = ({ urlParams, queryParams }) => {
<MetaPreview.Placeholder className={styles['meta-preview']} />
:
<React.Fragment>
{
typeof metaDetails.metaItem.content.content.background === 'string' &&
metaDetails.metaItem.content.content.background.length > 0 ?
<div className={styles['background-image-layer']}>
<Image
className={styles['background-image']}
src={metaDetails.metaItem.content.content.background}
renderFallback={renderBackgroundImageFallback}
alt={' '}
/>
</div>
:
null
}
<MetaPreview
className={classnames(styles['meta-preview'], 'animation-fade-in')}
name={metaDetails.metaItem.content.content.name}

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -17,6 +17,29 @@
flex-direction: column;
width: 100%;
height: 100%;
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
box-sizing: border-box;
.background-image-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: var(--modal-background-color);
.background-image {
pointer-events: none;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
opacity: 0.3;
}
}
.nav-bar {
z-index: 1;
@ -31,32 +54,13 @@
z-index: 0;
display: flex;
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);
.vertical-nav-bar {
--vertical-nav-bar-size: 6rem;
flex: none;
}
.background-image-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: var(--modal-background-color);
.background-image {
pointer-events: none;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
opacity: 0.3;
}
}
.meta-message-container {
align-self: stretch;
display: flex;
@ -91,6 +95,8 @@
flex: 0 1 auto;
align-self: stretch;
padding: 0 4rem 2rem 4rem;
padding-left: max(1rem, calc(4rem - var(--safe-area-inset-left)));
}
.spacing {

6
src/routes/Search/styles.less
View file

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -12,13 +12,13 @@
}
.search-container {
width: 100%;
height: 100%;
width: 100%;
background-color: transparent;
.search-content {
width: 100%;
height: 100%;
width: 100%;
overflow-y: auto;
.search-row {

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

@ -1,4 +1,4 @@
// Copyright (C) 2017-2023 Smart code 203358507
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
@ -13,13 +13,13 @@
}
.settings-container {
width: 100%;
height: 100%;
width: 100%;
background-color: transparent;
.settings-content {
width: 100%;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;