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

Merge pull request #875 from Stremio/feat/calendar-item-placeholder

Browse source 
Calendar: Implement Item placeholder
This commit is contained in:
Timothy Z. 2025-03-25 17:07:11 +02:00 committed by GitHub
commit 6940be4110
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 81 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -82,6 +82,46 @@
}
}
&.placeholder {
opacity: 0.7;
pointer-events: none;
.text {
width: 8rem;
height: 1.2rem;
background-color: var(--overlay-color);
border-radius: 0.2rem;
}
.video {
flex: none;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 3rem;
padding: 0 1rem;
.name {
flex: auto;
width: 12rem;
height: 1.2rem;
background-color: var(--overlay-color);
border-radius: 0.2rem;
}
.info {
flex: none;
width: 4rem;
height: 1.2rem;
background-color: var(--overlay-color);
border-radius: 0.2rem;
}
}
}
&.today {
.heading {
background-color: var(--primary-accent-color);

23
src/routes/Calendar/List/Item/ItemPlaceholder.tsx Normal file
View file

@ -0,0 +1,23 @@
// Copyright (C) 2017-2025 Smart code 203358507
import React from 'react';
import classNames from 'classnames';
import styles from './Item.less';
const ItemPlaceholder = () => {
return (
<div className={classNames(styles['item'], styles['placeholder'])}>
<div className={styles['heading']}>
<div className={styles['text']} />
</div>
<div className={styles['body']}>
<div className={styles['video']}>
<div className={styles['name']} />
<div className={styles['info']} />
</div>
</div>
</div>
);
};
export default ItemPlaceholder;

3
src/routes/Calendar/List/Item/index.ts
View file

@ -1,5 +1,6 @@
// Copyright (C) 2017-2024 Smart code 203358507
import Item from './Item';
import ItemPlaceholder from './ItemPlaceholder';
export default Item;
export { Item, ItemPlaceholder };

27
src/routes/Calendar/List/List.tsx
View file

@ -1,7 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useMemo } from 'react';
import Item from './Item';
import { Item, ItemPlaceholder } from './Item';
import styles from './List.less';
type Props = {
@ -20,16 +20,21 @@ const List = ({ items, selected, monthInfo, profile, onChange }: Props) => {
return (
<div className={styles['list']}>
{
filteredItems.map((item) => (
<Item
key={item.date.day}
{...item}
selected={selected}
monthInfo={monthInfo}
profile={profile}
onClick={onChange}
/>
))
items.length === 0 ?
[1, 2, 3].map((index) => (
<ItemPlaceholder key={index} />
))
:
filteredItems.map((item) => (
<Item
key={item.date.day}
{...item}
selected={selected}
monthInfo={monthInfo}
profile={profile}
onClick={onChange}
/>
))
}
</div>
);