🎨 Update symfony ux layout

matyo91 · Sep 16, 2024 · 5605e53 · 5605e53
1 parent 1d37d58
commit 5605e53
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 147 deletions.
diff --git 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
@@ -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
@@ -1,22 +1,22 @@
-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 {
     color: var(--primary-hover-color);
   }
 }
 
-input {
+.theme input {
   background-color: var(--input-color);
   border-color: var(--border-color);
 

diff --git a/src/Twig/Components/Layout.php → src/Twig/Components/Content.php b/src/Twig/Components/Layout.php → 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
@@ -1,2 +1,15 @@
 <!DOCTYPE html>
-<twig:Layout seo="{{ seo }}" />
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <link rel="icon" type="image/png" href="{{ asset('images/logo.png') }}">
+        <title>{{ seo.title }}</title>
+        <meta name="description" content="{{ seo.description }}" />
+        <link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
+        {{ importmap('app') }}
+    </head>
+    <body id="{{ seo.page }}">
+        <twig:Content seo="{{ seo }}" />
+    </body>
+</html>
diff --git a/templates/components/Content.html.twig b/templates/components/Content.html.twig
@@ -0,0 +1,7 @@
+<div{{ attributes }}>
+    <div class="vh-100 theme theme-{{ theme.value }}">
+        <twig:Header key="{{ theme.value }}" seo="{{ seo }}" theme="{{ theme }}" />
+        {% block body %}{% endblock %}
+        <twig:Footer />
+    </div>
+</div>
diff --git a/templates/components/Footer.html.twig b/templates/components/Footer.html.twig
@@ -1,11 +1,13 @@
-<footer class="text-muted d-flex border-top">
-    <div class="container-fluid">
-        <ul class="nav nav-bottom justify-content-end">
-            <li class="nav-item">
-                <a class="nav-link" href="{{ path('app_home') }}">
-                    Home
-                </a>
-            </li>
-        </ul>
-    </div>
-</footer>
+<div{{ attributes }}>
+    <footer class="text-muted d-flex border-top">
+        <div class="container-fluid">
+            <ul class="nav nav-bottom justify-content-end">
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ path('app_home') }}">
+                        Home
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </footer>
+</div>
diff --git a/templates/components/Header.html.twig b/templates/components/Header.html.twig
@@ -1,80 +1,76 @@
-<header class="navbar navbar-top navbar-expand flex-row">
-    <a class="navbar-brand mr-0 mr-md-2" aria-label="Flow Live" href="{{ path('app_home') }}">
-        <img src="{{ asset('images/logo.png') }}" width="36" height="36" class="d-block" alt="Flow Live" />
-    </a>
+<div{{ attributes }}>
+    <header class="navbar navbar-top navbar-expand flex-row">
+        <a class="navbar-brand mr-0 mr-md-2" aria-label="Flow Live" href="{{ path('app_home') }}">
+            <img src="{{ asset('images/logo.png') }}" width="36" height="36" class="d-block" alt="Flow Live" />
+        </a>
 
-    <div class="navbar-nav-scroll d-none d-md-flex">
-        <ul class="navbar-nav bd-navbar-nav flex-row">
+        <div class="navbar-nav-scroll d-none d-md-flex">
+            <ul class="navbar-nav bd-navbar-nav flex-row">
+                <li class="nav-item">
+                    <a class="nav-link{{ seo.page == 'wave-function-collapse' ? ' active' : '' }}" href="{{ path('app_wave_function_collapse') }}">Wave Function Collapse</a>
+                </li>
+            </ul>
+        </div>
+
+        <ul class="navbar-nav flex-row ms-auto">
+            <li class="nav-item">
+                <a
+                    class="nav-link"
+                    href="https://github.com/darkwood-com/flow"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="GitHub"
+                >
+                    <twig:ux:icon name="bi:github" class="svg-inline--fa" />
+                </a>
+            </li>
             <li class="nav-item">
-                <a class="nav-link{{ seo.page == 'home' ? ' active' : '' }}" href="{{ path('app_home') }}">Home</a>
+                <a
+                    class="nav-link"
+                    href="https://twitter.com/darkwood_com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Twitter"
+                >
+                    <twig:ux:icon name="bi:twitter" class="svg-inline--fa" />
+                </a>
             </li>
             <li class="nav-item">
