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

refactor(common): improve mobile layout for MetaRow and MetaItem

Browse source
This commit is contained in:
Tim 2022-02-16 12:32:35 +01:00
parent 73b829d8c5
commit c71961b25a
3 changed files with 61 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/common/MetaItem/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/Popup/styles.less') {
popup-menu-container: menu-container;
@ -175,4 +176,27 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.meta-item-container {
display: flex;
flex-direction: column;
gap: 0.75em;
.poster-container {
flex: auto;
}
.title-bar-container {
height: 2.5rem;
flex: auto;
align-items: flex-start;
.title-label {
padding-left: 0;
padding-right: 0 !important;
}
}
}
}

12
src/common/MetaRow/MetaRowPlaceholder/styles.less
View file

@ -1,5 +1,7 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.meta-row-placeholder-container {
.header-container {
display: flex;
@ -85,4 +87,14 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.meta-row-placeholder-container {
.meta-items-container {
.meta-item {
margin: 0;
}
}
}
}

25
src/common/MetaRow/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-row-container {
overflow: visible;
@ -94,4 +95,28 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.meta-row-container {
.header-container {
gap: 0.5em;
padding: 0 0.5em;
.title-container {
white-space: nowrap;
text-overflow: ellipsis;
}
}
.meta-items-container {
.meta-item {
padding: 0.5em;
&:not(:first-child) {
margin-left: 0;
}
}
}
}
}