improve media queries

This commit is contained in:
nklhrstv 2020-03-26 19:18:57 +02:00
parent 3d479304ab
commit df04af0150

View file

@ -3,12 +3,10 @@
:import('~stremio/common/MetaRow/styles.less') { :import('~stremio/common/MetaRow/styles.less') {
meta-item: meta-item; meta-item: meta-item;
see-all-container: see-all-container;
} }
:import('~stremio/common/MetaRow/MetaRowPlaceholder/styles.less') { :import('~stremio/common/MetaRow/MetaRowPlaceholder/styles.less') {
meta-item-placeholder: meta-item; meta-item-placeholder: meta-item;
see-all-container-placeholder: see-all-container;
} }
.search-container { .search-container {
@ -21,7 +19,7 @@
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.search-row, .search-row-placeholder { .search-row {
margin: 4rem 2rem; margin: 4rem 2rem;
&:first-child { &:first-child {
@ -31,10 +29,6 @@
&:last-child { &:last-child {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.see-all-container, .see-all-container-placeholder {
width: 12rem;
}
} }
.message-container { .message-container {
@ -76,12 +70,12 @@
} }
} }
@media only screen and (min-width: @large) { @media only screen and (max-width: @large) {
.search-container { .search-container {
.search-content { .search-content {
.search-row, .search-row-placeholder { .search-row {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+9) { &:nth-child(n+10) {
display: none; display: none;
} }
} }
@ -90,12 +84,12 @@
} }
} }
@media only screen and (max-width: @large) { @media only screen and (max-width: @normal) {
.search-container { .search-container {
.search-content { .search-content {
.search-row, .search-row-placeholder { .search-row {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+8) { &:nth-child(n+9) {
display: none; display: none;
} }
} }
@ -107,9 +101,9 @@
@media only screen and (max-width: @medium) { @media only screen and (max-width: @medium) {
.search-container { .search-container {
.search-content { .search-content {
.search-row, .search-row-placeholder { .search-row {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+7) { &:nth-child(n+8) {
display: none; display: none;
} }
} }
@ -121,9 +115,9 @@
@media only screen and (max-width: @small) { @media only screen and (max-width: @small) {
.search-container { .search-container {
.search-content { .search-content {
.search-row, .search-row-placeholder { .search-row {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+6) { &:nth-child(n+7) {
display: none; display: none;
} }
} }
@ -135,7 +129,21 @@
@media only screen and (max-width: @xsmall) { @media only screen and (max-width: @xsmall) {
.search-container { .search-container {
.search-content { .search-content {
.search-row, .search-row-placeholder { .search-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
}
}
}
}
}
}
@media only screen and (max-width: @minimum) {
.search-container {
.search-content {
.search-row {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+5) { &:nth-child(n+5) {
display: none; display: none;