Commit 6088891e authored by Corentin Bettiol's avatar Corentin Bettiol 💻

add hamburger menu (css) & add auto renaming for url slugs

parent 12c6acd2
...@@ -251,6 +251,12 @@ form .small{ ...@@ -251,6 +251,12 @@ form .small{
transition: background-color 0.3s, color 0.3s, border 0.0.5s, padding 0.05s; transition: background-color 0.3s, color 0.3s, border 0.0.5s, padding 0.05s;
} }
#toggle, .nav-label{
height: 0;
display: none;
background-color: #f0f0f0;
}
/* /*
==== ====
Media Queries Media Queries
...@@ -314,9 +320,38 @@ Media Queries ...@@ -314,9 +320,38 @@ Media Queries
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
/* hamburger menu - taken on https://actudiant.fr/ - from an old version of https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css */
#toggle{
position: absolute;
left: -9999px;
}
.nav-label{
position: fixed;
top: 0;
display: inline-block;
width: 50px;
height: 50px;
padding: 0;
opacity: 0.6;
background-image: url('/img/mobile-menu-icon.png');
background-size: 50px 50px;
transition: transform 0.3s ease;
background-size: 50px 50px;
}
#listMenu{ #listMenu{
width: 80%; width: 100%;
margin: auto; margin: auto;
background-color: #f0f0f0;
border-bottom: 5px solid #ccc;
position: fixed;
top: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.30s ease, opacity 0.30s;
} }
#listMenu li{ #listMenu li{
margin: 3px auto; margin: 3px auto;
...@@ -328,6 +363,20 @@ Media Queries ...@@ -328,6 +363,20 @@ Media Queries
border: none; border: none;
background-color: #ccc; background-color: #ccc;
} }
#toggle:checked ~ #listMenu{
max-height: 300px;
opacity: 1;
transition: max-height 0.45s ease-out, opacity 0.30s;
}
#toggle:checked ~ .nav-label{
background-image: url('/img/mobile-menu-icon-close.png');
transform: rotate(180deg);
transition: transform 0.3s ease;
background-size: 50px 50px;
}
} }
/* /*
......
...@@ -59,6 +59,7 @@ function getPageName(){ ...@@ -59,6 +59,7 @@ function getPageName(){
// affiche le menu du site (avec le titre de la page) // affiche le menu du site (avec le titre de la page)
function writeMenu($pageName){ function writeMenu($pageName){
?> ?>
<input id="toggle" type="checkbox" />
<ul id='listMenu'> <ul id='listMenu'>
<?php <?php
if($pageName == 'Administration'){ ?> if($pageName == 'Administration'){ ?>
...@@ -72,6 +73,7 @@ function writeMenu($pageName){ ...@@ -72,6 +73,7 @@ function writeMenu($pageName){
<li><h2><a href="/projects" title="Projets" <?php if($pageName == 'Projets' || $pageName == 'Projet'){ ?>class="selected"<?php } ?>>Projets</a></h2></li> <li><h2><a href="/projects" title="Projets" <?php if($pageName == 'Projets' || $pageName == 'Projet'){ ?>class="selected"<?php } ?>>Projets</a></h2></li>
<li><h2><a href="/contact" title="Contact" <?php if($pageName == 'Contact'){ ?>class="selected"<?php } ?>>Contact</a></h2></li> <li><h2><a href="/contact" title="Contact" <?php if($pageName == 'Contact'){ ?>class="selected"<?php } ?>>Contact</a></h2></li>
</ul> </ul>
<label class="nav-label" for="toggle"></label>
<?php } <?php }
// affiche la page du blog // affiche la page du blog
......
...@@ -15,6 +15,6 @@ class Base ...@@ -15,6 +15,6 @@ class Base
$slug = preg_replace('/[-\s]+/', '-', $slug); $slug = preg_replace('/[-\s]+/', '-', $slug);
$slug = preg_replace('/-$/', '', $slug); $slug = preg_replace('/-$/', '', $slug);
$slug = preg_replace('/[^a-z0-9-]+/', '', $slug); $slug = preg_replace('/[^a-z0-9-]+/', '', $slug);
return $slug; return $slug;
} }
} }
\ No newline at end of file
...@@ -73,6 +73,19 @@ class BlogManager extends Base ...@@ -73,6 +73,19 @@ class BlogManager extends Base
$this->slug = $this->slugify($this->title); $this->slug = $this->slugify($this->title);
$db = $this->dbConnect(); $db = $this->dbConnect();
$i = 1;
$slug = $this->slug;
do{
$req = $db->prepare('SELECT slug FROM l3m_blog WHERE slug = ?');
$req->execute([$this->slug]);
$slugExist = $req->fetch();
if($slugExist == true){
$i++;
$this->slug = $slug . "-" . $i;
}
}
while($slugExist != false);
$req = $db->prepare('INSERT INTO l3m_blog(time, title, slug, content, shortContent) VALUES(:time, :title, :slug, :content, :shortContent)'); $req = $db->prepare('INSERT INTO l3m_blog(time, title, slug, content, shortContent) VALUES(:time, :title, :slug, :content, :shortContent)');
$req->execute([ $req->execute([
'time' => $this->time, 'time' => $this->time,
......
...@@ -61,7 +61,20 @@ class ProjectManager extends Base ...@@ -61,7 +61,20 @@ class ProjectManager extends Base
} }
$this->slug = $this->slugify($this->name); $this->slug = $this->slugify($this->name);
$db = $this->dbConnect(); $db = $this->dbConnect();
$i = 1;
$slug = $this->slug;
do{
$req = $db->prepare('SELECT slug FROM l3m_projects WHERE slug = ?');
$req->execute([$this->slug]);
$slugExist = $req->fetch();
if($slugExist == true){
$i++;
$this->slug = $slug . "-" . $i;
}
}
while($slugExist != false);
$req = $db->prepare('INSERT INTO l3m_projects(name, slug, link, content, shortcontent) VALUES(:name, :slug, :link, :content, :shortContent)'); $req = $db->prepare('INSERT INTO l3m_projects(name, slug, link, content, shortcontent) VALUES(:name, :slug, :link, :content, :shortContent)');
$req->execute([ $req->execute([
'name' => $this->name, 'name' => $this->name,
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
Il me sert de point de centralisation de plusieurs de mes projets, et me permet de faire quelques tests pas forcément référencés. Il me sert de point de centralisation de plusieurs de mes projets, et me permet de faire quelques tests pas forcément référencés.
</p> </p>
<p> <p>
Il en est à ca cinquième refonte. Il en est à sa cinquième refonte.
</p> </p>
</article> </article>
......
<article> <article>
<h3><a href="">01/03/19</a> (encore)</h3> <h3><a href="">02/03/19</a></h3>
<ul>
<li>Ajout du menu hamburger pour les smartphones</li>
<li>Ajout du renommage automatique de l'url d'un post/projet pour toujours avoir des url différentes même si plusieurs posts/projets on le même nom</li>
</ul>
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/e7ffa7e6fa4c07537014c0cf4e3ffd7a47a91de3">01/03/19</a> (encore)</h3>
<ul> <ul>
<li>Réorganisation de la gestion des url des pages : <li>Réorganisation de la gestion des url des pages :
<ul> <ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment