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{
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
......@@ -314,9 +320,38 @@ Media Queries
width: 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{
width: 80%;
width: 100%;
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{
margin: 3px auto;
......@@ -328,6 +363,20 @@ Media Queries
border: none;
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(){
// affiche le menu du site (avec le titre de la page)
function writeMenu($pageName){
?>
<input id="toggle" type="checkbox" />
<ul id='listMenu'>
<?php
if($pageName == 'Administration'){ ?>
......@@ -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="/contact" title="Contact" <?php if($pageName == 'Contact'){ ?>class="selected"<?php } ?>>Contact</a></h2></li>
</ul>
<label class="nav-label" for="toggle"></label>
<?php }
// affiche la page du blog
......
......@@ -15,6 +15,6 @@ class Base
$slug = preg_replace('/[-\s]+/', '-', $slug);
$slug = preg_replace('/-$/', '', $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
$this->slug = $this->slugify($this->title);
$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->execute([
'time' => $this->time,
......
......@@ -61,7 +61,20 @@ class ProjectManager extends Base
}
$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->execute([
'name' => $this->name,
......
......@@ -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.
</p>
<p>
Il en est à ca cinquième refonte.
Il en est à sa cinquième refonte.
</p>
</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>
<li>Réorganisation de la gestion des url des pages :
<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