debut css et js déroulement
This commit is contained in:
@@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.query
|
||||
\**********************************************/
|
||||
/***/ (() => {
|
||||
|
||||
eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n jQuery(document).ready(function($){\n\n $('.open-block').click(function(){\n $(this).toggleClass('opened');\n\n $('.header_nav_container').toggleClass('display-nav-opened');\n \n if(mobile == true){\n $(\"body\").css(\"overflow\",\"hidden\");\n }\n\n });\n \n // Hide the header_nav_container when a link inside it is clicked\n $('.header_nav_container li').click(function() {\n $('.header_nav_container').fadeOut();\n });\n\n\n\n//////////// agrandissement du shema\n\n $('#paragraph-id--9 img').click(function() {\n $(this).toggleClass('zoom_in');\n });\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n})(jQuery);\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
|
||||
eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n jQuery(document).ready(function($){\n\n $('.open-block').click(function(){\n $(this).toggleClass('opened');\n\n $('.header_nav_container').toggleClass('display-nav-opened');\n \n if(mobile == true){\n $(\"body\").css(\"overflow\",\"hidden\");\n }\n\n });\n \n // Hide the header_nav_container when a link inside it is clicked\n $('.header_nav_container li').click(function() {\n $('.header_nav_container').fadeOut();\n });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n\n\n// slideshow home \n\n(function($, window) {\n console.log('hello slick')\n $(document).ready(function(){\n $('.field_field_phase .__deroulement-container .paragraph--type--phase-deroulement').slick({\n slidesToShow: 1,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n});\n\n\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
|
||||
|
||||
/***/ })
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/*quartiers_de_demain*/
|
||||
/*global*/
|
||||
/* Colors used for quartiers_de_demain */
|
||||
@@ -702,6 +703,251 @@ footer span.totop #toTop .arrow-up::before {
|
||||
top: 3%;
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
.slick-loading .slick-list {
|
||||
background: #fff url("./ajax-loader.gif") center center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@font-face {
|
||||
font-family: "slick";
|
||||
src: url("./fonts/slick.eot");
|
||||
src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.slick-prev:hover, .slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
.slick-prev:hover:before, .slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
font-family: "slick";
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
opacity: 0.75;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
}
|
||||
[dir=rtl] .slick-prev {
|
||||
left: auto;
|
||||
right: -25px;
|
||||
}
|
||||
.slick-prev:before {
|
||||
content: "←";
|
||||
}
|
||||
[dir=rtl] .slick-prev:before {
|
||||
content: "→";
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
}
|
||||
[dir=rtl] .slick-next {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
}
|
||||
.slick-next:before {
|
||||
content: "→";
|
||||
}
|
||||
[dir=rtl] .slick-next:before {
|
||||
content: "←";
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.slick-dots li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button:hover, .slick-dots li button:focus {
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "•";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: "slick";
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
opacity: 0.25;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before {
|
||||
color: black;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus {
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before, .slick-track:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
.slick-track:after {
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
display: none;
|
||||
}
|
||||
[dir=rtl] .slick-slide {
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img {
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide {
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide {
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*pages*/
|
||||
#home .content_container #block-quartiers-de-demain-titredepage {
|
||||
display: none;
|
||||
@@ -854,7 +1100,7 @@ footer span.totop #toTop .arrow-up::before {
|
||||
color: white;
|
||||
}
|
||||
#home article.node-type-static #paragraph-id--7 .field_field_title {
|
||||
width: 70%;
|
||||
width: 50%;
|
||||
text-transform: lowercase;
|
||||
padding-top: 3rem;
|
||||
text-align: center;
|
||||
@@ -923,7 +1169,36 @@ footer span.totop #toTop .arrow-up::before {
|
||||
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement {
|
||||
width: 30%;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_jour {
|
||||
grid-row: 1/span 3;
|
||||
grid-column: 1;
|
||||
}
|
||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_moi {
|
||||
grid-row: 2/span 3;
|
||||
grid-column: 1;
|
||||
}
|
||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_annee {
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
}
|
||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_titre {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_description {
|
||||
grid-row: 2/span 3;
|
||||
grid-column: 2;
|
||||
}
|
||||
#consultation {
|
||||
background-color: #f6f7f3;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user