Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-17 14:12:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(calendar): align day and more indicator inline in narrow desktop viewports

Browse source
This commit is contained in:
Victor Sales 2025-10-12 13:41:42 +03:00
parent b40ef9f3dc
commit 539a7ebc10
1 changed files with 45 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,7 +28,7 @@
.heading { .heading {
position: relative; position: relative;
width: 60%; width: 100%;
display: flex; display: flex;
align-items: start; align-items: start;
padding: 0; padding: 0;
@ -52,7 +52,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 0.1em;
padding: 0.1rem; padding: 0.1rem;
width: 90%; width: 90%;
@ -80,13 +80,10 @@
} }
.poster { .poster {
flex: auto; height: auto;
z-index: 0; max-height: 100%;
position: relative; aspect-ratio: 2 / 3;
height: 100%;
width: 100%;
object-fit: cover; object-fit: cover;
opacity: 1;
} }
.icon, .poster { .icon, .poster {
@ -134,27 +131,19 @@
} }
} }
@media only screen and (orientation: portrait) { @media @phone-portrait {
.cell { .cell {
flex-direction: column; flex-direction: column;
display: grid; display: grid;
.heading {
justify-content: center;
}
.items { .items {
padding: 1px; padding: 1px;
gap: 0.15rem; gap: 0.15rem;
justify-content: space-evenly; justify-content: space-evenly;
.item{ .item {
width: 80%; width: 80%;
} }
}
.more {
display: flex;
display: none;
} }
} }
} }
@ -181,3 +170,35 @@
} }
} }
} }
@media only screen and (max-width: @minimum) and (orientation: portrait) and (pointer: fine) {
.cell {
position: relative;
flex-direction: row;
align-items: center;
display: flex;
.items {
display: none;
}
.heading {
display: flex;
align-items: center;
gap: 0.25rem;
width: auto;
}
.day {
margin-right: 0.25rem;
}
.more {
display: inline-flex;
position: relative;
height: auto;
padding: 0;
width: 30%;
}
}
}