diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts index 8c57479..ff855d0 100644 --- a/client/constants/Pattern.ts +++ b/client/constants/Pattern.ts @@ -89,6 +89,7 @@ enum Pattern { Timeline = 'Timeline', TogglePasswordVisibility = 'Toggle password visibility', Tooltip = 'Tooltip', + TreeDiagram = 'Tree diagram', TriangleButtons = 'Triangle buttons', UploadButton = 'Upload button', ValidationIcon = 'Validation icon', diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx index 7d7dfb2..ada3725 100644 --- a/client/pages/ExplorePage.tsx +++ b/client/pages/ExplorePage.tsx @@ -140,6 +140,7 @@ const ExplorePage = () => { + diff --git a/client/patterns/tree-diagram/Cover.tsx b/client/patterns/tree-diagram/Cover.tsx new file mode 100644 index 0000000..7d8a2d9 --- /dev/null +++ b/client/patterns/tree-diagram/Cover.tsx @@ -0,0 +1,137 @@ +/** + * A collection of popular layouts and patterns made with CSS (https://csslayout.io) + * (c) 2019 - 2021 Nguyen Huu Phuoc + */ + +import * as React from 'react'; + +import Frame from '../../placeholders/Frame'; +import Square from '../../placeholders/Square'; + +const Cover: React.FC<{}> = () => { + return ( + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ); +}; + +export default Cover; diff --git a/client/patterns/tree-diagram/Details.tsx b/client/patterns/tree-diagram/Details.tsx new file mode 100644 index 0000000..5439ed7 --- /dev/null +++ b/client/patterns/tree-diagram/Details.tsx @@ -0,0 +1,186 @@ +/** + * A collection of popular layouts and patterns made with CSS (https://csslayout.io) + * (c) 2019 - 2021 Nguyen Huu Phuoc + */ + +import * as React from 'react'; +import { Helmet } from 'react-helmet'; + +import Pattern from '../../constants/Pattern'; +import DetailsLayout from '../../layouts/DetailsLayout'; +import BrowserFrame from '../../placeholders/BrowserFrame'; +import Square from '../../placeholders/Square'; +import './tree-diagram.css'; + +const Details: React.FC<{}> = () => { + const [value, setValue] = React.useState(900); + const decrease = () => setValue(value - 1); + const increase = () => setValue(value + 1); + + return ( + + + + + +
+ +
    +
  • + + ... + + +
      +
    • + + ... + + +
        +
      • ...
        • +
      • ...
        • + ... +
      +
      • +
    • ...
      • + ... +
    +
    • + + + ... +
+
+`} +css={` +.tree-diagram ul { + display: flex; + position: relative; + + /* Reset */ + list-style-type: none; + margin: 0; + padding: 1rem 0.5rem 0rem 0.5rem; +} + +.tree-diagram ul ul::before { + border-right: 1px solid rgba(0, 0, 0, .3); + content: ''; + + /* Position */ + position: absolute; + top: 0; + right: 50%; + + /* Size */ + height: 1rem; + width: 50%; +} + +.tree-diagram li { + padding: 1rem 0.5rem 0rem 0.5rem; + position: relative; + + /* Center the content */ + align-items: center; + display: flex; + flex-direction: column; +} + +.tree-diagram li::before { + border-right: 1px solid rgba(0, 0, 0, .3); + border-top: 1px solid rgba(0, 0, 0, .3); + content: ''; + + /* Position */ + position: absolute; + top: 0; + right: 50%; + + /* Size */ + height: 1rem; + width: 50%; +} + +.tree-diagram li::after { + border-top: 1px solid rgba(0, 0, 0, .3); + content: ''; + + /* Position */ + position: absolute; + top: 0; + right: 0; + + /* Size */ + width: 50%; +} + +.tree-diagram li:first-child::before, +.tree-diagram li:last-child::after { + /* Remove the top of border from the first and last items */ + border-top: none; +} + +/* Add a root item if you want */ +li.tree-diagram__root::before { + border-right: none; +} +`} + > +
+
+
    +
  • + +
      +
    • + +
        +
        • +
      +
      • +
    • + +
        +
      • + +
          +
          • +
          • +
          • +
        +
        • +
        • +
      • + +
          +
          • +
          • +
        +
        • +
      +
      • +
      • +
    +
    • +
+
+
+ +
+ + ); +}; + +export default Details; diff --git a/client/patterns/tree-diagram/tree-diagram.css b/client/patterns/tree-diagram/tree-diagram.css new file mode 100644 index 0000000..306134e --- /dev/null +++ b/client/patterns/tree-diagram/tree-diagram.css @@ -0,0 +1,67 @@ +/** + * A collection of popular layouts and patterns made with CSS (https://csslayout.io) + * (c) 2019 - 2021 Nguyen Huu Phuoc + */ + +.tree-diagram ul { + display: flex; + position: relative; + + /* Reset */ + list-style-type: none; + margin: 0; + padding: 1rem 0.5rem 0rem 0.5rem; +} + +.tree-diagram ul ul::before { + border-right: 1px solid rgba(0, 0, 0, .3); + content: ''; + height: 1rem; + position: absolute; + top: 0; + right: 50%; + width: 50%; +} + +.tree-diagram li { + padding: 1rem 0.5rem 0rem 0.5rem; + position: relative; + + /* Center the content */ + align-items: center; + display: flex; + flex-direction: column; +} + +.tree-diagram li::before { + border-right: 1px solid rgba(0, 0, 0, .3); + border-top: 1px solid rgba(0, 0, 0, .3); + content: ''; + height: 1rem; + + /* Position */ + position: absolute; + top: 0; + right: 50%; + width: 50%; +} + +.tree-diagram li::after { + border-top: 1px solid rgba(0, 0, 0, .3); + content: ''; + + /* Position */ + position: absolute; + top: 0; + right: 0; + width: 50%; +} + +.tree-diagram li:first-child::before, +.tree-diagram li:last-child::after { + border-top: none; +} + +li.tree-diagram__root::before { + border-right: none; +} diff --git a/client/placeholders/Square.tsx b/client/placeholders/Square.tsx index 4dfc006..8af7d2d 100644 --- a/client/placeholders/Square.tsx +++ b/client/placeholders/Square.tsx @@ -7,20 +7,20 @@ import * as React from 'react'; interface SquareProps { backgroundColor?: string; - size?: number; + size?: string; } const Square: React.FC = ({ backgroundColor = 'rgba(0, 0, 0, 0.3)', - size = 8, + size = '100%', }) => { return (
); diff --git a/client/placeholders/browserFrame.css b/client/placeholders/browserFrame.css index 06dde34..7bd6a06 100644 --- a/client/placeholders/browserFrame.css +++ b/client/placeholders/browserFrame.css @@ -10,6 +10,7 @@ .demo__live { height: 32rem; + overflow: auto; } .demo__css, diff --git a/public/sitemap.xml b/public/sitemap.xml index 5a69f95..bf2654b 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -85,6 +85,7 @@ https://csslayout.io/patterns/timeline https://csslayout.io/patterns/toggle-password-visibility https://csslayout.io/patterns/tooltip + https://csslayout.io/patterns/tree-diagram https://csslayout.io/patterns/triangle-buttons https://csslayout.io/patterns/upload-button https://csslayout.io/patterns/validation-icon