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

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

parent 12c6acd2

css/design.css

+50 −1
Original line number Diff line number Diff line
@@ -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;

	}



}



/*

img/mobile-menu-icon-close.png

0 → 100644
+1.27 KiB
Loading image diff...

img/mobile-menu-icon.png

0 → 100644
+763 B
Loading image diff...

site/controller/mainController.php

+2 −0
Original line number Diff line number Diff line
@@ -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

site/model/BlogManager.php

+13 −0
Original line number Diff line number Diff line
@@ -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,