Merge pull request #16 from phuoc-ng/split-screen

Split screen

client/App.jsx

@@ -11,6 +11,7 @@ import InputAddon from './layouts/input-add-on/Details';
 import MediaObject from './layouts/media-object/Details';
 import SameHeightColumns from './layouts/same-height-columns/Details';
 import Sidebar from './layouts/sidebar/Details';
+import SplitScreen from './layouts/split-screen/Details';
 import StepperInput from './layouts/stepper-input/Details';
 import StickyFooter from './layouts/sticky-footer/Details';
 import StickyHeader from './layouts/sticky-header/Details';
@@ -29,6 +30,7 @@ const App = () => {
                 <Route exact={true} path='/media-object'><MediaObject /></Route>
                 <Route exact={true} path='/same-height-columns'><SameHeightColumns /></Route>
                 <Route exact={true} path='/sidebar'><Sidebar /></Route>
+                <Route exact={true} path='/split-screen'><SplitScreen /></Route>
                 <Route exact={true} path='/stepper-input'><StepperInput /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
                 <Route exact={true} path='/sticky-header'><StickyHeader /></Route>

client/Home.jsx

@@ -10,6 +10,7 @@ import InputAddonCover from './layouts/input-add-on/Cover';
 import MediaObjectCover from './layouts/media-object/Cover';
 import SameHeightColumnsCover from './layouts/same-height-columns/Cover';
 import SidebarCover from './layouts/sidebar/Cover';
+import SplitScreenCover from './layouts/split-screen/Cover';
 import StepperInputCover from './layouts/stepper-input/Cover';
 import StickyFooterCover from './layouts/sticky-footer/Cover';
 import StickyHeaderCover from './layouts/sticky-header/Cover';
@@ -51,6 +52,12 @@ const Home = () => {
                             <h4 className="f4 mv0 pt3">Sidebar</h4>
                         </Link>
                     </div>
+                    <div className="pa1 w-20">
+                        <Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <SplitScreenCover />
+                            <h4 className="f4 mv0 pt3">Split screen</h4>
+                        </Link>
+                    </div>
                     <div className="pa1 w-20">
                         <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <StickyFooterCover />

client/layouts/button-with-icon/Cover.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Rectangle from '../../placeholders/Rectangle';
 
@@ -9,7 +9,7 @@ const Cover = () => {
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center pa2">
                 <div className="w-100 h2 flex flex-row items-center ba b--black-30 br2 ph1">
-                    <div className="mr1"><Dot /></div>
+                    <div className="mr1"><Circle /></div>
                     <Rectangle />
                 </div>
             </div>

client/layouts/button-with-icon/Details.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import DetailsLayout from '../../DetailsLayout';
-import Dot from '../../placeholders/Dot';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
 import useDocumentTitle from '../../useDocumentTitle';
@@ -18,7 +18,7 @@ const Details = () => {
                     <div className="h-100 flex flex-column items-center justify-center">
                         <div className="w5">
                             <button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
-                                <div className="mr2"><Dot size={32} /></div>
+                                <div className="mr2"><Circle size={32} /></div>
                                 <Rectangle />
                             </button>
                         </div>

client/layouts/centering/Cover.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Frame from '../../placeholders/Frame';
 import Line from '../../placeholders/Line';
 
@@ -8,7 +8,7 @@ const Cover = () => {
     return (
         <Frame>
             <div className="h-100 flex flex-column items-center justify-center">
-                <Dot />
+                <Circle />
                 <div className="w-50 mv1">
                     <Line />
                 </div>

client/layouts/centering/Details.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import DetailsLayout from '../../DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Dot from '../../placeholders/Dot';
+import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
 import useDocumentTitle from '../../useDocumentTitle';
@@ -16,7 +16,7 @@ const Details = () => {
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">
-                        <Dot size={64} />
+                        <Circle size={64} />
                         <div className="w-40 mt3"><Rectangle /></div>
                         <div className="w-30 mt2"><Rectangle /></div>
                         <div className="w-20 mt2"><Rectangle /></div>

client/layouts/split-screen/Cover.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex">
+                <div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
+                    <div className="mb1"><Circle /></div>
+                </div>
+                <div className="flex flex-column justify-center" style={{ flex: 1 }}>
+                    <div className="pa2">
+                        <div className="mb1 w-100"><Line /></div>
+                        <div className="mb1 w-100"><Line /></div>
+                        <div className="mb1 w-80"><Line /></div>
+                        <div className="mb1 w-80"><Line /></div>
+                        <div className="w-60"><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/layouts/split-screen/Details.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Block from '../../placeholders/Block';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../useDocumentTitle';
+
+const Details = () => {
+    useDocumentTitle('CSS Layout ∙ Split screen');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Split screen</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex">
+                        <div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
+                            <div className="mb3"><Circle size={128} /></div>
+                            <div className="w-60"><Rectangle /></div>
+                        </div>
+                        <div className="flex flex-column justify-center" style={{ flex: 1 }}>
+                            <div className="pa4">
+                                <div className="mb4"><Rectangle /></div>
+                                <div className="mb4"><Block numberOfBlocks={15} /></div>
+                                <Block numberOfBlocks={10} />
+                            </div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="display: flex;">
+    <!-- Left content -->
+    <div style="flex: 1;">
+        ...
+    </div>
+
+    <!-- Right content -->
+    <div style="flex: 1;">
+        ...
+    </div>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/placeholders/Circle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Dot = ({ size = 16 }) => {
+const Circle = ({ size = 16 }) => {
     return (
         <div
             className="bg-black-30 br-pill"
@@ -12,4 +12,4 @@ const Dot = ({ size = 16 }) => {
     );
 };
 
-export default Dot;
+export default Circle;