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

refactor(Calendar): improve responsiveness

Browse source
This commit is contained in:
Tim 2024-06-28 06:55:30 +02:00
parent 8a79058d1c
commit 4250c9bf84
6 changed files with 72 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/routes/Calendar/Calendar.less
View file

@ -1,5 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/PaginationInput/styles.less') {
pagination-prev-button-container: prev-button-container;
pagination-next-button-container: next-button-container;
@ -38,7 +40,6 @@
.pagination-input {
flex: none;
height: 3rem;
margin-left: 1.5rem;
.pagination-prev-button-container, .pagination-next-button-container {
width: 3rem;
@ -58,4 +59,20 @@
}
}
}
}
}
@media only screen and (max-width: @minimum) {
.calendar {
.content {
padding: 0;
}
}
}
@media only screen and (max-width: @small) and (orientation: landscape) {
.calendar {
.content {
padding: 0 0 0 1rem;
}
}
}

14
src/routes/Calendar/List/Item/Item.less
View file

@ -32,12 +32,24 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 3rem;
padding: 0 1rem;
font-size: 1rem;
font-weight: 500;
color: var(--primary-foreground-color);
.name {
flex: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.info {
flex: none;
}
&:hover {
background-color: var(--overlay-color);
}
@ -55,4 +67,4 @@
opacity: 0.5;
}
}
}
}

14
src/routes/Calendar/List/List.less
View file

@ -1,5 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.list {
flex: none;
display: flex;
@ -8,4 +10,16 @@
width: 20rem;
padding-right: 1rem;
overflow-y: auto;
}
@media only screen and (max-width: @minimum) and (orientation: portrait) {
.list {
display: none;
}
}
@media only screen and (max-width: @small) and (orientation: landscape) {
.list {
width: 15rem;
}
}

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

@ -30,6 +30,7 @@
}
.heading {
flex: none;
position: relative;
padding: 1rem;
@ -48,15 +49,26 @@
}
.body {
flex: 1 1 auto;
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 6rem;
display: flex;
flex-direction: row;
gap: 1rem;
height: 0;
padding: 1rem;
overflow-x: scroll;
.poster {
.item {
flex: none;
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 2 / 3;
border-radius: var(--border-radius);
.poster {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
}
}

2
src/routes/Calendar/Table/Cell/Cell.tsx
View file

@ -27,7 +27,7 @@ const Cell = ({ today, date, items, onClick }: Props) => {
<div className={styles['body']}>
{
items.map(({ id, name, poster, deepLinks }) => (
<Button key={id} href={deepLinks.metaDetailsStreams}>
<Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>
<Image
className={styles['poster']}
src={poster}

9
src/routes/Calendar/Table/Table.less
View file

@ -7,12 +7,12 @@
flex-direction: column;
.week {
flex: auto;
flex: none;
position: relative;
height: 3rem;
width: 100%;
display: grid;
grid-template-columns: repeat(7, minmax(5rem, 1fr));
grid-template-columns: repeat(7, 1fr);
align-items: center;
.item {
@ -21,6 +21,9 @@
font-size: 1rem;
font-weight: 500;
color: var(--primary-foreground-color);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
@ -30,7 +33,7 @@
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(7, minmax(5rem, 1fr));
grid-template-columns: repeat(7, 1fr);
gap: 1px;
border-radius: var(--border-radius);
}