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

fix(calendar): redesign cell layout with rows for desktop

Browse source
This commit is contained in:
Victor Sales 2025-10-12 00:58:36 +03:00
parent f2c7382729
commit b40ef9f3dc
1 changed files with 17 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@
.cell { .cell {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 0.5rem; gap: 0.5rem;
background-color: var(--overlay-color); background-color: var(--overlay-color);
@ -28,7 +28,7 @@
.heading { .heading {
position: relative; position: relative;
height: 100%; width: 60%;
display: flex; display: flex;
align-items: start; align-items: start;
padding: 0; padding: 0;
@ -53,7 +53,8 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 1rem;
padding: 0 0.5rem 0.5rem 0.5rem; padding: 0.1rem;
width: 90%;
.item { .item {
flex: none; flex: none;
@ -63,7 +64,6 @@
height: 100%; height: 100%;
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
border-radius: var(--border-radius); border-radius: var(--border-radius);
height: 100%;
max-height: clamp(8rem, 25vh, 14rem); max-height: clamp(8rem, 25vh, 14rem);
.icon { .icon {
@ -134,47 +134,35 @@
} }
} }
@media only screen and (max-height: @minimum) and (orientation: portrait) { @media only screen and (orientation: portrait) {
.cell { .cell {
flex-direction: column;
display: grid;
.heading { .heading {
justify-content: center; justify-content: center;
} }
.items { .items {
display: none; padding: 1px;
gap: 0.15rem;
justify-content: space-evenly;
.item{
width: 80%;
}
} }
.more { .more {
display: flex; display: flex;
}
}
}
@media only screen and (max-height: @xsmall) and (max-width: @xsmall) {
.cell {
gap: 0;
.heading {
.day {
font-size: 0.875rem;
}
}
.items {
padding: 0.25rem;
display: none; display: none;
.item {
pointer-events: none;
border-radius: calc(var(--border-radius) / 2);
}
} }
} }
} }
@media only screen and (max-height: @small) and (max-width: @small) { @media only screen and (max-height: @medium) and (max-width: @medium) and (orientation: landscape) {
.cell { .cell {
gap: 0; gap: 0;
flex-direction: row;
.heading { .heading {
.day { .day {
@ -183,13 +171,12 @@
} }
.items { .items {
padding: 0.25rem;
width: 100%; width: 100%;
height: 100%;
.item { .item {
pointer-events: none; pointer-events: none;
border-radius: calc(var(--border-radius) / 2); border-radius: calc(var(--border-radius) / 2);
width: 80%;
} }
} }
} }