random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated Placeholder Responsiveness and Added new Placeholders

Browse Source 
• Updated:
- Placeholder Responsiveness

• Added:
- new Placeholders
This commit is contained in:
mgabdev
2020-07-29 15:40:47 -05:00
parent 73234ac52b
commit 13127960c4
24 changed files with 256 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/javascript/gabsocial/components/placeholder/status_placeholder.js
View File

@@ -1,5 +1,10 @@
import { CX } from '../../constants'
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
import { Fragment } from 'react'
import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../../constants'
import { getRandomInt } from '../../utils/numbers'
import ResponsiveComponent from '../../features/ui/util/responsive_component'
import PlaceholderLayout from './placeholder_layout'
export default class StatusPlaceholder extends PureComponent {
@@ -27,20 +32,38 @@ export default class StatusPlaceholder extends PureComponent {
borderColorSecondary: 1,
})
const width = getRandomInt(120, 375)
const width1 = getRandomInt(360, 450)
const width2 = getRandomInt(260, 360)
const width3 = getRandomInt(120, 260)
return (
<ResponsiveClassesComponent
classNames={containerClasses}
classNamesXS={containerClassesXS}
>
<PlaceholderLayout viewBox='0 0 476 136'>
<rect x='48' y='8' width='88' height='6' rx='3' />
<rect x='48' y='26' width='52' height='6' rx='3' />
<rect x='0' y='56' width='410' height='6' rx='3' />
<rect x='0' y='72' width='380' height='6' rx='3' />
<rect x='0' y='88' width='178' height='6' rx='3' />
<circle cx='20' cy='20' r='20' />
</PlaceholderLayout>
</ResponsiveClassesComponent>
<Fragment>
<ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
<div className={containerClasses}>
<PlaceholderLayout viewBox='0 0 476 136'>
<rect x='48' y='8' width={width} height='6' rx='3' />
<rect x='48' y='26' width='52' height='6' rx='3' />
<rect x='0' y='56' width={width1} height='6' rx='3' />
<rect x='0' y='72' width={width2} height='6' rx='3' />
<rect x='0' y='88' width={width3} height='6' rx='3' />
<circle cx='20' cy='20' r='20' />
</PlaceholderLayout>
</div>
</ResponsiveComponent>
<ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
<div className={containerClassesXS}>
<PlaceholderLayout viewBox='0 0 380 140'>
<circle cx='25' cy='27' r='25' />
<rect x='64' y='12' rx='5' ry='5' width='235' height='10' />
<rect x='64' y='36' rx='5' ry='5' width='125' height='10' />
<rect x='0' y='72' rx='5' ry='5' width='370' height='10' />
<rect x='0' y='96' rx='5' ry='5' width='318' height='10' />
<rect x='0' y='122' rx='5' ry='5' width='264' height='10' />
</PlaceholderLayout>
</div>
</ResponsiveComponent>
</Fragment>
)
}