Updated Placeholder Responsiveness and Added new Placeholders

• Updated: - Placeholder Responsiveness • Added: - new Placeholders
2020-07-29 15:40:47 -05:00
parent 73234ac52b
commit 13127960c4
24 changed files with 256 additions and 89 deletions
--- a/app/javascript/gabsocial/components/placeholder/account_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/account_placeholder.js
@@ -6,10 +6,11 @@ export default class AccountPlaceholder extends PureComponent {
  
  static propTypes = {
    isLast: PropTypes.bool,
+    isSmall: PropTypes.bool,
  }

  render() {
-    const { isLast } = this.props
+    const { isLast, isSmall } = this.props

    const classes = CX({
      default: 1,
@@ -21,12 +22,24 @@ export default class AccountPlaceholder extends PureComponent {

    const width = getRandomInt(120, 300)

+    if (isSmall) {
+      return (
+        <div className={classes}>
+          <PlaceholderLayout viewBox='0 0 400 60'>
+            <circle cx='27' cy='28' r='27' />
+            <rect x='72' y='10' rx='5' ry='5' width={width} height='14' /> 
+            <rect x='72' y='36' rx='5' ry='5' width='108' height='14' /> 
+          </PlaceholderLayout>
+        </div>
+      )
+    }
+
    return (
      <div className={classes}>
-        <PlaceholderLayout viewBox='0 0 400 60'>
-          <circle cx='27' cy='28' r='27' />
-          <rect x='72' y='10' rx='5' ry='5' width={width} height='14' /> 
-          <rect x='72' y='36' rx='5' ry='5' width='108' height='14' /> 
+        <PlaceholderLayout viewBox='0 0 400 32'>
+          <rect x="38" y="4" rx="3" ry="3" width="268" height="6" /> 
+          <circle cx="14" cy="14" r="14" /> 
+          <rect x="36" y="18" rx="3" ry="3" width="208" height="6" />
        </PlaceholderLayout>
      </div>
    )
--- a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
@@ -1,6 +1,7 @@
 import { CX } from '../../constants'
 import { getRandomInt } from '../../utils/numbers'
 import PlaceholderLayout from './placeholder_layout'
+import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'

 export default class ListItemPlaceholder extends PureComponent {
  
@@ -19,15 +20,26 @@ export default class ListItemPlaceholder extends PureComponent {
      borderBottom1PX: !isLast,
    })

+    const classesXS = CX({
+      default: 1,
+      px15: 1,
+      py7: 1,
+      borderColorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
    const width = getRandomInt(120, 375)

    return (
-      <div className={classes}>
+      <ResponsiveClassesComponent
+        classNames={classes}
+        classNamesXS={classesXS}
+      >
        <PlaceholderLayout viewBox='0 0 400 30'>
          <circle cx='10' cy='17' r='10' /> 
          <rect x='30' y='12' rx='5' ry='5' width={width} height='12' />
        </PlaceholderLayout>
-      </div>
+      </ResponsiveClassesComponent>
    )
  }

--- a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
@@ -2,10 +2,6 @@ import PlaceholderLayout from './placeholder_layout'

 export default class MediaGalleryPanelPlaceholder extends PureComponent {
  
-  static propTypes = {
-    loaderProps: PropTypes.object,
-  }
-
  render() {
    return (
      <div className={_s.default}>
--- a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
@@ -0,0 +1,28 @@
+import PlaceholderLayout from './placeholder_layout'
+
+export default class MediaGalleryPlaceholder extends PureComponent {
+  
+  static propTypes = {
+    type: PropTypes.string,
+  }
+
+  render() {
+    const { type } = this.props
+
+    return (
+      <div className={[_s.default, _s.px5, _s.py5].join(' ')}>
+        <PlaceholderLayout viewBox='0 0 400 196'>
+          <rect x='0' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='100' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='300' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='200' y='0' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='-2' y='100' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='100' y='100' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='300' y='100' rx='0' ry='0' width='96' height='96' /> 
+          <rect x='200' y='100' rx='0' ry='0' width='96' height='96' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
@@ -1,5 +1,10 @@
-import { CX } from '../../constants'
+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 NotificationPlaceholder extends PureComponent {
@@ -19,33 +24,64 @@ export default class NotificationPlaceholder extends PureComponent {
      borderBottom1PX: !isLast,
    })

+    const classesXS = CX({
+      default: 1,
+      px15: 1,
+      py15: 1,
+      borderColorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
    const width1 = getRandomInt(100, 340)
    const width2 = getRandomInt(120, 320)
    const left = width2 + 30

    return (
-      <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' /> 
-            <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='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='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='130' y='152' rx='4' ry='4' width='26' height='8' />
-          </PlaceholderLayout>
-        </div>
-      </div>
+      <Fragment>
+        <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
+          <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' /> 
+                <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='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='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='130' y='152' rx='4' ry='4' width='26' height='8' />
+              </PlaceholderLayout>
+            </div>
+          </div>
+        </ResponsiveComponent>
+        <ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
+          <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' /> 
+                <rect x='12' y='174' rx='5' ry='5' width='120' height='10' />
+              </PlaceholderLayout>
+            </div>
+          </div>
+        </ResponsiveComponent>
+      </Fragment>
    )
  }

--- a/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
@@ -0,0 +1,32 @@
+import PlaceholderLayout from './placeholder_layout'
+
+export default class ProfileHeaderXSPlaceholder extends PureComponent {
+  
+  render() {
+    return (
+      <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
+        <PlaceholderLayout viewBox='0 0 400 660'>
+          <rect x='0' y='0' rx='0' ry='0' width='400' height='202' /> 
+          <circle cx='200' cy='200' r='54' /> 
+          <rect x='78' y='272' rx='9' ry='9' width='240' height='18' /> 
+          <rect x='110' y='301' rx='7' ry='7' width='180' height='14' />
+          <rect x='125' y='334' rx='23' ry='23' width='150' height='46' />
+          <rect x='0' y='402' rx='6' ry='6' width='380' height='12' /> 
+          <rect x='0' y='426' rx='6' ry='6' width='340' height='12' /> 
+          <rect x='0' y='450' rx='6' ry='6' width='200' height='12' />
+          <rect x='0' y='476' rx='0' ry='0' width='400' height='1' /> 
+          <rect x='0' y='492' rx='6' ry='6' width='240' height='12' />
+          <rect x='0' y='520' rx='0' ry='0' width='400' height='1' /> 
+          <circle cx='80' cy='574' r='30' /> 
+          <circle cx='200' cy='576' r='32' /> 
+          <circle cx='320' cy='576' r='32' /> 
+          <rect x='10' y='630' rx='11' ry='11' width='80' height='22' /> 
+          <rect x='110' y='630' rx='11' ry='11' width='80' height='22' /> 
+          <rect x='310' y='630' rx='11' ry='11' width='80' height='22' /> 
+          <rect x='210' y='630' rx='11' ry='11' width='80' height='22' />
+        </PlaceholderLayout>
+      </div>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
@@ -1,10 +1,6 @@
 import PlaceholderLayout from './placeholder_layout'

 export default class ProfileStatsPanelPlaceholder extends PureComponent {
-  
-  static propTypes = {
-    loaderProps: PropTypes.object,
-  }

  render() {
    return (
--- a/app/javascript/gabsocial/components/placeholder/status_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/status_placeholder.js
@@ -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>
    )

  }