Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-28 17:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

NotificationPlaceholder implemented

Browse source
This commit is contained in:
svetlagasheva 2019-10-14 17:32:18 +03:00
parent 2bfd60cd92
commit e35fefd414
3 changed files with 67 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/common/NavBar/NotificationsMenu/NotificationsList/NotificationPlaceholder/NotificationPlaceholder.js Normal file
View file

@ -0,0 +1,25 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const styles = require('./styles');
const NotificationPlaceholder = ({ className }) => {
return (
<div className={classnames(className, styles['notification-placeholder-container'])}>
<div className={styles['logo-image-container']}>
<div className={styles['logo-image']} />
</div>
<div className={styles['info-container']}>
<div className={styles['name-container']} />
<div className={styles['released-container']} />
</div>
</div>
);
};
NotificationPlaceholder.propTypes = {
className: PropTypes.string
}
module.exports = NotificationPlaceholder;

3
src/common/NavBar/NotificationsMenu/NotificationsList/NotificationPlaceholder/index.js Normal file
View file

@ -0,0 +1,3 @@
const NotificationPlaceholder = require('./NotificationPlaceholder');
module.exports = NotificationPlaceholder;

39
src/common/NavBar/NotificationsMenu/NotificationsList/NotificationPlaceholder/styles.less Normal file
View file

@ -0,0 +1,39 @@
.notification-placeholder-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
.logo-image-container {
flex: none;
border-radius: 50%;
.logo-image {
width: 3.5rem;
height: 3.5rem;
background-color: var(--color-placeholder);
}
}
.info-container {
flex: 1;
padding: 0 1rem;
.name-container {
width: 100%;
height: 1.2rem;
background: var(--color-placeholder);
}
.released-container {
width: 50%;
height: 1.2rem;
margin-top: 0.5rem;
background: var(--color-placeholder);
}
}
&:not(:last-child) {
border-bottom: thin solid var(--color-surfacelight);
}
}