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

refactor: mobile UI improvements

Browse source
This commit is contained in:
Timothy Z. 2024-12-09 15:24:10 +02:00
parent 2b03b087f2
commit e372b89566
5 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -13,7 +13,7 @@
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.48.1",
"@stremio/stremio-icons": "5.4.0",
"@stremio/stremio-icons": "5.4.1",
"@stremio/stremio-video": "0.0.46",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",
@ -3158,9 +3158,9 @@
"license": "MIT"
},
"node_modules/@stremio/stremio-icons": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.0.tgz",
"integrity": "sha512-rRWNER+wLgMjxd6sKT0MMq4lzXDOobY3GNdT3NDeeymBtB/CD0YmYqQuUOyYDjEZ1btIbNaniUOBoPW9d3ZQ8A==",
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.1.tgz",
"integrity": "sha512-7g4JP7tPRT1UDZxbuH/Urq7fc6te3joy8qyx/NGWIW7wO169TTISO7ZWdejzESvUVgZ/7i6rzkRmXZ3wefWcBg==",
"workspaces": [
"react",
"react-native",

2
package.json
View file

@ -17,7 +17,7 @@
"@sentry/browser": "6.13.3",
"@stremio/stremio-colors": "5.0.1",
"@stremio/stremio-core-web": "0.48.1",
"@stremio/stremio-icons": "5.4.0",
"@stremio/stremio-icons": "5.4.1",
"@stremio/stremio-video": "0.0.46",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",

2
src/routes/Player/Player.js
View file

@ -704,7 +704,7 @@ const Player = ({ urlParams, queryParams }) => {
{
player.metaItem !== null && player.metaItem.type === 'Ready' ?
<>
<div className={classnames(styles['layer'], styles['side-drawer-button'], { [styles['open']]: sideDrawerOpen })} onClick={openSideDrawer}>
<div className={classnames(styles['layer'], styles['side-drawer-button-layer'], { [styles['open']]: sideDrawerOpen })} onClick={openSideDrawer}>
<Icon name={'chevron-back'} className={styles['icon']} />
</div>
<SideDrawer

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

@ -27,6 +27,6 @@
.content {
overflow: auto;
max-height: 58%;
max-height: 57%;
}
}

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

@ -19,7 +19,7 @@ html:not(.active-slider-within) {
.player-container.overlayHidden {
cursor: none;
.nav-bar-layer, .control-bar-layer, .menu-layer {
.nav-bar-layer, .control-bar-layer, .menu-layer, .side-drawer-button-layer {
opacity: 0;
transition: opacity 200ms;
}
@ -114,7 +114,7 @@ html:not(.active-slider-within) {
overflow: auto;
}
&.side-drawer-button {
&.side-drawer-button-layer {
right: -4rem;
top: 50%;
left: initial;
@ -140,7 +140,6 @@ html:not(.active-slider-within) {
opacity: 0.6;
margin-right: 4rem;
transition: all 0.3s ease-in-out;
}
&.open {
@ -152,6 +151,18 @@ html:not(.active-slider-within) {
opacity: 1;
}
}
@media screen and (max-width: @xsmall) {
height: 8rem;
width: 4.5rem;
right: -2.5rem;
.icon {
width: 2rem;
height: 2rem;
margin-right: 2.5rem;
}
}
}
&.side-drawer-layer {
@ -167,7 +178,7 @@ html:not(.active-slider-within) {
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: visible;
overflow-y: auto;
z-index: 1;
padding: 1rem;
transition: transform 0.3s ease-in-out;