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

media queries in board implemented using screen size constants

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-06 15:20:59 +03:00
parent 419aee35ac
commit abc955c744
1 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/routes/Board/styles.less
View file

@ -1,3 +1,5 @@
@import (reference) 'common/screen-sizes.less';
.board-container { .board-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -23,11 +25,11 @@
} }
} }
@media only screen and (max-width: 1000px) { @media only screen and (min-width: @large) {
.board-container { .board-container {
.board-content { .board-content {
.board-row { .board-row {
.meta-item:nth-child(n+5) { .meta-item:nth-child(n+9) {
display: none; display: none;
} }
} }
@ -35,31 +37,7 @@
} }
} }
@media only screen and (min-width: 1000px) and (max-width: 1200px) { @media only screen and (max-width: @large) {
.board-container {
.board-content {
.board-row {
.meta-item:nth-child(n+6) {
display: none;
}
}
}
}
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
.board-container {
.board-content {
.board-row {
.meta-item:nth-child(n+7) {
display: none;
}
}
}
}
}
@media only screen and (min-width: 1600px) and (max-width: 2000px) {
.board-container { .board-container {
.board-content { .board-content {
.board-row { .board-row {
@ -71,11 +49,35 @@
} }
} }
@media only screen and (min-width: 2000px) { @media only screen and (max-width: @medium) {
.board-container { .board-container {
.board-content { .board-content {
.board-row { .board-row {
.meta-item:nth-child(n+9) { .meta-item:nth-child(n+7) {
display: none;
}
}
}
}
}
@media only screen and (max-width: @small) {
.board-container {
.board-content {
.board-row {
.meta-item:nth-child(n+6) {
display: none;
}
}
}
}
}
@media only screen and (max-width: @xsmall) {
.board-container {
.board-content {
.board-row {
.meta-item:nth-child(n+5) {
display: none; display: none;
} }
} }