Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-08 01:10:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #148 from Stremio/meta-preview-placeholder

Browse source 
Meta preview placeholder
This commit is contained in:
Nikola Hristov 2020-03-31 14:28:27 +03:00 committed by GitHub
commit 5278c32de0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
View file

@ -15,23 +15,14 @@ const MetaPreviewPlaceholder = ({ className }) => {
<div className={styles['description-container']}>
<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 className={styles['genre-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 className={styles['genre-label-container']} />
</div>
</div>
<div className={styles['action-buttons-container']}>

62
src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
View file

@ -1,7 +1,7 @@
.meta-preview-placeholder-container {
display: flex;
flex-direction: column;
padding: 1rem;
padding: 2rem;
.meta-info-container {
flex: 1;
@ -9,9 +9,9 @@
.logo-container {
width: 20rem;
height: 7rem;
height: 8rem;
max-width: 100%;
background-color: var(--color-placeholder);
background-color: var(--color-placeholder-background);
}
.duration-release-info-container {
@ -24,13 +24,13 @@
flex-basis: 5rem;
height: 1.4rem;
margin-right: 1rem;
background-color: var(--color-placeholder);
background-color: var(--color-placeholder-background);
}
.release-info-container {
flex-basis: 5rem;
height: 1.4rem;
background-color: var(--color-placeholder);
background-color: var(--color-placeholder-background);
}
}
@ -38,24 +38,19 @@
margin: 1rem 0;
.description-label-container {
height: 1.4rem;
background-color: var(--color-placeholder);
background-color: var(--color-placeholder-background);
&:nth-child(1) {
width: 26rem;
width: 20rem;
height: 1.4rem;
max-width: 80%;
}
&:nth-child(2) {
width: 26rem;
height: 4.6rem;
max-width: 80%;
margin-top: 0.2rem;
}
&:nth-child(3) {
width: 23rem;
max-width: 70%;
margin-top: 0.2rem;
margin-top: 1rem;
}
}
}
@ -67,32 +62,15 @@
width: 6.5rem;
height: 1.6rem;
max-width: 100%;
background-color: var(--color-placeholder);
background-color: var(--color-placeholder-background);
}
.genres-labels-container {
display: flex;
flex-direction: row;
.genre-label-container {
width: 10rem;
height: 1.2rem;
max-width: 100%;
margin-top: 0.2rem;
.genre-label-container {
height: 1.2rem;
background-color: var(--color-placeholder);
&:nth-child(1) {
flex-basis: 6rem;
margin-right: 0.2rem;
}
&:nth-child(2) {
flex-basis: 4rem;
margin-right: 0.2rem;
}
&:nth-child(3) {
flex-basis: 7rem;
}
}
background-color: var(--color-placeholder-background);
}
}
}
@ -107,8 +85,8 @@
flex: none;
width: 6rem;
height: 6rem;
margin-right: 1rem;
background-color: var(--color-placeholder);
margin-right: 2rem;
background-color: var(--color-placeholder-background);
&:last-child {
margin-right: 0;
@ -118,14 +96,14 @@
width: 2rem;
height: 2rem;
margin: 1rem 2rem 0 2rem;
background-color: var(--color-placeholder);
background-color: var(--color-placeholder-background);
}
.action-button-label {
width: 4rem;
height: 1.2rem;
margin: 0.9rem 1rem;
background-color: var(--color-placeholder);
background-color: var(--color-placeholder-background);
}
}
}