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

fix(calendar): improve poster visibility and responsive scaling

Browse source
This commit is contained in:
Victor Sales 2025-10-11 16:05:14 +03:00
parent 2dcc582cc2
commit 06365262d1
1 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,12 +27,11 @@
} }
.heading { .heading {
flex: none;
position: relative; position: relative;
height: 3rem; height: 100%;
display: flex; display: flex;
align-items: center; align-items: start;
padding: 0 1rem; padding: 0;
.day { .day {
flex: none; flex: none;
@ -50,7 +49,6 @@
} }
.items { .items {
flex: 0 1 10rem;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -65,6 +63,9 @@
height: 100%; height: 100%;
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
border-radius: var(--border-radius); border-radius: var(--border-radius);
aspect-ratio: 2 / 3;
height: 100%;
max-height: clamp(8rem, 25vh, 14rem);
.icon { .icon {
flex: none; flex: none;
@ -150,28 +151,33 @@
} }
} }
@media only screen and (max-height: @xxsmall) and (orientation: landscape) { @media only screen and (max-height: @xsmall) and (max-width: @xsmall) {
.cell { .cell {
flex-direction: row; gap: 0;
align-items: center;
.heading {
.day {
font-size: 0.875rem;
}
}
.items { .items {
padding: 0.25rem;
display: none; display: none;
}
.more { .item {
display: flex; pointer-events: none;
border-radius: calc(var(--border-radius) / 2);
}
} }
} }
} }
@media only screen and (max-height: @xsmall) and (max-width: @xsmall) { @media only screen and (max-height: @small) and (max-width: @small) {
.cell { .cell {
gap: 0; gap: 0;
.heading { .heading {
height: 2rem;
.day { .day {
font-size: 0.875rem; font-size: 0.875rem;
} }
@ -179,6 +185,8 @@
.items { .items {
padding: 0.25rem; padding: 0.25rem;
width: 100%;
height: 100%;
.item { .item {
pointer-events: none; pointer-events: none;