From 44e63f0dac260405f2bf07e9d67871acde37b12d Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 16 Nov 2019 12:28:22 +0700
Subject: [PATCH] Use placeholder for centering

---
 client/covers/SidebarCover.jsx      |  4 ++--
 client/covers/StickyFooterCover.jsx |  6 +++---
 client/covers/StickyHeaderCover.jsx |  4 ++--
 client/layouts/Centering.jsx        | 10 +++++++---
 client/layouts/Sidebar.jsx          |  1 +
 client/layouts/StickyHeader.jsx     |  1 +
 client/placeholders/Dot.jsx         | 10 ++++++++--
 client/placeholders/Frame.jsx       |  5 +----
 8 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/client/covers/SidebarCover.jsx b/client/covers/SidebarCover.jsx
index dbdbf89..8137601 100644
--- a/client/covers/SidebarCover.jsx
+++ b/client/covers/SidebarCover.jsx
@@ -5,13 +5,13 @@ import Line from '../placeholders/Line';
 
 const SidebarCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex">
                 <div className="b--black-30 br flex flex-column justify-end pa1 w-30">
                     <div className="mb1"><Line /></div>
                     <div className="w-80"><Line /></div>
                 </div>
-                <div className="flex-grow-1 pa2">
+                <div className="flex-grow-1 pa2 b--black-30 br bw2">
                     <div className="mb2"><Line /></div>
                     <div className="mb2"><Line /></div>
                     <div className="mb2"><Line /></div>
diff --git a/client/covers/StickyFooterCover.jsx b/client/covers/StickyFooterCover.jsx
index abed0cb..26aeccc 100644
--- a/client/covers/StickyFooterCover.jsx
+++ b/client/covers/StickyFooterCover.jsx
@@ -5,7 +5,7 @@ import Line from '../placeholders/Line';
 
 const StickyFooterCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex flex-column">
                 <div className="flex-shrink-0 b--black-30 br bw2">
                     <div className="w-100 flex items-center pa2">
@@ -13,7 +13,7 @@ const StickyFooterCover = () => {
                         <div className="w1 ml-auto"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
                     </div>
-                    <Line size="medium" />
+                    <Line />
                 </div>
                 <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">
@@ -23,7 +23,7 @@ const StickyFooterCover = () => {
                     </div>
                 </div>
                 <div className="flex-shrink-0">
-                    <Line size="medium" />
+                    <Line />
                     <div className="w-100 flex items-center pa2">
                         <div className="w1"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
diff --git a/client/covers/StickyHeaderCover.jsx b/client/covers/StickyHeaderCover.jsx
index 7979dc3..2b05304 100644
--- a/client/covers/StickyHeaderCover.jsx
+++ b/client/covers/StickyHeaderCover.jsx
@@ -5,7 +5,7 @@ import Line from '../placeholders/Line';
 
 const StickyHeaderCover = () => {
     return (
-        <Frame size="medium">
+        <Frame>
             <div className="h-100 flex flex-column">
                 <div className="flex-shrink-0">
                     <div className="w-100 flex items-center pa2">
@@ -13,7 +13,7 @@ const StickyHeaderCover = () => {
                         <div className="w1 ml-auto"><Line /></div>
                         <div className="w1 ml1"><Line /></div>
                     </div>
-                    <Line size="medium" />
+                    <Line />
                 </div>
                 <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index 17304a0..ec08944 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import Dot from '../placeholders/Dot';
+import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 
@@ -14,7 +16,10 @@ const Centering = () => {
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">
-                        <div className="f1 b">CENTER</div>
+                        <Dot size={64} />
+                        <div className="w-40 mt3"><Rectangle /></div>
+                        <div className="w-30 mt2"><Rectangle /></div>
+                        <div className="w-20 mt2"><Rectangle /></div>
                     </div>
                 }
                 source={
@@ -24,10 +29,9 @@ code={`
 <div style="
     align-items: center;
     display: flex;
-    flex-direction: column;
     justify-content: center;
 ">
-    CENTER
+    ...
 </div>
 `}
 />
diff --git a/client/layouts/Sidebar.jsx b/client/layouts/Sidebar.jsx
index 2adbe24..7958381 100644
--- a/client/layouts/Sidebar.jsx
+++ b/client/layouts/Sidebar.jsx
@@ -12,6 +12,7 @@ const Sidebar = () => {
     return (
         <DetailsLayout>
             <h1 className="f1 tc">Sidebar</h1>
+            <div className="lh-copy mb3">Try to scroll the main content!</div>
             <BrowserFrame
                 content={
                     <div className="h-100 flex">
diff --git a/client/layouts/StickyHeader.jsx b/client/layouts/StickyHeader.jsx
index 17a064e..c951a3b 100644
--- a/client/layouts/StickyHeader.jsx
+++ b/client/layouts/StickyHeader.jsx
@@ -13,6 +13,7 @@ const StickyHeader = () => {
     return (
         <DetailsLayout>
             <h1 className="f1 tc">Sticky header</h1>
+            <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
             <BrowserFrame
                 content={
                     <div>
diff --git a/client/placeholders/Dot.jsx b/client/placeholders/Dot.jsx
index abfb753..7267be8 100644
--- a/client/placeholders/Dot.jsx
+++ b/client/placeholders/Dot.jsx
@@ -1,8 +1,14 @@
 import React from 'react';
 
-const Dot = () => {
+const Dot = ({ size = 16 }) => {
     return (
-        <div className="bg-black-30 br-pill w1 h1" />
+        <div
+            className="bg-black-30 br-pill"
+            style={{
+                height: `${size}px`,
+                width: `${size}px`,
+            }}
+        />
     );
 };
 
diff --git a/client/placeholders/Frame.jsx b/client/placeholders/Frame.jsx
index 545fbb5..fb1d17b 100644
--- a/client/placeholders/Frame.jsx
+++ b/client/placeholders/Frame.jsx
@@ -1,13 +1,10 @@
 import React from 'react';
 
-const Frame = ({ children, size }) => {
-    const bw = (size === 'medium' ? '2px' : '1px');
-
+const Frame = ({ children }) => {
     return (
         <div
             className="ba b--black-30 br2"
             style={{
-                borderWidth: bw,
                 height: '100px',
                 width: '100px',
             }}