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

refactor(MetaPreviewPlaceholder): style

Browse source
This commit is contained in:
Tim 2023-07-05 14:33:32 +02:00
parent 2512bcbc28
commit 130a9dc57a
2 changed files with 13 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,9 +14,9 @@ const MetaPreviewPlaceholder = ({ className }) => {
<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-container']} />
<div className={styles['genres-container']}>
<div className={styles['genres-header-container']} />
<div className={styles['genre-label-container']} />
</div>
<div className={styles['genres-container']}>
<div className={styles['genres-header-container']} />
@ -27,20 +27,7 @@ const MetaPreviewPlaceholder = ({ className }) => {
<div className={styles['genre-label-container']} />
</div>
</div>
<div className={styles['action-buttons-container']}>
<div className={styles['action-button-container']}>
<div className={styles['action-button-icon']} />
<div className={styles['action-button-label']} />
</div>
<div className={styles['action-button-container']}>
<div className={styles['action-button-icon']} />
<div className={styles['action-button-label']} />
</div>
<div className={styles['action-button-container']}>
<div className={styles['action-button-icon']} />
<div className={styles['action-button-label']} />
</div>
</div>
<div className={styles['action-buttons-container']} />
</div>
);
};

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

@ -3,7 +3,6 @@
.meta-preview-placeholder-container {
display: flex;
flex-direction: column;
padding: 2rem;
.meta-info-container {
flex: 1;
@ -13,6 +12,7 @@
width: 20rem;
height: 8rem;
max-width: 100%;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
@ -26,37 +26,18 @@
flex-basis: 5rem;
height: 1.4rem;
margin-right: 1rem;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
.release-info-container {
flex-basis: 5rem;
height: 1.4rem;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
}
.description-container {
margin: 1rem 0;
.description-label-container {
background-color: var(--color-placeholder-background);
&:nth-child(1) {
width: 20rem;
height: 1.4rem;
max-width: 80%;
}
&:nth-child(2) {
width: 26rem;
height: 4.6rem;
max-width: 80%;
margin-top: 1rem;
}
}
}
.genres-container {
margin: 1rem 0;
@ -64,6 +45,7 @@
width: 6.5rem;
height: 1.6rem;
max-width: 100%;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
@ -72,6 +54,7 @@
height: 1.2rem;
max-width: 100%;
margin-top: 0.2rem;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
}
@ -81,32 +64,9 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 6rem;
.action-button-container {
flex: none;
width: 6rem;
height: 6rem;
margin-right: 2rem;
background-color: var(--color-placeholder-background);
&:last-child {
margin-right: 0;
}
.action-button-icon {
width: 2rem;
height: 2rem;
margin: 1rem 2rem 0 2rem;
background-color: var(--color-placeholder-background);
}
.action-button-label {
width: 4rem;
height: 1.2rem;
margin: 0.9rem 1rem;
background-color: var(--color-placeholder-background);
}
}
height: 4rem;
margin-bottom: 1rem;
border-radius: 4rem;
background-color: var(--color-placeholder-background);
}
}