From 9d934a86b652b608a3aaccb3050d3c91dd039431 Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Mon, 15 Jul 2024 16:39:33 +0200 Subject: [PATCH 1/2] feat(layout): wip --- components/Layouts/Layout/Layout.stories.js | 3 +++ components/Layouts/Layout/Layout.twig | 8 +++++++ components/Layouts/Layout/layout.css | 25 +++++++++++++++++++++ 3 files changed, 36 insertions(+) create mode 100644 components/Layouts/Layout/Layout.stories.js create mode 100644 components/Layouts/Layout/Layout.twig create mode 100644 components/Layouts/Layout/layout.css diff --git a/components/Layouts/Layout/Layout.stories.js b/components/Layouts/Layout/Layout.stories.js new file mode 100644 index 0000000..830c8ee --- /dev/null +++ b/components/Layouts/Layout/Layout.stories.js @@ -0,0 +1,3 @@ +export default { + title: 'Design System/Layouts/Layout' +}; diff --git a/components/Layouts/Layout/Layout.twig b/components/Layouts/Layout/Layout.twig new file mode 100644 index 0000000..51c6c3c --- /dev/null +++ b/components/Layouts/Layout/Layout.twig @@ -0,0 +1,8 @@ +
+ {% include '../../Organisms/Header/Header.twig' %} + {% include '../../Organisms/Sidebar/Sidebar.twig' %} +
+ Hello Flexy ! +
+ {% include '../../Organisms/Footer/Footer.twig' %} +
diff --git a/components/Layouts/Layout/layout.css b/components/Layouts/Layout/layout.css new file mode 100644 index 0000000..f2c688d --- /dev/null +++ b/components/Layouts/Layout/layout.css @@ -0,0 +1,25 @@ +.Layout { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-column-gap: 0px; + grid-row-gap: 0px; +} + +.Header { + grid-area: 1 / 1 / 2 / 4; +} + +.Sidebar { + grid-area: 2 / 1 / 4 / 2; +} + +.Footer { + grid-area: 3 / 2 / 4 / 4; +} + +.Content { + grid-area: 2 / 2 / 3 / 4; + padding: 32px; + background: rgba(245, 245, 245, 1); +} From 7ec7c8deeaa7dd1c34ffd892d84980930ceb5ed2 Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Thu, 18 Jul 2024 10:44:59 +0200 Subject: [PATCH 2/2] feat(layout): header / sidebar / footer --- components/Layouts/Layout/Layout.stories.js | 12 ++++++ components/Layouts/Layout/Layout.twig | 4 +- components/Layouts/Layout/layout.css | 46 +++++++++++++++++---- components/Organisms/Footer/footer.css | 1 + components/Organisms/Sidebar/Sidebar.twig | 2 +- components/Organisms/Sidebar/sidebar.css | 8 ++++ 6 files changed, 62 insertions(+), 11 deletions(-) diff --git a/components/Layouts/Layout/Layout.stories.js b/components/Layouts/Layout/Layout.stories.js index 830c8ee..d43e2aa 100644 --- a/components/Layouts/Layout/Layout.stories.js +++ b/components/Layouts/Layout/Layout.stories.js @@ -1,3 +1,15 @@ +import { header } from '../../Organisms/Header/header'; +import { sidebar } from '../../Organisms/Sidebar/sidebar'; +import Layout from './Layout.twig'; + export default { title: 'Design System/Layouts/Layout' }; + +export const base = { + render: (args) => Layout(args), + play: () => { + header(); + sidebar(); + } +}; diff --git a/components/Layouts/Layout/Layout.twig b/components/Layouts/Layout/Layout.twig index 51c6c3c..4442ccb 100644 --- a/components/Layouts/Layout/Layout.twig +++ b/components/Layouts/Layout/Layout.twig @@ -1,8 +1,8 @@
{% include '../../Organisms/Header/Header.twig' %} {% include '../../Organisms/Sidebar/Sidebar.twig' %} -
+
Hello Flexy ! -
+ {% include '../../Organisms/Footer/Footer.twig' %}
diff --git a/components/Layouts/Layout/layout.css b/components/Layouts/Layout/layout.css index f2c688d..1aaa1e1 100644 --- a/components/Layouts/Layout/layout.css +++ b/components/Layouts/Layout/layout.css @@ -1,25 +1,55 @@ .Layout { display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(3, 1fr); - grid-column-gap: 0px; - grid-row-gap: 0px; + grid-template-rows: 88px auto 48px; + grid-template-columns: 240px auto; + height: 100%; + + @media (max-width: 768px) { + grid-template-rows: 56px auto auto; + grid-template-columns: auto; + } } .Header { - grid-area: 1 / 1 / 2 / 4; + grid-row-start: 1; + grid-column-start: 1; + + grid-row-end: 2; + grid-column-end: 3; } .Sidebar { - grid-area: 2 / 1 / 4 / 2; + grid-area: sidebar; + grid-row-start: 2; + grid-column-start: 1; + grid-row-end: 4; + grid-column-end: 2; } .Footer { - grid-area: 3 / 2 / 4 / 4; + grid-row-start: 3; + grid-column-start: 2; + + grid-row-end: 4; + grid-column-end: 3; + + @media (max-width: 768px) { + grid-column-start: 1; + } } .Content { - grid-area: 2 / 2 / 3 / 4; + grid-row-start: 2; + grid-column-start: 2; + + grid-row-end: 3; + grid-column-end: 3; + padding: 32px; background: rgba(245, 245, 245, 1); + + @media (max-width: 768px) { + padding: 16px; + grid-column-start: 1; + } } diff --git a/components/Organisms/Footer/footer.css b/components/Organisms/Footer/footer.css index a9de51d..73b751d 100644 --- a/components/Organisms/Footer/footer.css +++ b/components/Organisms/Footer/footer.css @@ -2,6 +2,7 @@ background-color: var(--white); display: flex; justify-content: space-between; + align-items: center; border-top: 1px solid var(--grey-lighter); padding: 1rem; diff --git a/components/Organisms/Sidebar/Sidebar.twig b/components/Organisms/Sidebar/Sidebar.twig index 4fbbdb6..4f8bc32 100644 --- a/components/Organisms/Sidebar/Sidebar.twig +++ b/components/Organisms/Sidebar/Sidebar.twig @@ -48,6 +48,6 @@
{{ source('/images/thelia-white.svg') }}
- V2.5.0 + V2.5.0 diff --git a/components/Organisms/Sidebar/sidebar.css b/components/Organisms/Sidebar/sidebar.css index 7b656b3..736d131 100644 --- a/components/Organisms/Sidebar/sidebar.css +++ b/components/Organisms/Sidebar/sidebar.css @@ -6,6 +6,10 @@ padding: 16px; width: 240px; + @media (max-width: 768px) { + display: none; + } + &-menu { display: flex; flex-direction: column; @@ -32,6 +36,10 @@ align-items: center; gap: 8px; + span { + color: rgba(255, 255, 255, 0.5); + } + &-icon { height: 20px; }