From e6f6a31ca013b6960e69f4b31544c2af4c79d83d Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Wed, 21 Sep 2022 13:52:09 +0700 Subject: [PATCH] feat: Split screen --- contents/_includes/patterns/split-screen.njk | 8 ++ contents/index.njk | 1 + contents/split-screen.md | 36 ++++++++ pages/split-screen/index.tsx | 86 -------------------- patterns/split-screen/Cover.tsx | 55 ------------- styles/index.scss | 1 + styles/patterns/_split-screen.scss | 22 +++++ 7 files changed, 68 insertions(+), 141 deletions(-) create mode 100644 contents/_includes/patterns/split-screen.njk create mode 100644 contents/split-screen.md delete mode 100644 pages/split-screen/index.tsx delete mode 100644 patterns/split-screen/Cover.tsx create mode 100644 styles/patterns/_split-screen.scss diff --git a/contents/_includes/patterns/split-screen.njk b/contents/_includes/patterns/split-screen.njk new file mode 100644 index 0000000..bf23a4d --- /dev/null +++ b/contents/_includes/patterns/split-screen.njk @@ -0,0 +1,8 @@ +
+
+ {% circle "md" %} +
+
+ {% lines "hor", 10 %} +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 525b040..b3ede1c 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -115,6 +115,7 @@ eleventyExcludeFromCollections: true {% pattern "Same height columns" %}{% include "patterns/same-height-columns.njk" %}{% endpattern %} {% pattern "Sidebar" %}{% include "patterns/sidebar.njk" %}{% endpattern %} {% pattern "Simple grid" %}{% include "patterns/simple-grid.njk" %}{% endpattern %} + {% pattern "Split screen" %}{% include "patterns/split-screen.njk" %}{% endpattern %} diff --git a/contents/split-screen.md b/contents/split-screen.md new file mode 100644 index 0000000..cb3babd --- /dev/null +++ b/contents/split-screen.md @@ -0,0 +1,36 @@ +--- +layout: layouts/post.njk +title: Split screen +description: Create a split screen with CSS flexbox +keywords: css flexbox, css layout, css split screen +--- + +## HTML + +```html +
+ +
+ ... +
+ + +
+ ... +
+
+``` + +## CSS + +```css +.split-screen { + display: flex; +} + +.split-screen__half { + flex: 1; +} +``` + +{% demo %}{% include "patterns/split-screen.njk" %}{% enddemo %} diff --git a/pages/split-screen/index.tsx b/pages/split-screen/index.tsx deleted file mode 100644 index e47b9b9..0000000 --- a/pages/split-screen/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
- ... -
- - -
- ... -
- -`} - css={` - .container { - display: flex; - } - - .container__half { - flex: 1; - } - `} - > -
-
-
- -
-
- -
-
-
-
-
- -
-
- -
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/split-screen/Cover.tsx b/patterns/split-screen/Cover.tsx deleted file mode 100644 index 10ad5bd..0000000 --- a/patterns/split-screen/Cover.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index bb8d185..bde41fd 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -74,6 +74,7 @@ @import './patterns/simple-grid'; @import './patterns/slider'; @import './patterns/spin-button'; +@import './patterns/split-screen'; @import './patterns/stacked-cards'; @import './patterns/stamp-border'; @import './patterns/statistic'; diff --git a/styles/patterns/_split-screen.scss b/styles/patterns/_split-screen.scss new file mode 100644 index 0000000..2962e98 --- /dev/null +++ b/styles/patterns/_split-screen.scss @@ -0,0 +1,22 @@ +.split-screen { + display: flex; + + /* Demo */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + height: 100%; + width: 100%; +} + +.split-screen__half { + flex: 1; + + /* Demo */ + align-items: center; + display: flex; + justify-content: center; +} + +.split-screen__half:first-child { + border-right: 1px solid #d1d5db; +} \ No newline at end of file