From 5605e535ed8abc72a9dbfa88dadfa2dc77d3c1e2 Mon Sep 17 00:00:00 2001 From: Mathieu Ledru Date: Mon, 16 Sep 2024 23:31:34 +0200 Subject: [PATCH] :art: Update symfony ux layout --- assets/styles/_app.scss | 2 +- assets/styles/_themes.scss | 2 +- assets/styles/reboot.scss | 8 +- .../Components/{Layout.php => Content.php} | 8 +- templates/base.html.twig | 15 +- templates/components/Content.html.twig | 7 + templates/components/Footer.html.twig | 24 +-- templates/components/Header.html.twig | 138 +++++++++--------- templates/components/Layout.html.twig | 16 -- templates/home/index.html.twig | 21 +-- .../wave_function_collapse/index.html.twig | 21 +-- 11 files changed, 115 insertions(+), 147 deletions(-) rename src/Twig/Components/{Layout.php => Content.php} (72%) create mode 100644 templates/components/Content.html.twig delete mode 100644 templates/components/Layout.html.twig diff --git a/assets/styles/_app.scss b/assets/styles/_app.scss index 977f3e5..78cf711 100644 --- a/assets/styles/_app.scss +++ b/assets/styles/_app.scss @@ -1,4 +1,4 @@ -body { +.theme { padding-top: 60px; padding-bottom: 60px; diff --git a/assets/styles/_themes.scss b/assets/styles/_themes.scss index f0e13ba..1f4a7f0 100644 --- a/assets/styles/_themes.scss +++ b/assets/styles/_themes.scss @@ -5,7 +5,7 @@ $app-themes: (); @import 'themes/sepia'; @each $app-theme, $app-colors in $app-themes { - body.theme-#{$app-theme} { + .theme-#{$app-theme} { @each $name, $value in $app-colors { --#{$name}-color: #{$value}; } diff --git a/assets/styles/reboot.scss b/assets/styles/reboot.scss index 253f016..91ab074 100644 --- a/assets/styles/reboot.scss +++ b/assets/styles/reboot.scss @@ -1,14 +1,14 @@ -body { +.theme { color: var(--text-color); background-color: var(--bg-color); } -hr { +.theme hr { background-color: var(--border-color); opacity: 1; } -a { +.theme a { color: var(--primary-color); &:hover { @@ -16,7 +16,7 @@ a { } } -input { +.theme input { background-color: var(--input-color); border-color: var(--border-color); diff --git a/src/Twig/Components/Layout.php b/src/Twig/Components/Content.php similarity index 72% rename from src/Twig/Components/Layout.php rename to src/Twig/Components/Content.php index edbd3bf..d9acd20 100644 --- a/src/Twig/Components/Layout.php +++ b/src/Twig/Components/Content.php @@ -10,7 +10,7 @@ use Symfony\UX\LiveComponent\DefaultActionTrait; #[AsLiveComponent] -final class Layout +final class Content { use DefaultActionTrait; @@ -28,6 +28,10 @@ public function mount(Seo $seo) #[LiveListener('themeChanged')] public function changeTheme() { - $this->theme = ThemeEnum::DARK; + $this->theme = match($this->theme) { + ThemeEnum::LIGHT => ThemeEnum::DARK, + ThemeEnum::DARK => ThemeEnum::SEPIA, + ThemeEnum::SEPIA => ThemeEnum::LIGHT, + }; } } diff --git a/templates/base.html.twig b/templates/base.html.twig index cfc83de..2d7953b 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -1,2 +1,15 @@ - \ No newline at end of file + + + + + + {{ seo.title }} + + + {{ importmap('app') }} + + + + + \ No newline at end of file diff --git a/templates/components/Content.html.twig b/templates/components/Content.html.twig new file mode 100644 index 0000000..bdee0f4 --- /dev/null +++ b/templates/components/Content.html.twig @@ -0,0 +1,7 @@ + +
+ + {% block body %}{% endblock %} + +
+ diff --git a/templates/components/Footer.html.twig b/templates/components/Footer.html.twig index a1837c4..7bcb98d 100644 --- a/templates/components/Footer.html.twig +++ b/templates/components/Footer.html.twig @@ -1,11 +1,13 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/templates/components/Header.html.twig b/templates/components/Header.html.twig index 39335a2..7a8e4d7 100644 --- a/templates/components/Header.html.twig +++ b/templates/components/Header.html.twig @@ -1,80 +1,76 @@ -
- - Flow Live - + +
+ + Flow Live + -
-
- -
+
  • - + Wave Function Collapse
-
- \ No newline at end of file + \ No newline at end of file diff --git a/templates/components/Layout.html.twig b/templates/components/Layout.html.twig deleted file mode 100644 index 2a27300..0000000 --- a/templates/components/Layout.html.twig +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - {{ seo.title }} - - - {{ importmap('app') }} - - - - {% block body %}{% endblock %} - - - \ No newline at end of file diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig index 1db3691..a591dc2 100644 --- a/templates/home/index.html.twig +++ b/templates/home/index.html.twig @@ -1,20 +1 @@ -{% extends 'base.html.twig' %} - -{% block title %}Hello HomeController!{% endblock %} - -{% block body %} - - -
-

Hello {{ controller_name }}! ✅

- - This friendly message is coming from: -
    -
  • Your controller at /Users/math/Sites/darkwood/flow-live/src/Controller/HomeController.php
    • -
  • Your template at /Users/math/Sites/darkwood/flow-live/templates/home/index.html.twig
    • -
-
-{% endblock %} +{% extends 'base.html.twig' %} \ No newline at end of file diff --git a/templates/wave_function_collapse/index.html.twig b/templates/wave_function_collapse/index.html.twig index 1e7c690..a591dc2 100644 --- a/templates/wave_function_collapse/index.html.twig +++ b/templates/wave_function_collapse/index.html.twig @@ -1,20 +1 @@ -{% extends 'base.html.twig' %} - -{% block title %}Hello WaveFunctionCollapseController!{% endblock %} - -{% block body %} - - -
-

Hello {{ controller_name }}! ✅

- - This friendly message is coming from: -
    -
  • Your controller at /Users/math/Sites/darkwood/flow-live/src/Controller/WaveFunctionCollapseController.php
    • -
  • Your template at /Users/math/Sites/darkwood/flow-live/templates/wave_function_collapse/index.html.twig
    • -
-
-{% endblock %} +{% extends 'base.html.twig' %} \ No newline at end of file