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

feat(calendar): redesign calendar cell layout for responsiveness and banner support

Browse source
This commit is contained in:
Victor Sales 2025-10-12 18:23:34 +03:00
parent 539a7ebc10
commit fb9497a856
1 changed files with 26 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,10 +28,9 @@
.heading { .heading {
position: relative; position: relative;
width: 100%; flex: 1 1 40%;
display: flex; display: flex;
align-items: start; align-items: flex-start;
padding: 0;
.day { .day {
flex: none; flex: none;
@ -54,7 +53,10 @@
flex-direction: row; flex-direction: row;
gap: 0.1em; gap: 0.1em;
padding: 0.1rem; padding: 0.1rem;
width: 90%; flex: 1 1 60%;
overflow-x: auto;
overflow-y: hidden;
min-width: 0;
.item { .item {
flex: none; flex: none;
@ -63,8 +65,9 @@
justify-content: center; justify-content: center;
height: 100%; height: 100%;
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
border-radius: var(--border-radius); border-radius: calc(var(--border-radius) /2);
max-height: clamp(8rem, 25vh, 14rem); max-height: 100%;
width: 100%;
.icon { .icon {
flex: none; flex: none;
@ -84,6 +87,7 @@
max-height: 100%; max-height: 100%;
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
object-fit: cover; object-fit: cover;
border-radius: inherit
} }
.icon, .poster { .icon, .poster {
@ -115,7 +119,10 @@
&.today { &.today {
.heading { .heading {
.day { .day {
width: auto;
background-color: var(--primary-accent-color); background-color: var(--primary-accent-color);
height: auto;
padding: 0.3rem;
} }
} }
} }
@ -142,12 +149,21 @@
justify-content: space-evenly; justify-content: space-evenly;
.item { .item {
width: 80%; width: 100%;
} }
} }
} }
} }
@media only screen and (max-height: @xxsmall) and (max-width: @xxsmall) and (orientation: landscape) {
.cell{
.items{
width: 100%;
}
}
}
@media only screen and (max-height: @medium) and (max-width: @medium) and (orientation: landscape) { @media only screen and (max-height: @medium) and (max-width: @medium) and (orientation: landscape) {
.cell { .cell {
gap: 0; gap: 0;
@ -161,12 +177,6 @@
.items { .items {
width: 100%; width: 100%;
.item {
pointer-events: none;
border-radius: calc(var(--border-radius) / 2);
width: 80%;
}
} }
} }
} }
@ -175,30 +185,16 @@
.cell { .cell {
position: relative; position: relative;
flex-direction: row; flex-direction: row;
align-items: center;
display: flex; display: flex;
.items {
display: none;
}
.heading { .heading {
display: flex; display: flex;
align-items: center;
gap: 0.25rem; gap: 0.25rem;
width: auto; width: auto;
}
.day{ .day{
margin-right: 0.25rem; font-size: 0.6rem;
} }
.more {
display: inline-flex;
position: relative;
height: auto;
padding: 0;
width: 30%;
} }
} }
} }