-                <a class="nav-link{{ seo.page == 'wave-function-collapse' ? ' active' : '' }}" href="{{ path('app_wave_function_collapse') }}">Wave Function Collapse</a>
+                <button
+                    class="nav-link"
+                    aria-label="Theme"
+                    data-action="live#emit"
+                    data-live-event-param="themeChanged"
+                >
+                    {% if theme.value == 'light' %}
+                    <twig:ux:icon name="bi:brightness-high" class="svg-inline--fa fa-w-16"
+                        stroke="currentColor"
+                        stroke-width="0.2px"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    {% elseif theme.value == 'dark' %}
+                    <twig:ux:icon name="bi:moon" class="svg-inline--fa fa-w-16"
+                        stroke="currentColor"
+                        stroke-width="0.2px"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    {% elseif theme.value == 'sepia' %}
+                    <twig:ux:icon name="simple-line-icons:cup" class="svg-inline--fa fa-w-16"
+                        stroke="currentColor"
+                        stroke-width="0.2px"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    {% endif %}
+                </button>
             </li>
         </ul>
-    </div>
-
-    <ul class="navbar-nav flex-row ms-auto">
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                href="https://github.com/darkwood-com/flow"
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label="GitHub"
-            >
-                <twig:ux:icon name="bi:github" class="svg-inline--fa" />
-            </a>
-        </li>
-        <li class="nav-item">
-            <a
-                class="nav-link"
-                href="https://twitter.com/darkwood_com"
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label="Twitter"
-            >
-                <twig:ux:icon name="bi:twitter" class="svg-inline--fa" />
-            </a>
-        </li>
+    </header>
+    <ul class="nav nav-bar-bottom fixed-bottom justify-content-center d-flex d-md-none">
         <li class="nav-item">
-            <button
-                class="nav-link"
-                aria-label="Theme"
-                data-action="live#emit"
-                data-live-event-param="themeChanged"
-            >
-                {% if theme.value == 'light' %}
-                <twig:ux:icon name="bi:brightness-high" class="svg-inline--fa fa-w-16"
-                    stroke="currentColor"
-                    stroke-width="0.2px"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                />
-                {% elseif theme.value == 'dark' %}
-                <twig:ux:icon name="bi:moon" class="svg-inline--fa fa-w-16"
-                    stroke="currentColor"
-                    stroke-width="0.2px"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                />
-                {% elseif theme.value == 'sepia' %}
-                <twig:ux:icon name="simple-line-icons:cup" class="svg-inline--fa fa-w-16"
-                    stroke="currentColor"
-                    stroke-width="0.2px"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                />
-                {% endif %}
-            </button>
+            <a class="nav-link{{ seo.page == 'wave-function-collapse' ? ' active' : '' }}" href="{{ path('app_wave_function_collapse') }}">Wave Function Collapse</a>
         </li>
     </ul>
-</header>
-<ul class="nav nav-bar-bottom fixed-bottom justify-content-center d-flex d-md-none">
-    <li class="nav-item">
-        <a class="nav-link{{ seo.page == 'app_home' ? ' active' : '' }}" href="{{ path('app_home') }}">Home</a>
-    </li>
-    <li class="nav-item">
-        <a class="nav-link{{ seo.page == 'wave-function-collapse' ? ' active' : '' }}" href="{{ path('app_wave_function_collapse') }}">Wave Function Collapse</a>
-    </li>
-</ul>
+</div>
diff --git a/templates/components/Layout.html.twig b/templates/components/Layout.html.twig
diff --git 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 %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
-
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
-
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code>/Users/math/Sites/darkwood/flow-live/src/Controller/HomeController.php</code></li>
-        <li>Your template at <code>/Users/math/Sites/darkwood/flow-live/templates/home/index.html.twig</code></li>
-    </ul>
-</div>
-{% endblock %}
+{% extends 'base.html.twig' %}
diff --git 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 %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
-
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
-
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code>/Users/math/Sites/darkwood/flow-live/src/Controller/WaveFunctionCollapseController.php</code></li>
-        <li>Your template at <code>/Users/math/Sites/darkwood/flow-live/templates/wave_function_collapse/index.html.twig</code></li>
-    </ul>
-</div>
-{% endblock %}
+{% extends 'base.html.twig' %}