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

meta preview placeholder adapted to the latest changes in placeholders

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-09 17:06:56 +03:00
parent 8e31747a0b
commit b528e79e14
2 changed files with 17 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/common/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
View file

@ -7,58 +7,30 @@ const MetaPreviewPlaceholder = ({ className }) => {
return (
<div className={classnames(className, styles['meta-preview-placeholder-container'])}>
<div className={styles['meta-info-container']}>
<div className={styles['logo-container']}>
<div className={styles['logo']} />
</div>
<div className={styles['logo-container']} />
<div className={styles['duration-release-info-container']}>
<div className={styles['duration-container']}>
<div className={styles['duration-label']} />
</div>
<div className={styles['release-info-container']}>
<div className={styles['release-info-label']} />
</div>
<div className={styles['duration-container']} />
<div className={styles['release-info-container']} />
</div>
<div className={styles['description-container']}>
<div className={styles['description-label-container']}>
<div className={styles['description-label']} />
</div>
<div className={styles['description-label-container']}>
<div className={styles['description-label']} />
</div>
<div className={styles['description-label-container']}>
<div className={styles['description-label']} />
<div className={styles['description-label-container']} />
<div className={styles['description-label-container']} />
<div className={styles['description-label-container']} />
</div>
<div className={styles['genres-container']}>
<div className={styles['genres-header-container']} />
<div className={styles['genres-labels-container']}>
<div className={styles['genre-label-container']} />
<div className={styles['genre-label-container']} />
<div className={styles['genre-label-container']} />
</div>
</div>
<div className={styles['genres-container']}>
<div className={styles['genres-header-container']}>
<div className={styles['genres-header-label']} />
</div>
<div className={styles['genres-header-container']} />
<div className={styles['genres-labels-container']}>
<div className={styles['genre-label-container']}>
<div className={styles['genre-label']} />
</div>
<div className={styles['genre-label-container']}>
<div className={styles['genre-label']} />
</div>
<div className={styles['genre-label-container']}>
<div className={styles['genre-label']} />
</div>
</div>
</div>
<div className={styles['genres-container']}>
<div className={styles['genres-header-container']}>
<div className={styles['genres-header-label']} />
</div>
<div className={styles['genres-labels-container']}>
<div className={styles['genre-label-container']}>
<div className={styles['genre-label']} />
</div>
<div className={styles['genre-label-container']}>
<div className={styles['genre-label']} />
</div>
<div className={styles['genre-label-container']}>
<div className={styles['genre-label']} />
</div>
<div className={styles['genre-label-container']} />
<div className={styles['genre-label-container']} />
<div className={styles['genre-label-container']} />
</div>
</div>
</div>

36
src/common/MetaPreviewPlaceholder/styles.less
View file

@ -12,12 +12,6 @@
height: 7rem;
max-width: 100%;
background-color: var(--color-placeholderbackground);
.logo {
width: 100%;
height: 100%;
background-color: var(--color-placeholdersurface);
}
}
.duration-release-info-container {
@ -31,24 +25,12 @@
height: 1.4rem;
margin-right: 1rem;
background-color: var(--color-placeholderbackground);
.duration-label {
width: 100%;
height: 100%;
background-color: var(--color-placeholdersurface);
}
}
.release-info-container {
flex-basis: 5rem;
height: 1.4rem;
background-color: var(--color-placeholderbackground);
.release-info-label {
width: 100%;
height: 100%;
background-color: var(--color-placeholdersurface);
}
}
}
@ -75,12 +57,6 @@
max-width: 70%;
margin-top: 0.2rem;
}
.description-label {
width: 100%;
height: 100%;
background-color: var(--color-placeholdersurface);
}
}
}
@ -92,12 +68,6 @@
height: 1.6rem;
max-width: 100%;
background-color: var(--color-placeholderbackground);
.genres-header-label {
width: 100%;
height: 100%;
background-color: var(--color-placeholdersurface);
}
}
.genres-labels-container {
@ -122,12 +92,6 @@
&:nth-child(3) {
flex-basis: 7rem;
}
.genre-label {
width: 100%;
height: 100%;
background-color: var(--color-placeholdersurface);
}
}
}
}