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

StreamPlaceholder improved

Browse source
This commit is contained in:
svetlagasheva 2020-04-01 13:35:16 +03:00
parent 11ebfae747
commit 0bb10097a0
2 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/StreamPlaceholder.js
View file

@ -1,7 +1,7 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const Icon = require('stremio-icons/dom'); const PlayIconCircleCentered = require('stremio/common/PlayIconCircleCentered');
const styles = require('./styles'); const styles = require('./styles');
const StreamPlaceholder = ({ className }) => { const StreamPlaceholder = ({ className }) => {
@ -14,9 +14,7 @@ const StreamPlaceholder = ({ className }) => {
<div className={styles['description-container']} /> <div className={styles['description-container']} />
<div className={styles['description-container']} /> <div className={styles['description-container']} />
</div> </div>
<div className={styles['play-icon-container']}> <PlayIconCircleCentered className={styles['play-icon']} />
<Icon className={styles['play-icon']} icon={'ic_play'} />
</div>
</div> </div>
); );
}; };

30
src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
View file

@ -1,27 +1,31 @@
:import('~stremio/common/PlayIconCircleCentered/styles.less') {
play-icon-circle-centered-background: background;
play-icon-circle-centered-icon: icon;
}
.stream-placeholder-container { .stream-placeholder-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: var(--color-placeholder); padding: 0.5rem 1rem;
.addon-container { .addon-container {
flex: none; flex: none;
padding: 0.5rem;
.addon-name { .addon-name {
width: 5rem; width: 5rem;
height: 2rem; height: 2rem;
background-color: var(--color-placeholder); background-color: var(--color-placeholder-background);
} }
} }
.info-container { .info-container {
flex: 1; flex: 1;
padding: 0.5rem; margin: 0.5rem 1rem;
.description-container { .description-container {
height: 1.2rem; height: 1.2rem;
background-color: var(--color-placeholder); background-color: var(--color-placeholder-background);
&:nth-child(1) { &:nth-child(1) {
width: 80%; width: 80%;
@ -34,17 +38,17 @@
} }
} }
.play-icon-container { .play-icon {
flex: none; flex: none;
width: 5rem; width: 3.5rem;
height: 5rem; height: 5rem;
padding: 1.5rem;
.play-icon { .play-icon-circle-centered-background {
display: block; fill: none;
width: 100%; }
height: 100%;
fill: var(--color-placeholder); .play-icon-circle-centered-icon {
fill: var(--color-placeholder-background);
} }
} }
} }