Updated placeholder component structures
• Updated: - placeholder component structures
This commit is contained in:
@@ -7,11 +7,7 @@ import { getRandomInt } from '../../utils/numbers'
|
||||
import ResponsiveComponent from '../../features/ui/util/responsive_component'
|
||||
import PlaceholderLayout from './placeholder_layout'
|
||||
|
||||
export default class NotificationPlaceholder extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
isLast: PropTypes.bool,
|
||||
}
|
||||
class NotificationPlaceholder extends PureComponent {
|
||||
|
||||
render() {
|
||||
const { isLast } = this.props
|
||||
@@ -42,21 +38,21 @@ export default class NotificationPlaceholder extends PureComponent {
|
||||
<div className={classes}>
|
||||
<div className={[_s.default, _s.py2, _s.px2].join(' ')}>
|
||||
<PlaceholderLayout viewBox='0 0 400 170'>
|
||||
<rect x='24' y='34' rx='4' ry='4' width={width2} height='8' />
|
||||
<rect x={left} y='34' rx='4' ry='4' width='12' height='8' />
|
||||
<circle cx='8' cy='10' r='8' />
|
||||
<rect x='24' y='34' rx='4' ry='4' width={width2} height='8' />
|
||||
<rect x={left} y='34' rx='4' ry='4' width='12' height='8' />
|
||||
<circle cx='8' cy='10' r='8' />
|
||||
<circle cx='36' cy='12' r='12' />
|
||||
<rect x='24' y='55' rx='0' ry='0' width='375' height='1' />
|
||||
<rect x='24' y='166' rx='0' ry='0' width='475' height='1' />
|
||||
<rect x='24' y='55' rx='0' ry='0' width='1' height='112' />
|
||||
<rect x='24' y='55' rx='0' ry='0' width='375' height='1' />
|
||||
<rect x='24' y='166' rx='0' ry='0' width='475' height='1' />
|
||||
<rect x='24' y='55' rx='0' ry='0' width='1' height='112' />
|
||||
<rect x='399' y='55' rx='0' ry='0' width='1' height='112' />
|
||||
<rect x='32' y='64' rx='4' ry='4' width={width1} height='8' />
|
||||
<rect x='32' y='80' rx='4' ry='4' width='23' height='8' />
|
||||
<rect x='32' y='102' rx='4' ry='4' width='337' height='8' />
|
||||
<rect x='32' y='118' rx='4' ry='4' width='290' height='8' />
|
||||
<rect x='32' y='64' rx='4' ry='4' width={width1} height='8' />
|
||||
<rect x='32' y='80' rx='4' ry='4' width='23' height='8' />
|
||||
<rect x='32' y='102' rx='4' ry='4' width='337' height='8' />
|
||||
<rect x='32' y='118' rx='4' ry='4' width='290' height='8' />
|
||||
<rect x='32' y='134' rx='4' ry='4' width='216' height='8' />
|
||||
<rect x='32' y='152' rx='4' ry='4' width='23' height='8' />
|
||||
<rect x='62' y='152' rx='4' ry='4' width='60' height='8' />
|
||||
<rect x='32' y='152' rx='4' ry='4' width='23' height='8' />
|
||||
<rect x='62' y='152' rx='4' ry='4' width='60' height='8' />
|
||||
<rect x='130' y='152' rx='4' ry='4' width='26' height='8' />
|
||||
</PlaceholderLayout>
|
||||
</div>
|
||||
@@ -66,16 +62,16 @@ export default class NotificationPlaceholder extends PureComponent {
|
||||
<div className={classesXS}>
|
||||
<div className={[_s.default, _s.py2, _s.px2].join(' ')}>
|
||||
<PlaceholderLayout viewBox='0 0 380 200'>
|
||||
<circle cx='20' cy='20' r='20' />
|
||||
<rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />
|
||||
<rect x='0' y='76' rx='0' ry='0' width='1' height='120' />
|
||||
<rect x='379' y='76' rx='0' ry='0' width='1' height='120' />
|
||||
<rect x='0' y='76' rx='0' ry='0' width='380' height='1' />
|
||||
<rect x='0' y='195' rx='0' ry='0' width='380' height='1' />
|
||||
<rect x='12' y='90' rx='5' ry='5' width='280' height='10' />
|
||||
<rect x='12' y='108' rx='5' ry='5' width='80' height='10' />
|
||||
<rect x='12' y='136' rx='5' ry='5' width='320' height='10' />
|
||||
<rect x='12' y='154' rx='5' ry='5' width='210' height='10' />
|
||||
<circle cx='20' cy='20' r='20' />
|
||||
<rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />
|
||||
<rect x='0' y='76' rx='0' ry='0' width='1' height='120' />
|
||||
<rect x='379' y='76' rx='0' ry='0' width='1' height='120' />
|
||||
<rect x='0' y='76' rx='0' ry='0' width='380' height='1' />
|
||||
<rect x='0' y='195' rx='0' ry='0' width='380' height='1' />
|
||||
<rect x='12' y='90' rx='5' ry='5' width='280' height='10' />
|
||||
<rect x='12' y='108' rx='5' ry='5' width='80' height='10' />
|
||||
<rect x='12' y='136' rx='5' ry='5' width='320' height='10' />
|
||||
<rect x='12' y='154' rx='5' ry='5' width='210' height='10' />
|
||||
<rect x='12' y='174' rx='5' ry='5' width='120' height='10' />
|
||||
</PlaceholderLayout>
|
||||
</div>
|
||||
@@ -85,4 +81,10 @@ export default class NotificationPlaceholder extends PureComponent {
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
NotificationPlaceholder.propTypes = {
|
||||
isLast: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default NotificationPlaceholder
|
||||
|
||||
Reference in New Issue
Block a user