Skip to content
Extraits de code Groupes Projets
Valider adeae2e6 rédigé par Juliana's avatar Juliana
Parcourir les fichiers

Modif pb slide carousel product

parent 6bb78abb
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
*/ */
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991px) {
/* Show 4th slide on md if col-md-4*/ /* 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; position: absolute;
top: 0; top: 0;
right: -33.3333%; /*change this with javascript in the future*/ right: -33.3333%; /*change this with javascript in the future*/
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
} }
@media (min-width: 576px) and (max-width: 768px) { @media (min-width: 576px) and (max-width: 768px) {
/* Show 3rd slide on sm if col-sm-6*/ /* 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; position: absolute;
top: 0; top: 0;
right: -50%; /*change this with javascript in the future*/ right: -50%; /*change this with javascript in the future*/
...@@ -57,31 +57,31 @@ ...@@ -57,31 +57,31 @@
} }
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.carousel-item { .carousel_click .carousel-item {
margin-right: 0; margin-right: 0;
} }
/* show 2 items */ /* show 2 items */
.carousel-inner .active.carousel-item + .carousel-item { .carousel_click .carousel-inner .active.carousel-item + .carousel-item {
display: block; display: block;
} }
.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-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-item {
transition: none; transition: none;
} }
.carousel-inner .carousel-item-next { .carousel_click .carousel-inner .carousel-item-next {
position: relative; position: relative;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
/* left or forward direction */ /* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel_click .active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item, .carousel_click .carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item { .carousel_click .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
position: relative; position: relative;
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
visibility: visible; visibility: visible;
} }
/* farthest right hidden item must be also positioned for animations */ /* 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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -90,9 +90,9 @@ ...@@ -90,9 +90,9 @@
visibility: visible; visibility: visible;
} }
/* right or prev direction */ /* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel_click .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item, .carousel_click .carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item { .carousel_click .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
position: relative; position: relative;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
visibility: visible; visibility: visible;
...@@ -103,24 +103,24 @@ ...@@ -103,24 +103,24 @@
/* MD */ /* MD */
@media (min-width: 768px) { @media (min-width: 768px) {
/* show 3rd of 3 item slide */ /* 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; 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; transition: none;
} }
.carousel-inner .carousel-item-next { .carousel_click .carousel-inner .carousel-item-next {
position: relative; position: relative;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
/* left or forward direction */ /* 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; position: relative;
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
visibility: visible; visibility: visible;
} }
/* right or prev direction */ /* 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; position: relative;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
visibility: visible; visibility: visible;
...@@ -131,14 +131,14 @@ ...@@ -131,14 +131,14 @@
/* LG */ /* LG */
@media (min-width: 991px) { @media (min-width: 991px) {
/* show 4th item */ /* 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; 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; transition: none;
} }
/* Show 5th slide on lg if col-lg-3 */ /* 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; position: absolute;
top: 0; top: 0;
right: -25%; /*change this with javascript in the future*/ right: -25%; /*change this with javascript in the future*/
...@@ -147,13 +147,13 @@ ...@@ -147,13 +147,13 @@
visibility: visible; visibility: visible;
} }
/* left or forward direction */ /* 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; position: relative;
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
visibility: visible; visibility: visible;
} }
/* right or prev direction //t - previous slide direction last item animation fix */ /* 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; position: relative;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
visibility: visible; visibility: visible;
...@@ -162,18 +162,18 @@ ...@@ -162,18 +162,18 @@
} }
} }
.carousel-control-prev, .carousel-control-next{ .carousel_click .carousel-control-prev, .carousel_click .carousel-control-next{
width: 10px; width: 10px;
} }
.carousel-control-next-icon:after .carousel_click .carousel-control-next-icon:after
{ {
content: '>'; content: '>';
font-size: 20px; font-size: 20px;
color: #000; color: #000;
} }
.carousel-control-prev-icon:after { .carousel_click .carousel-control-prev-icon:after {
content: '<'; content: '<';
font-size: 20px; font-size: 20px;
color: #000; color: #000;
......
...@@ -90,41 +90,6 @@ ...@@ -90,41 +90,6 @@
</div> </div>
<h3>Selectionner un jour de retrait</h3> <h3>Selectionner un jour de retrait</h3>
<t t-foreach="points_retrait" t-as="point_retrait"> <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"> <div class="card">
<t t-set="list_slots" t-value="point_retrait.slot_calculate()"/> <t t-set="list_slots" t-value="point_retrait.slot_calculate()"/>
<ul class="nav nav-tabs justify-content-center" role="tablist"> <ul class="nav nav-tabs justify-content-center" role="tablist">
......
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
<t t-set="point_retrait_nb" t-value="len(points_retrait)"/> <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> <h3 t-if="point_retrait_nb" class="mb24">Choisir un point de retrait</h3>
<div t-if="point_retrait_nb &gt; 1" class="card border-0" id="retrait_method"> <div t-if="point_retrait_nb &gt; 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"> <t t-foreach="points_retrait" t-as="point_retrait">
<li class="list-group-item"> <li class="list-group-item">
<t t-call="vracoop_click_and_collect.point_retrait_choose"/> <t t-call="vracoop_click_and_collect.point_retrait_choose"/>
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
</div> </div>
<div t-if="point_retrait_nb == 1" class="card border-0" id="retrait_method"> <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"> <t t-foreach="points_retrait" t-as="point_retrait">
<li class="list-group-item"> <li class="list-group-item">
<t t-call="vracoop_click_and_collect.point_retrait_choose"/> <t t-call="vracoop_click_and_collect.point_retrait_choose"/>
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter