From 254ba0b4b6d65af09ba747e5fae38af6ac929aac Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 15 Nov 2019 21:43:47 +0700 Subject: [PATCH 1/5] Move header from layout --- client/DetailsLayout.jsx | 3 +-- client/layouts/Centering.jsx | 3 ++- client/layouts/StickyFooter.jsx | 3 ++- client/layouts/StickyHeader.jsx | 3 ++- client/placeholders/BrowserFrame.jsx | 2 +- 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/client/DetailsLayout.jsx b/client/DetailsLayout.jsx index 2c34b60..f59d31a 100644 --- a/client/DetailsLayout.jsx +++ b/client/DetailsLayout.jsx @@ -3,14 +3,13 @@ import { Link } from 'react-router-dom'; import Layout from './Layout'; -const DetailsLayout = ({ name, children }) => { +const DetailsLayout = ({ children }) => { return (
CSS Layout
-

{name}

{children}
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx index 1714990..17304a0 100644 --- a/client/layouts/Centering.jsx +++ b/client/layouts/Centering.jsx @@ -9,7 +9,8 @@ const Centering = () => { useDocumentTitle('CSS Layout ∙ Centering'); return ( - + +

Centering

diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx index 2ea0791..eb6e565 100644 --- a/client/layouts/StickyFooter.jsx +++ b/client/layouts/StickyFooter.jsx @@ -9,7 +9,8 @@ const StickyFooter = () => { useDocumentTitle('CSS Layout ∙ Sticky footer'); return ( - + +

Sticky footer

The footer always sticks to the bottom if the main content is short.
diff --git a/client/layouts/StickyHeader.jsx b/client/layouts/StickyHeader.jsx index 36f5ad5..48d054a 100644 --- a/client/layouts/StickyHeader.jsx +++ b/client/layouts/StickyHeader.jsx @@ -9,7 +9,8 @@ const StickyHeader = () => { useDocumentTitle('CSS Layout ∙ Sticky header'); return ( - + +

Sticky header

diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx index afd086b..6114202 100644 --- a/client/placeholders/BrowserFrame.jsx +++ b/client/placeholders/BrowserFrame.jsx @@ -6,7 +6,7 @@ const BrowserFrame = ({ content, source }) => { return (
-
+
From b8e8aff61c51e93bfdad0edd1d8c9e64d1b606eb Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Sat, 16 Nov 2019 11:14:31 +0700 Subject: [PATCH 2/5] Add sidebar layout --- client/App.jsx | 2 ++ client/Home.jsx | 7 ++++ client/Layout.jsx | 6 ++-- client/covers/SidebarCover.jsx | 25 ++++++++++++++ client/helpers/random.js | 2 ++ client/helpers/randomFromArray.js | 2 ++ client/helpers/shuffe.js | 6 ++++ client/layouts/Sidebar.jsx | 57 +++++++++++++++++++++++++++++++ client/placeholders/Block.jsx | 23 +++++++++++++ client/placeholders/Line.jsx | 6 ++-- client/placeholders/Rectangle.jsx | 12 +++++++ 11 files changed, 140 insertions(+), 8 deletions(-) create mode 100644 client/covers/SidebarCover.jsx create mode 100644 client/helpers/random.js create mode 100644 client/helpers/randomFromArray.js create mode 100644 client/helpers/shuffe.js create mode 100644 client/layouts/Sidebar.jsx create mode 100644 client/placeholders/Block.jsx create mode 100644 client/placeholders/Rectangle.jsx diff --git a/client/App.jsx b/client/App.jsx index 9d47369..709fd87 100644 --- a/client/App.jsx +++ b/client/App.jsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import Centering from './layouts/Centering'; +import Sidebar from './layouts/Sidebar'; import StickyFooter from './layouts/StickyFooter'; import StickyHeader from './layouts/StickyHeader'; @@ -12,6 +13,7 @@ const App = () => { + diff --git a/client/Home.jsx b/client/Home.jsx index 1c4b21c..9deaeea 100644 --- a/client/Home.jsx +++ b/client/Home.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import CenterCover from './covers/CenterCover'; +import SidebarCover from './covers/SidebarCover'; import StickyFooterCover from './covers/StickyFooterCover'; import StickyHeaderCover from './covers/StickyHeaderCover'; import Layout from './Layout'; @@ -30,6 +31,12 @@ const Home = () => {

Layouts

+
+ + +

Sidebar

+ +
diff --git a/client/Layout.jsx b/client/Layout.jsx index 67c38b0..c7714f8 100644 --- a/client/Layout.jsx +++ b/client/Layout.jsx @@ -11,22 +11,20 @@ const Layout = ({ children }) => { {children}
-
+
Other cool things
-
+ } + source={ + + + + + +
+ ... +
+
+`} +/> + } + /> + + ); +}; + +export default Sidebar; diff --git a/client/placeholders/Block.jsx b/client/placeholders/Block.jsx new file mode 100644 index 0000000..f5e5b52 --- /dev/null +++ b/client/placeholders/Block.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import random from '../helpers/random'; +import Rectangle from './Rectangle'; + +const Block = ({ numberOfBlocks }) => { + return ( +
+ { + Array(numberOfBlocks).fill(0).map((_, i) => { + const s = random(1, 5); + return ( +
+ +
+ ); + }) + } +
+ ); +}; + +export default Block; diff --git a/client/placeholders/Line.jsx b/client/placeholders/Line.jsx index 1386d8d..7d41c57 100644 --- a/client/placeholders/Line.jsx +++ b/client/placeholders/Line.jsx @@ -1,12 +1,10 @@ import React from 'react'; -const Line = ({ size }) => { - const h = (size === 'medium' ? '2px' : '1px'); - +const Line = () => { return (
); }; diff --git a/client/placeholders/Rectangle.jsx b/client/placeholders/Rectangle.jsx new file mode 100644 index 0000000..6b3ba59 --- /dev/null +++ b/client/placeholders/Rectangle.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Rectangle = ({ height }) => { + return ( +
+ ); +}; + +export default Rectangle; From 5172ecab86f822b7f6a2145178de2bcc824fedd9 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Sat, 16 Nov 2019 12:05:26 +0700 Subject: [PATCH 3/5] Use placeholder for sticky footer --- client/layouts/StickyFooter.jsx | 14 ++++++++------ client/placeholders/Rectangle.jsx | 2 +- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx index eb6e565..fcd2014 100644 --- a/client/layouts/StickyFooter.jsx +++ b/client/layouts/StickyFooter.jsx @@ -1,7 +1,9 @@ import React from 'react'; import DetailsLayout from '../DetailsLayout'; +import Block from '../placeholders/Block'; import BrowserFrame from '../placeholders/BrowserFrame'; +import Rectangle from '../placeholders/Rectangle'; import SampleCode from '../SampleCode'; import useDocumentTitle from '../useDocumentTitle'; @@ -16,15 +18,15 @@ const StickyFooter = () => {
-
- Header +
+
+
- Content +
-
- Footer +
+
} diff --git a/client/placeholders/Rectangle.jsx b/client/placeholders/Rectangle.jsx index 6b3ba59..933cd6e 100644 --- a/client/placeholders/Rectangle.jsx +++ b/client/placeholders/Rectangle.jsx @@ -1,6 +1,6 @@ import React from 'react'; -const Rectangle = ({ height }) => { +const Rectangle = ({ height = 8 }) => { return (
Date: Sat, 16 Nov 2019 12:10:14 +0700 Subject: [PATCH 4/5] Use placeholder for sticky header --- client/layouts/StickyHeader.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/client/layouts/StickyHeader.jsx b/client/layouts/StickyHeader.jsx index 48d054a..17a064e 100644 --- a/client/layouts/StickyHeader.jsx +++ b/client/layouts/StickyHeader.jsx @@ -1,7 +1,9 @@ import React from 'react'; import DetailsLayout from '../DetailsLayout'; +import Block from '../placeholders/Block'; import BrowserFrame from '../placeholders/BrowserFrame'; +import Rectangle from '../placeholders/Rectangle'; import SampleCode from '../SampleCode'; import useDocumentTitle from '../useDocumentTitle'; @@ -14,14 +16,13 @@ const StickyHeader = () => { -
- Header +
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.
+
+
+
} From 44e63f0dac260405f2bf07e9d67871acde37b12d Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Sat, 16 Nov 2019 12:28:22 +0700 Subject: [PATCH 5/5] 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 ( - +
-
+
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 ( - +
@@ -13,7 +13,7 @@ const StickyFooterCover = () => {
- +
@@ -23,7 +23,7 @@ const StickyFooterCover = () => {
- +
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 ( - +
@@ -13,7 +13,7 @@ const StickyHeaderCover = () => {
- +
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 = () => { -
CENTER
+ +
+
+
} source={ @@ -24,10 +29,9 @@ code={`
- CENTER + ...
`} /> 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 (

Sidebar

+
Try to scroll the main content!
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 (

Sticky header

+
Try to scroll the main content to see the header sticks to the top of page.
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 ( -
+
); }; 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 (