Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-18 05:15:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Calendar): layout issue for small viewports

Browse source
This commit is contained in:
Tim 2024-11-04 15:31:00 +01:00
parent 7874062156
commit 9df9a4e1a1
1 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/routes/Calendar/Table/Cell/Cell.less
View file

@ -7,7 +7,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
gap: 0.5rem;
background-color: var(--overlay-color);
border: 0.15rem solid transparent;
overflow: hidden;
@ -29,8 +29,10 @@
.heading {
flex: none;
position: relative;
height: 3rem;
display: flex;
padding: 1rem 1rem 0 1rem;
align-items: center;
padding: 0 1rem;
.day {
flex: none;
@ -48,12 +50,11 @@
}
.items {
flex: 1 1 auto;
flex: 0 1 10rem;
position: relative;
display: flex;
flex-direction: row;
gap: 1rem;
height: 0;
padding: 0 1rem 1rem 1rem;
.item {
@ -139,8 +140,6 @@
@media only screen and (orientation: portrait) {
.cell {
gap: 0;
.heading {
justify-content: center;
}
@ -155,21 +154,23 @@
}
}
@media only screen and (max-width: @xsmall) and (orientation: landscape) {
@media only screen and (max-width: @small) and (orientation: landscape) {
.cell {
flex-direction: row;
align-items: center;
.heading {
padding: 0 0 0 1rem;
.items {
display: none;
}
.more {
display: flex;
}
}
}
@media only screen and (max-height: @xsmall) and (orientation: landscape) {
@media only screen and (max-height: @xxsmall) and (orientation: landscape) {
.cell {
gap: 0;
.items {
display: none;
}