lefilament
/
vracoop_click_and_collect
mirror of https://sources.le-filament.com/lefilament/vracoop/vracoop_click_and_collect
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Modif pb slide carousel product

12.0
Juliana 5 years ago
parent
6bb78abb2c
commit
adeae2e60e
3 changed files with 29 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      static/src/scss/style.css
  2. 35
      views/templates.xml
  3. 4
      views/vracoop_templates.xml

54
static/src/scss/style.css
View File

@ -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 @@
} }
@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 @@
} }
} }
@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-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; 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-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; 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 @@
visibility: visible; visibility: visible;
} }
/* right or prev direction */ /* 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; position: relative;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
visibility: visible; visibility: visible;
@ -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 @@
/* 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 @@
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 @@
} }
} }
.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;

35
views/templates.xml
View File

@ -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">

4
views/vracoop_templates.xml
View File

@ -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 @@
</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"/>

Write Preview
Loading…
Cancel
Save