styles

Author: hugolgs-dev

public/css/style.css

@@ -7,7 +7,7 @@
 body.light-theme {
     background-color: var(--light);
     color: var(--dark);
-    transition: 0.5s;
+    transition: .5s;
 }
 
 body.dark-theme {
@@ -18,28 +18,34 @@ body.dark-theme {
 
 /* style de la page */
 
-nav{
+.header{
     display: flex;
     flex: row nowrap ;
     width: 100%;
+    align-items: center;
+}
+
+.nav{
+    display: block;
+    width: 90%;
 }
 .menu-liste{
     display: flex;
     flex: row nowrap ;
-    justify-content: space-between;
+    justify-content: flex-start;
 
     list-style: none;
 }
 
+.menu-liste-items{
+    margin: 0.5rem 1rem 0;
+}
 
+.btn-menu{
 
-.theme-switch{
-    align-self: flex-end;
 }
 
 /* transitions */
-/* message de chargement de la page */
-
 th:hover{
     background-color: var(--grey);
 }

public/js/main.js

@@ -1,5 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
     const themeToggleBtn = document.getElementById('themeToggleBtn');
+    const table = document.getElementsByClassName('table');
     const body = document.body;
 
     // on regarde si l'utilisateur avait le thème sombre à la dernière visite sur la page ou avant de la rafraîchir
@@ -14,12 +15,12 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // écouteurs d'évènements
-    themeToggleBtn.addEventListener('click', function () {
+    themeToggleBtn.addEventListener('click', function(){
         body.classList.toggle('light-theme');
         body.classList.toggle('dark-theme');
         themeToggleBtn.classList.remove('btn-primary');
 
-        setTimeout(function () {
+        setTimeout(function(){
             themeToggleBtn.classList.toggle(
                 'btn-dark',
                 body.classList.contains('light-theme'));
@@ -29,8 +30,13 @@ document.addEventListener('DOMContentLoaded', function () {
                 body.classList.contains('dark-theme'));
 
             themeToggleBtn.innerText = body.classList.contains('dark-theme') ? 'Mode clair' : 'Mode sombre';    
+
+            
         }, 200);
 
+        for (var i = 0; i < table.length; i++){
+                table[i].classList.toggle('text-light');
+            }
 
         // on enregistre le choix de l'utilisateur (pour que le thème reste le même quand il revient)
         const currentTheme = body.classList.contains('dark-theme') ? 'dark-theme' : 'light-theme';

templates/article/index.html.twig

@@ -40,6 +40,6 @@
         </tbody>
     </table>
     <div class="d-flex justify-content-center">
-        <a class="btn btn-outline-primary btn-lg" href="{{ path('article_new') }}">Create new article</a>
+        <a class="btn btn-primary btn-lg" href="{{ path('article_new') }}">Create new article</a>
     </div>
 {% endblock %}

templates/article_search/index.html.twig

@@ -33,7 +33,6 @@
                 {# Message si aucun articles #}
                 {% else %}
                     <h2 class="mt-6">Aucun résultats </h2>
-                    <h2 class="mt-6">Aucun résultats</h2>
                 {% endif %}
             </div>
         </div>

templates/category/index.html.twig

@@ -33,5 +33,5 @@
     </table>
 
 
-    <a class="btn btn-outline-primary btn-lg" href="{{ path('category_new') }}">Create new category</a>
+    <a class="btn btn-primary btn-lg" href="{{ path('category_new') }}">Create new category</a>
 {% endblock %}

templates/menu/index.html.twig

@@ -1,11 +1,11 @@
 {# menu/index.html.twig #}
 
-<header>
-    <nav>
+<header class="header">
+    <nav class="nav">
         <ul class="menu-liste">
-            <li class="menu-liste-items btn"><a href="{{ path('article_index') }}">Articles</a></li>
-            <li class="menu-liste-items btn"><a href="{{ path('category_index') }}">Categories</a></li>
-            <li class="menu-liste-items btn"><a href="{{ path('article_search') }}">Rechercher un article</a></li>
+            <li class="menu-liste-items"><a class="btn btn-primary btn-menu" href="{{ path('article_index') }}">Articles</a></li>
+            <li class="menu-liste-items"><a class="btn btn-primary btn-menu" href="{{ path('category_index') }}">Categories</a></li>
+            <li class="menu-liste-items"><a class="btn btn-primary btn-menu" href="{{ path('article_search') }}">Rechercher un article</a></li>
         </ul>
     </nav>
     <button class="btn btn-dark theme-switch" id="themeToggleBtn">Mode sombre</button>