From adeae2e60e6e42a4fcee007d49433559c03aea40 Mon Sep 17 00:00:00 2001
From: Juliana <juliana@le-filament.com>
Date: Wed, 8 Apr 2020 11:14:14 +0200
Subject: [PATCH] Modif pb slide carousel product
---
static/src/scss/style.css | 54 ++++++++++++++++++-------------------
views/templates.xml | 35 ------------------------
views/vracoop_templates.xml | 4 +--
3 files changed, 29 insertions(+), 64 deletions(-)
diff --git a/static/src/scss/style.css b/static/src/scss/style.css
index 9b29d02..4076a90 100644
--- a/static/src/scss/style.css
+++ b/static/src/scss/style.css
@@ -36,7 +36,7 @@
*/
@media (min-width: 768px) and (max-width: 991px) {
/* Show 4th slide on md if col-md-4*/
- .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%; /*change this with javascript in the future*/
@@ -47,7 +47,7 @@
}
@media (min-width: 576px) and (max-width: 768px) {
/* Show 3rd slide on sm if col-sm-6*/
- .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -50%; /*change this with javascript in the future*/
@@ -57,31 +57,31 @@
}
}
@media (min-width: 576px) {
- .carousel-item {
+ .carousel_click .carousel-item {
margin-right: 0;
}
/* show 2 items */
- .carousel-inner .active.carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .active.carousel-item + .carousel-item {
display: block;
}
- .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
- .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
+ .carousel_click .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
+ .carousel_click .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
transition: none;
}
- .carousel-inner .carousel-item-next {
+ .carousel_click .carousel-inner .carousel-item-next {
position: relative;
transform: translate3d(0, 0, 0);
}
/* left or forward direction */
- .active.carousel-item-left + .carousel-item-next.carousel-item-left,
- .carousel-item-next.carousel-item-left + .carousel-item,
- .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
+ .carousel_click .active.carousel-item-left + .carousel-item-next.carousel-item-left,
+ .carousel_click .carousel-item-next.carousel-item-left + .carousel-item,
+ .carousel_click .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be also positioned for animations */
- .carousel-inner .carousel-item-prev.carousel-item-right {
+ .carousel_click .carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
@@ -90,9 +90,9 @@
visibility: visible;
}
/* right or prev direction */
- .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
- .carousel-item-prev.carousel-item-right + .carousel-item,
- .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
+ .carousel_click .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
+ .carousel_click .carousel-item-prev.carousel-item-right + .carousel-item,
+ .carousel_click .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
@@ -103,24 +103,24 @@
/* MD */
@media (min-width: 768px) {
/* show 3rd of 3 item slide */
- .carousel-inner .active.carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .active.carousel-item + .carousel-item + .carousel-item {
display: block;
}
- .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
- .carousel-inner .carousel-item-next {
+ .carousel_click .carousel-inner .carousel-item-next {
position: relative;
transform: translate3d(0, 0, 0);
}
/* left or forward direction */
- .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* right or prev direction */
- .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
@@ -131,14 +131,14 @@
/* LG */
@media (min-width: 991px) {
/* show 4th item */
- .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
display: block;
}
- .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
transition: none;
}
/* Show 5th slide on lg if col-lg-3 */
- .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -25%; /*change this with javascript in the future*/
@@ -147,13 +147,13 @@
visibility: visible;
}
/* left or forward direction */
- .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* right or prev direction //t - previous slide direction last item animation fix */
- .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
+ .carousel_click .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
@@ -162,18 +162,18 @@
}
}
-.carousel-control-prev, .carousel-control-next{
+.carousel_click .carousel-control-prev, .carousel_click .carousel-control-next{
width: 10px;
}
-.carousel-control-next-icon:after
+.carousel_click .carousel-control-next-icon:after
{
content: '>';
font-size: 20px;
color: #000;
}
-.carousel-control-prev-icon:after {
+.carousel_click .carousel-control-prev-icon:after {
content: '<';
font-size: 20px;
color: #000;
diff --git a/views/templates.xml b/views/templates.xml
index 00c9deb..8b5dcfe 100644
--- a/views/templates.xml
+++ b/views/templates.xml
@@ -90,41 +90,6 @@
</div>
<h3>Selectionner un jour de retrait</h3>
<t t-foreach="points_retrait" t-as="point_retrait">
- <!-- <div class="container"> -->
- <!-- <div id="carouselExample" class="carousel slide w-100 " data-ride="carousel" data-interval="false">
- <div class="carousel-inner w-100 d-flex" role="listbox">
- <t t-set="list_slots" t-value="point_retrait.slot_calculate()"/>
- <t t-foreach="list_slots" t-as="slot">
- <t t-if="slot_first">
- <div class="carousel-item active">
- <a data-toggle="tab" class="nav-link active btn btn-primary" t-attf-href='##{slot[1].strftime("%A")}#{point_retrait.id}'>
- <t class="week_day" t-esc="slot[0]"/><br/>
- <t t-esc="slot[1].day"/><br/>
- <t t-esc="slot[2]"/>
- </a>
- </div>
- </t>
- <t t-else="">
- <div class="carousel-item ">
- <a data-toggle="tab" class="nav-link active btn btn-primary" t-attf-href='##{slot[1].strftime("%A")}#{point_retrait.id}'>
- <t class="week_day" t-esc="slot[0]"/><br/>
- <t t-esc="slot[1].day"/><br/>
- <t t-esc="slot[2]"/>
- </a>
- </div>
- </t>
- </t>
- </div>
- <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
- <i class="fa fa-chevron-left fa-lg text-muted"></i>
- <span class="sr-only">Previous</span>
- </a>
- <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
- <i class="fa fa-chevron-right fa-lg text-muted"></i>
- <span class="sr-only">Next</span>
- </a>
- </div> -->
- <!-- </div> -->
<div class="card">
<t t-set="list_slots" t-value="point_retrait.slot_calculate()"/>
<ul class="nav nav-tabs justify-content-center" role="tablist">
diff --git a/views/vracoop_templates.xml b/views/vracoop_templates.xml
index e4b2510..b8b504b 100644
--- a/views/vracoop_templates.xml
+++ b/views/vracoop_templates.xml
@@ -108,7 +108,7 @@
<t t-set="point_retrait_nb" t-value="len(points_retrait)"/>
<h3 t-if="point_retrait_nb" class="mb24">Choisir un point de retrait</h3>
<div t-if="point_retrait_nb > 1" class="card border-0" id="retrait_method">
- <ul class="list-group">
+ <ul class="list-group carousel_click">
<t t-foreach="points_retrait" t-as="point_retrait">
<li class="list-group-item">
<t t-call="vracoop_click_and_collect.point_retrait_choose"/>
@@ -118,7 +118,7 @@
</div>
<div t-if="point_retrait_nb == 1" class="card border-0" id="retrait_method">
- <ul class="list-group">
+ <ul class="list-group carousel_click">
<t t-foreach="points_retrait" t-as="point_retrait">
<li class="list-group-item">
<t t-call="vracoop_click_and_collect.point_retrait_choose"/>
--
GitLab