diff --git a/static/src/scss/style.css b/static/src/scss/style.css index 9b29d02289bc7af039ee16b4176a9ecfe126f8c7..4076a907d559e46c4143797047695900bbfb1459 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 00c9debf43a08923dff4aa258c44b592d141cfad..8b5dcfedc7c30ce636e27a4335318f531569fb86 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 e4b25109264eac81647b7fe1e4ce862586bbebca..b8b504b7091df6797ac21d06e33f4ce269d15c7a 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"/>