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

fix(calendar): adaptive display and style fixes

Browse source
This commit is contained in:
Victor Sales 2025-10-14 18:34:43 +03:00
parent d2d28be6de
commit 83752eb647
1 changed files with 21 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
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: row; flex-direction: column;
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,9 +28,8 @@
.heading { .heading {
position: relative; position: relative;
flex: 1 1 40%;
display: flex; display: flex;
align-items: flex-start; align-items: center;
.day { .day {
flex: none; flex: none;
@ -65,7 +64,7 @@
justify-content: center; justify-content: center;
height: 100%; height: 100%;
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
border-radius: calc(var(--border-radius) /2); border-radius: calc(var(--border-radius) / 2);
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
@ -118,11 +117,11 @@
&.today { &.today {
.heading { .heading {
padding: 0.3rem;
.day { .day {
width: auto;
background-color: var(--primary-accent-color); background-color: var(--primary-accent-color);
height: auto; height: 1.5rem;
padding: 0.3rem; width: 1.5rem;
} }
} }
} }
@ -138,15 +137,14 @@
} }
} }
@media only screen and (max-width: @minimum) and (orientation: portrait) { @media only screen and (max-width: @minimum) {
.cell{ .cell {
.items{ .items {
.item{ .item {
pointer-events: none; pointer-events: none;
}
} }
} }
}
} }
@media @phone-portrait { @media @phone-portrait {
@ -157,10 +155,8 @@
.items { .items {
padding: 1px; padding: 1px;
gap: 0.15rem; gap: 0.15rem;
justify-content: space-evenly;
.item { .item {
width: 100%;
pointer-events: none; pointer-events: none;
} }
} }
@ -169,7 +165,7 @@
@media @phone-landscape { @media @phone-landscape {
.cell { .cell {
flex-direction: row; flex-direction: column;
.items { .items {
padding: 1px; padding: 1px;
@ -186,10 +182,11 @@
@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;
flex-direction: row; flex-direction: column;
.heading { .heading {
.day { .day {
padding: 0;
font-size: 0.875rem; font-size: 0.875rem;
} }
} }
@ -201,25 +198,11 @@
} }
@media only screen and (max-width: @minimum) and (orientation: portrait) and (pointer: fine) { @media only screen and (max-width: @minimum) and (orientation: portrait) and (pointer: fine) {
.cell { .cell {
position: relative; display: flex;
flex-direction: row;
display: flex;
.items{ .heading {
.item{ flex: 1 1 33%;
pointer-events: none; }
} }
}
.heading {
display: flex;
gap: 0.25rem;
width: auto;
.day{
font-size: 0.6rem;
}
}
}
} }