From 0b3132d2bc8593fd6c5d9e33abd3fbdd6d0de875 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Sat, 20 May 2023 12:30:57 +0200
Subject: [PATCH] fix: better mobile handling

Fixes #42
Fixes #41
---
 components/footer-content.php     |  6 +++++
 components/mobile-sidebar.php     | 32 ++++++++++++++++++-------
 components/navbar-pages.php       |  4 ++--
 components/sidebar/categories.php |  2 +-
 page-plan.php                     | 39 ++++++++++++++++++++++++-------
 scss/custom/_global.scss          |  8 ++++++-
 scss/custom/_mobile.scss          |  6 +++--
 style.css                         | 15 ++++++++----
 8 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/components/footer-content.php b/components/footer-content.php
index b763b96..aabd5d5 100644
--- a/components/footer-content.php
+++ b/components/footer-content.php
@@ -10,6 +10,12 @@
 
       }
       ?>
+      <li class="social-li">
+        <a class="social-link" href="<?php bloginfo('rss2_url'); ?>">
+          <i class="fa fa-fw fa-rss" aria-hidden="true"></i>
+          <span class='sr-only'>Flux RSS du site</span>
+        </a>
+      </li>
       <li class="social-li">
         <a class="social-link" href="https://kazhnuz.space/links">
           <i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i>
diff --git a/components/mobile-sidebar.php b/components/mobile-sidebar.php
index e3f9bd9..a006908 100644
--- a/components/mobile-sidebar.php
+++ b/components/mobile-sidebar.php
@@ -18,21 +18,37 @@
         }
       ?>
   </ul>
+
+  <?php
+  $parent_categories = get_categories( array(
+    'orderby' => 'slug',
+    'order'   => 'ASC',
+    'parent'  => 0
+  ) );
+
+  foreach( $parent_categories as $parent_category ) {
+?>
   <ul>
-    <h2>Liste des catégories</h2>
+    <h2><?php echo $parent_category->name ?></h2>
     <?php
       $categories = get_categories( array(
-        'orderby' => 'name',
-        'order'   => 'ASC'
+        'orderby' => 'slug',
+        'order'   => 'ASC',
+        'parent'  => $parent_category->term_id
       ) );
 
-      foreach( $categories as $category ) {?>
-        <li>
-          <a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><?php echo $category->name ?></a>
-        </li>
-      <?php }
+      foreach( $categories as $category ) {
+        if ($category->slug != "chapters") {
+          echo "<!-- " . get_category_link($category->term_id) . " -->";
+          echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
+          }
+      }
     ?>
   </ul>
+      
+<?php      
+  }
+?>
   <ul>
     <h2>Pages</h2>
     <?php
diff --git a/components/navbar-pages.php b/components/navbar-pages.php
index 20083b1..7b32f8a 100644
--- a/components/navbar-pages.php
+++ b/components/navbar-pages.php
@@ -1,4 +1,4 @@
-<nav class="container menu toolbar flex-that fg-light">
+<nav class="container menu toolbar flex-that fg-light d-none d-flex-sm">
   <h2 class="sr-only">Menu des pages</h2>
   <ul>
     <li>
@@ -20,7 +20,7 @@
       $listmenu = get_nav_menu_locations();
       $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
         foreach ($menu as $menuElement) {
-          echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
+          echo '<li class="d-none d-block-sm"><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
         }
       ?>
     <li>
