From 13c381991057e73b209db1b5a78c9793a29dbb16 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 26 Sep 2022 18:15:11 +0200 Subject: [PATCH] wip #5482 @2 --- inc/head.php | 1 + inc/menu.php | 28 ++++++------- inc/svg-sprite.php | 1 + js/script.js | 35 +++++++++++++++- style/inc/menu.sass | 89 ++++++++++++++++++++++++++++++++++++++-- style/inc/reset.sass | 5 ++- style/inc/variables.sass | 2 + style/style.sass | 1 + 8 files changed, 142 insertions(+), 20 deletions(-) create mode 100644 inc/svg-sprite.php diff --git a/inc/head.php b/inc/head.php index 0d29366..fc95153 100644 --- a/inc/head.php +++ b/inc/head.php @@ -10,4 +10,5 @@ + \ No newline at end of file diff --git a/inc/menu.php b/inc/menu.php index a72ddc4..2515c57 100644 --- a/inc/menu.php +++ b/inc/menu.php @@ -1,14 +1,14 @@ \ No newline at end of file diff --git a/inc/svg-sprite.php b/inc/svg-sprite.php new file mode 100644 index 0000000..9deb75e --- /dev/null +++ b/inc/svg-sprite.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/script.js b/js/script.js index c6dba1f..5e6763c 100644 --- a/js/script.js +++ b/js/script.js @@ -1,5 +1,36 @@ -// Utilisation de tippy pour afficher les tooltips. -tippy('[title]'); +$(function () { + // Utilisation de tippy pour afficher les tooltips. + $('[data-tooltip]').each(function () { + tippy(this, {content: $(this).attr('data-tooltip')}); + }); + + // Ajouter les symboles SVG + $("[data-icon]").each(function () { + $(this).html(getSpriteIcon('eif-' + $(this).data('icon'))); + }); + + // Menu : afficher le sous-menu au clic sur un élement + $(document).on('click', '.open-submenu', function () { + $(this).closest('ul').find('li.active').removeClass('active'); + $(this).closest('li').toggleClass('active'); + return false; + }); + + // Menu : passer le menu en mode compact + $(document).on('click', '.toggle-menu', function () { + $('body').toggleClass('menu-compact'); + resize(); + return false; + }); + + $(window).on('resize', function () { + resize(); + }); +}); + +function resize(){ + +} // function getSpriteIcon(icon, attrs, dimensions) { diff --git a/style/inc/menu.sass b/style/inc/menu.sass index 429c3f3..47928ef 100644 --- a/style/inc/menu.sass +++ b/style/inc/menu.sass @@ -2,9 +2,92 @@ header position: fixed top: $space left: $space - + text-align: center width: 150px - border-radius: 6px - height: calc(100% - 2*$space) + height: calc(100% - 2 * $space) background-color: $menu-background + font-size: 14px + + #logo-client + padding: $space + + .compact + display: none + + .large + display: block + + li + height: 125px + padding: $space + + svg + width: 40px + height: auto + + span + display: block + text-transform: uppercase + text-align: center + margin: 5px auto + word-spacing: 50px + + ul + display: none + + &:hover + background-color: #292929 + + &.active + background-color: #292929 + + ul + display: block + + a + color: #fff + + .toggle-menu + position: absolute + right: -20px + top: $space + width: 20px + height: 50px + background-color: $button-color + border-radius: 0 4px 4px 0 + padding: 14px 0 + + svg + width: 20px + height: auto + transform-origin: 50% 50% + transform: scale(-1, 1) + + +.menu-compact + $space: 15px + $width: 70px + + header + width: $width + + .compact + display: block + + .large + display: none + + #logo-client + padding: $space + + li + padding: $space + height: $width + + a span + display: none + + .toggle-menu + svg + transform: scale(1, 1) \ No newline at end of file diff --git a/style/inc/reset.sass b/style/inc/reset.sass index 79d4a7e..b8bde8b 100644 --- a/style/inc/reset.sass +++ b/style/inc/reset.sass @@ -34,4 +34,7 @@ table input -webkit-appearance: none - border-radius: 0 \ No newline at end of file + border-radius: 0 + +a + text-decoration: none \ No newline at end of file diff --git a/style/inc/variables.sass b/style/inc/variables.sass index 4b5e43c..09b51a9 100644 --- a/style/inc/variables.sass +++ b/style/inc/variables.sass @@ -1,3 +1,5 @@ +$font: Lato, sans-serif $background-color: #F0EDEB $menu-background: #363636 +$button-color: #c1ce3a $space: 25px \ No newline at end of file diff --git a/style/style.sass b/style/style.sass index a444167..f5c7aa8 100644 --- a/style/style.sass +++ b/style/style.sass @@ -6,5 +6,6 @@ html,body body background-color: $background-color + font-family: $font @import "inc/menu" -- 2.39.5