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

refactor: improve mobile layout and style on MetaDetails and MetaPreview

Browse source
This commit is contained in:
Tim 2022-02-17 11:24:52 +01:00
parent 9969d808bc
commit cbad5628a9
4 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -200,6 +200,8 @@
@media only screen and (max-width: @minimum) {
.meta-preview-container {
.meta-info-container {
padding: 0 1.5rem;
.logo {
margin: 1em 0;
}
@ -209,6 +211,7 @@
max-height: 9.5rem;
flex-wrap: nowrap;
gap: 1em;
padding: 0 1.5rem;
overflow-x: visible;
scrollbar-width: none;

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

@ -80,6 +80,15 @@
.streams-list-container {
.streams-container {
margin-top: 0;
scrollbar-color: @color-surface-light5-20 transparent;
&::-webkit-scrollbar-thumb {
background-color: @color-surface-light5-20;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
}

9
src/routes/MetaDetails/VideosList/Video/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';
.video-container {
display: flex;
@ -119,4 +120,12 @@
background-color: @color-primaryvariant1;
}
}
}
@media only screen and (max-width: @minimum) {
.video-container {
&:hover, &:focus {
background-color: @color-surface-light5-20;
}
}
}

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

@ -133,7 +133,8 @@
flex-direction: column;
.videos-list, .streams-list {
flex-basis: 30em;
flex-basis: auto;
max-height: 50vh;
background-color: transparent;
}
}