mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-21 11:42:05 +00:00
improve media queries
This commit is contained in:
parent
3d479304ab
commit
df04af0150
1 changed files with 26 additions and 18 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue