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

refactor: improve mobile layout for MetaDetails

Browse source
This commit is contained in:
Tim 2022-02-16 16:53:55 +01:00
parent 44fbe969b4
commit a20eb17587
7 changed files with 108 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/common/MetaPreview/ActionButton/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.action-button-container {
display: flex;
@ -45,4 +46,22 @@
color: @color-surface-light5-90;
}
}
}
@media only screen and (max-width: @minimum) {
.action-button-container {
flex-direction: row;
.icon-container {
align-self: center;
flex: 0 0 auto;
height: 2em;
width: 2em;
padding-top: 0;
}
.label-container {
flex: 0 0 auto;
}
}
}

37
src/common/MetaPreview/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.meta-preview-container {
position: relative;
@ -194,4 +195,40 @@
.share-prompt {
width: 24rem;
}
@media only screen and (max-width: @minimum) {
.meta-preview-container {
.meta-info-container {
.logo {
margin: 1em 0;
}
}
.action-buttons-container {
max-height: 9.5rem;
flex-wrap: nowrap;
gap: 1em;
overflow-x: visible;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.action-button {
height: 4rem;
width: auto;
display: flex;
flex-direction: row;
gap: 0.75em;
padding: 0 1.5em;
margin: 1rem 0;
&:not(:last-child) {
margin-right: 0;
}
}
}
}
}

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

@ -95,6 +95,7 @@
@media only screen and (max-width: @minimum) {
.horizontal-nav-bar-container {
justify-content: space-between;
gap: 0.5em;
padding-right: 0;
@ -107,7 +108,7 @@
}
.button-container {
&:not(:last-child) {
&:not(:last-child):not(.back-button-container) {
display: none;
}
}

21
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/PlayIconCircleCentered/styles.less') {
play-icon-circle-centered-background: background;
@ -90,4 +91,24 @@
background-color: @color-primaryvariant1;
}
}
}
@media only screen and (max-width: @minimum) {
.stream-container {
&:hover, &focus {
background-color: @color-surface-light5-20;
}
.thumbnail-container, .addon-name-container {
.addon-name {
font-weight: 500;
}
}
.play-icon {
.play-icon-circle-centered-icon {
fill: @color-surface-light5-90;
}
}
}
}

9
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.streams-list-container {
display: flex;
@ -73,4 +74,12 @@
color: @color-surface-light5-90;
}
}
}
@media only screen and (max-width: @minimum) {
.streams-list-container {
.streams-container {
margin-top: 0;
}
}
}

7
src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
@ -80,4 +81,10 @@
overflow: auto;
}
}
}
@media only screen and (max-width: @minimum) {
.seasons-bar-container {
padding-top: 0;
}
}

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

@ -125,4 +125,17 @@
height: 100%;
}
}
}
@media only screen and (max-width: @minimum) {
.metadetails-container {
.metadetails-content {
flex-direction: column;
.videos-list, .streams-list {
flex-basis: 30em;
background-color: transparent;
}
}
}
}