fix: better mobile handling

Fixes #42
Fixes #41
This commit is contained in:
Kazhnuz 2023-05-20 12:30:57 +02:00
parent 94bb9103cd
commit 0b3132d2bc
8 changed files with 84 additions and 28 deletions

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 {

View file

@ -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() {

View file

@ -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; } }