diff --git a/components/sidebar/categories.php b/components/sidebar/categories.php
index 808ef51..9d15833 100644
--- a/components/sidebar/categories.php
+++ b/components/sidebar/categories.php
@@ -7,7 +7,7 @@
 
   foreach( $parent_categories as $parent_category ) {
 ?>
-    <section class="card head-primary">
+    <section class="card head-primary d-none d-block-sm">
       <h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> <?php echo $parent_category->name ?></h2>
       <div class="menu fg-dark">
         <ul>
diff --git a/page-plan.php b/page-plan.php
index 63bf776..e123c20 100644
--- a/page-plan.php
+++ b/page-plan.php
@@ -26,19 +26,40 @@
           <?php wp_list_pages( 'sort_column=menu_order&depth=1&title_li=' ) ?>
         </ul>
       </section>
+
       <section class="mb-1">
         <h2>Catégories</h2>
-        <ul>
-          <?php
-          $categories = get_categories( array(
-            'orderby' => 'name',
-            'order'   => 'ASC'
-          ) );
 
-          foreach( $categories as $category ) {
-            echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
-          }?>
+        <?php
+        $parent_categories = get_categories( array(
+          'orderby' => 'slug',
+          'order'   => 'ASC',
+          'parent'  => 0
+        ) );
+
+        foreach( $parent_categories as $parent_category ) {
+        ?>
+        <ul>
+          <h3><?php echo $parent_category->name ?></h3>
+          <?php
+            $categories = get_categories( array(
+              'orderby' => 'slug',
+              'order'   => 'ASC',
+              'parent'  => $parent_category->term_id
+            ) );
+
+            foreach( $categories as $category ) {
+              if ($category->slug != "chapters") {
+                echo "<!-- " . get_category_link($category->term_id) . " -->";
+                echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
+                }
+            }
+          ?>
         </ul>
+            
+        <?php      
+        }
+        ?>
       </section>
       <section class="mb-1">
         <h2>Archive des articles</h2>
diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss
index a3e7a1b..b5d9da3 100644
--- a/scss/custom/_global.scss
+++ b/scss/custom/_global.scss
@@ -35,10 +35,16 @@
     border-top: 6px solid get-color("dark");
     background-position: bottom center;
     background-repeat: repeat-x;
-    margin-bottom:1.5rem;
+    margin-bottom:-1.5rem;
+    padding-bottom:5rem;
     .fa {
       font-size: 1rem;
     }
+
+    @include sm() {
+      padding-bottom: 0;
+      margin-bottom: 1.5rem;
+    }
 }
 
 header h1 {
diff --git a/scss/custom/_mobile.scss b/scss/custom/_mobile.scss
index 8fd36dd..3d701b4 100644
--- a/scss/custom/_mobile.scss
+++ b/scss/custom/_mobile.scss
@@ -14,6 +14,8 @@
   @include sm() {
     display:none;
   }
+
+  z-index:10;
 }
 
 .menu-button {
@@ -30,10 +32,10 @@
   justify-content: center;
   aspect-ratio: 1;
   border-radius:999px;
-  opacity: 0.75;
+  z-index: 12;
 
   &:hover {
-    opacity:1;
+    background-color: $color-primary;
   }
 
   @include sm() {
diff --git a/style.css b/style.css
index ba27462..4933a43 100644
--- a/style.css
+++ b/style.css
@@ -2464,10 +2464,14 @@ textarea {
   border-top: 6px solid #002b36;
   background-position: bottom center;
   background-repeat: repeat-x;
-  margin-bottom: 1.5rem; }
+  margin-bottom: -1.5rem;
+  padding-bottom: 5rem; }
   #page-header .fa {
     font-size: 1rem; }
-
+  @media (min-width: 576px) {
+    #page-header {
+      padding-bottom: 0;
+      margin-bottom: 1.5rem; } }
 header h1 {
   border-style: none !important;
   font-weight: 800;
@@ -3032,7 +3036,8 @@ ul.social {
   height: 100vh;
   transition: left 0.2s;
   padding: 1rem;
-  overflow: scroll; }
+  overflow: scroll;
+  z-index: 10; }
   #mobile-sidebar.shown {
     left: 0; }
   @media (min-width: 576px) {
@@ -3052,9 +3057,9 @@ ul.social {
   justify-content: center;
   aspect-ratio: 1;
   border-radius: 999px;
-  opacity: 0.75; }
+  z-index: 12; }
   .menu-button:hover {
-    opacity: 1; }
+    background-color: #CB357D; }
   @media (min-width: 576px) {
     .menu-button {
       display: none; } }