diff --git a/css/app.css b/css/app.css index a3c74f6..c872fad 100644 --- a/css/app.css +++ b/css/app.css @@ -1416,6 +1416,8 @@ button:focus { display: flex; flex-direction: column; border-radius: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 2rem; transition: all 0.3s ease-in-out; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); @@ -2045,7 +2047,7 @@ article > *:not(.entry-content), .menu-renovateur-footer { display: flex; - justify-content: center; + justify-content: space-between; gap: 2rem; } @@ -2355,10 +2357,83 @@ article > *:not(.entry-content), margin-left: auto; } -.swiper { - width: 600px; - height: 300px; - background-color: green; +.swiper-content { + position: relative; + max-width: 1440px; + padding-left: 6rem; + padding-right: 6rem; +} + +.swiper-container { + height: auto; + overflow: hidden; + padding-left: 0.75rem; + padding-right: 0.75rem; + /* @apply bg-yellow-50; */ +} + +.swiper-wrapper { + width: 100%; + padding-top: 6rem; + padding-bottom: 4rem; +} + +.thematique-button-next, +.thematique-button-prev { + position: absolute; + top: 50%; + z-index: 50; + opacity: 0.8; + width: 60px; + height: 60px; +} + +.thematique-button-next:hover, + .thematique-button-next:focus, + .thematique-button-prev:hover, + .thematique-button-prev:focus { + opacity: 1; + filter: invert(13%) sepia(71%) saturate(4425%) + hue-rotate(338deg) brightness(109%) contrast(117%); +} + +.thematique-button-next:focus, .thematique-button-prev:focus { + border-radius: 9999px; +} + +.thematique-button-next { + right: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.thematique-button-prev { + left: 0px; +} + +.swiper-pagination-bullet { + margin-left: 0.5rem; + margin-right: 0.5rem; + height: 0.75rem; + width: 0.75rem; + border-width: 2px !important; + border-style: solid !important; + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + opacity: 0.8; +} + +.swiper-pagination-bullet:focus { + outline-offset: 4px; +} + +.swiper-pagination-bullet-active { + --tw-border-opacity: 1 !important; + border-color: rgb(223 30 30 / var(--tw-border-opacity)) !important; + --tw-bg-opacity: 1; + background-color: rgb(223 30 30 / var(--tw-bg-opacity)); + opacity: 1; } /* .swiper-slide { @@ -2379,6 +2454,8 @@ article > *:not(.entry-content), } */ .section-show-thematiques { + padding-left: 4rem; + padding-right: 4rem; padding-top: 2rem; padding-bottom: 8rem; } diff --git a/includes/init.php b/includes/init.php index eb411c1..4603111 100644 --- a/includes/init.php +++ b/includes/init.php @@ -53,13 +53,13 @@ function tailpress_enqueue_scripts() { $theme = wp_get_theme(); + wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version')); wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version')); wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array(), $theme->get('Version')); // wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version')); wp_enqueue_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version')); // wp_enqueue_script('swiperjs', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.js', array('tailpress'), $theme->get('Version'), true); - wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version')); // wp_register_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version')); } add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts'); @@ -126,4 +126,4 @@ function tailpress_nav_menu_add_submenu_class($classes, $args, $depth) return $classes; } -add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3); \ No newline at end of file +add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3); diff --git a/resources/css/layout/menu-renovateur.css b/resources/css/layout/menu-renovateur.css index ec0787b..618e80b 100644 --- a/resources/css/layout/menu-renovateur.css +++ b/resources/css/layout/menu-renovateur.css @@ -32,7 +32,7 @@ } .menu-renovateur-footer { - @apply flex justify-center gap-8; + @apply flex justify-between gap-8; li { .page_icon { diff --git a/resources/img/graphic-assets/slider-next-left.svg b/resources/img/graphic-assets/slider-next-left.svg new file mode 100644 index 0000000..128fb52 --- /dev/null +++ b/resources/img/graphic-assets/slider-next-left.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/resources/img/graphic-assets/slider-next-right.svg b/resources/img/graphic-assets/slider-next-right.svg new file mode 100644 index 0000000..c1ee052 --- /dev/null +++ b/resources/img/graphic-assets/slider-next-right.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/template-blocks/home/show-thematiques/show-thematiques.css b/template-blocks/home/show-thematiques/show-thematiques.css index 278356e..ea35116 100755 --- a/template-blocks/home/show-thematiques/show-thematiques.css +++ b/template-blocks/home/show-thematiques/show-thematiques.css @@ -1,7 +1,46 @@ -.swiper { - width: 600px; - height: 300px; - background-color: green; +.swiper-content { + @apply px-24 relative max-w-screen-2xl; +} +.swiper-container { + height: auto; + @apply px-3 overflow-hidden; + /* @apply bg-yellow-50; */ +} + +.swiper-wrapper { + @apply pt-24 pb-16 w-full; +} + +.thematique-button-next, +.thematique-button-prev { + @apply absolute top-1/2 z-50 opacity-80; + width: 60px; + height: 60px; + &:hover, + &:focus { + @apply opacity-100; + filter: invert(13%) sepia(71%) saturate(4425%) + hue-rotate(338deg) brightness(109%) contrast(117%); + } + &:focus { + @apply rounded-full; + } +} +.thematique-button-next { + @apply right-0 transform; +} +.thematique-button-prev { + @apply left-0; +} + +.swiper-pagination-bullet { + @apply w-3 h-3 mx-2 opacity-100 bg-white !border-2 !border-solid border-black opacity-80; +} +.swiper-pagination-bullet:focus { + outline-offset: 4px; +} +.swiper-pagination-bullet-active { + @apply bg-secondary !border-secondary opacity-100; } /* .swiper-slide { @@ -21,7 +60,7 @@ object-fit: cover; } */ .section-show-thematiques { - @apply pt-8 pb-32; + @apply pt-8 pb-32 px-16; .thematiques-container { @apply grid grid-cols-3 diff --git a/template-blocks/home/show-thematiques/show-thematiques.js b/template-blocks/home/show-thematiques/show-thematiques.js index 10f6f55..50e418a 100644 --- a/template-blocks/home/show-thematiques/show-thematiques.js +++ b/template-blocks/home/show-thematiques/show-thematiques.js @@ -1,9 +1,34 @@ window.addEventListener('DOMContentLoaded', (event) => { - mySwiper = new Swiper('.swiper', { - grabCursor: true, - slidesPerView: 2, + const cardThematiques = document.querySelectorAll( + '.swiper-slide .card-thematique' + ); + console.log(`cardThematiques`, cardThematiques); + + mySwiper = new Swiper('.swiper-container', { + grabCursor: false, + slidesPerView: 3, + spaceBetween: 30, + loop: true, + // centeredSlides: true, + keyboard: { + enabled: true, + }, + navigation: { + nextEl: '.thematique-button-next', + prevEl: '.thematique-button-prev', + }, pagination: { el: '.swiper-pagination', + clickable: true, + renderBullet: function (index, className) { + const ariaLabel = + cardThematiques[index].getAttribute( + 'data-taxonomy' + ); + + return ``; + }, }, + a11y: false, }); }); diff --git a/template-blocks/home/show-thematiques/show-thematiques.php b/template-blocks/home/show-thematiques/show-thematiques.php index ae65292..bb23a09 100755 --- a/template-blocks/home/show-thematiques/show-thematiques.php +++ b/template-blocks/home/show-thematiques/show-thematiques.php @@ -15,36 +15,67 @@ $terms = get_terms(array(
- -
- -
- -
Slide 1
-
Slide 2
-
Slide 3
- ... -
- -
- - -
- - - -
-
- -

-
+
+ + + + +
+ +
+ + +
+ + + + +
+ $term, + 'post_ID' => $post_datas->ID, + 'post_title' => $post_datas->post_title, + 'post_excerpt' => $post_datas->post_excerpt, + ) + ); + ?> +
+ + +
+ + + + +
+ + + + +
+ + +
\ No newline at end of file diff --git a/template-components/card-thematique.css b/template-components/card-thematique.css index 03e56e0..c1c187c 100644 --- a/template-components/card-thematique.css +++ b/template-components/card-thematique.css @@ -1,5 +1,5 @@ .card-thematique { - @apply flex flex-col p-8 rounded-3xl relative; + @apply flex flex-col p-8 rounded-3xl relative bg-white; transition: all 0.3s ease-in-out; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); diff --git a/template-components/card-thematique.php b/template-components/card-thematique.php index e6be7c1..a3a2efa 100644 --- a/template-components/card-thematique.php +++ b/template-components/card-thematique.php @@ -7,7 +7,7 @@ $taxonomy_picture = get_field('taxonomy_pictures', $thematique); $color = getThematiqueFamilySlug($thematique->slug); ?> -
+

name ?>

description ?>