imp: Move the logout button to the layout header

Probesys · Oct 14, 2022 · d0f9ca1 · d0f9ca1
1 parent 086469b
commit d0f9ca1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/assets/stylesheets/components/layout.css b/assets/stylesheets/components/layout.css
@@ -2,13 +2,25 @@
 /* Copyright 2022 Probesys */
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-.layout__header {
-    text-align: center;
+.layout__header-container {
+    display: flex;
+    max-width: 1200px;
+    margin-right: auto;
+    margin-left: auto;
+
+    align-items: center;
+    justify-content: center;
+}
+
+.layout__header-container > * {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
 }
 
 .layout__header-home {
     display: inline-block;
-    padding: 2rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
 
     color: inherit;
     font-size: 1.1em;
@@ -18,6 +30,10 @@
     outline-offset: -0.3rem;
 }
 
+.layout__header-extend {
+    flex: 1;
+}
+
 .layout__body {
     padding: 2rem 1rem;
 

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -23,10 +23,24 @@
 
     <body>
         <nav class="layout__header">
-            <div class="wrapper-large wrapper--center">
+            <div class="layout__header-container">
                 <a class="layout__header-home" href="{{ path('home') }}">
                     🤝 Bileto
                 </a>
+
+                {% if app.user %}
+                    <div class="layout__header-extend"></div>
+
+                    <form action="{{ path('logout') }}" method="post">
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}">
+
+                        <div class="form__actions">
+                            <button id="form-logout-submit" type="submit">
+                                {{ 'Logout' | trans }}
+                            </button>
+                        </div>
+                    </form>
+                {% endif %}
             </div>
         </nav>
 

diff --git a/templates/home/show.html.twig b/templates/home/show.html.twig
@@ -9,15 +9,5 @@
 {% block body %}
     <main class="layout__body wrapper-small wrapper--center flow">
         <h1>{{ 'Hello Bileto!' | trans }}</h1>
-
-        <form action="{{ path('logout') }}" method="post">
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}">
-
-            <div class="form__actions">
-                <button id="form-logout-submit" type="submit">
-                    {{ 'Logout' | trans }}
-                </button>
-            </div>
-        </form>
     </main>
 {% endblock %}