tons of fix2

This commit is contained in:
Jérémy Munsch 2021-05-06 15:47:50 +02:00
parent edba0377e4
commit d57d95dddf
18 changed files with 459 additions and 180 deletions

View file

@ -1,5 +1,5 @@
<template>
<div class="list">
<div class="productList">
<div class="items club-list-items">
<div class="list-add-item">
<a href="/produits">
@ -7,15 +7,19 @@
<p>Ajouter<br>un produit</p>
</a>
</div>
<div v-for="(product, index) in products" class="item" :key="product.id">
<div v-for="(product, index) in products" class="productWrapper" :key="product.id">
<button @click="removeFromCart(product.id, index)" :disabled="processing">
<p v-if="processing" class="loader"></p>
<span v-else>&times;</span>
</button>
<a :href="'/produit/' + product.slug">
<img :src="product.picture">
<p>{{ product.name }}</p>
<span>Voir le produit</span>
<a :href="route('product.show').replace('~PRODUCT~', product.slug)" class="favorite-recipe-text">
<figure>
<div class="hoverFigure">
<h5>Voir le produit !</h5>
</div>
<img :src="product.picture" :alt="product.name + ' - Le Gaulois'">
</figure>
<p class="name_product">{{ product.name }}</p>
</a>
</div>
</div>
@ -23,36 +27,167 @@
</template>
<script>
export default {
mounted() {
this.products = JSON.parse(this.dbproducts);
},
props: [
'dbproducts'
],
data() {
return {
products: [],
processing: false
}
},
watch: {
export default {
mounted() {
this.products = JSON.parse(this.dbproducts);
},
props: [
'dbproducts'
],
data() {
return {
products: [],
processing: false
}
},
watch: {
},
methods: {
removeFromCart(productId, index) {
this.processing = true;
axios.post('/mon-compte/liste-de-courses/' + productId + '/0').then(
(response) => {
this.products.splice(index, 1);
this.processing = false;
}
)
.catch(function (error) {
console.log(error);
},
methods: {
removeFromCart(productId, index) {
this.processing = true;
axios.post(this.route('setFav').replace('~PRODUCT~', productId)
.replace('~STATUS~', 0)).then(
(response) => {
this.products.splice(index, 1);
this.processing = false;
});
}
)
.catch(function (error) {
console.log(error);
this.processing = false;
});
}
}
}
</script>
<style lang="scss">
@import '../../../sass/_variables.scss';
.productList{
max-width: $big_screen;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.productWrapper {
position: relative;
text-align: center;
height: 237px;
width: 255px;
margin: 4em 1em;
& button {
position: absolute;
top: -5%;
right: 5%;
font-size: 45px;
border-radius: 50%;
color: white;
background-color: $orange;
height: 50px;
width: 50px;
border: 3px rgba(255,255,255,0.5) solid;
text-align: center;
font-family: "Veneer";
font-size: 40px;
line-height: 45px;
font-style: normal;
transition: opacity 0.3s;
opacity: 0;
z-index: 6;
cursor: pointer;
@media screen and (max-width: $tablet) {
opacity: 1;
}
}
&:hover {
& button {
opacity: 1;
}
}
figure {
padding: 0;
position: relative;
display:flex;
align-items: center;
justify-content: center;
overflow: hidden;
.hoverFigure{
position:absolute;
top:0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(247, 158, 21, 0.7);
z-index:5;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 500ms ease 0s;
border-radius: 1em;
&:hover{
opacity: 1;
}
h5{
color:#FFFFFF;
font-size:4em;
position: relative;
&:before {
background-image: url('~@/images/recette/hoverRecette.png');
display: inline-block;
content: "";
width: 100px;
height: 35px;
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
}
&:after {
background-image: url('~@/images/recette/hoverRecette.png');
display: inline-block;
content: "";
width: 100px;
height: 35px;
transform: rotate(180deg) translateX(54%);
position: absolute;
top: 45px;
left: 50%;
}
}
}
img {
min-height:100%;
min-width: 100%;
width:100%;
height:auto;
}
}
a > p {
font-family: 'Catamaran-Bold';
font-size: 18px;
padding: 0 40px;
text-transform: uppercase;
&:last-child {
color: $color6;
font-family: "CreamyScriptRegular";
font-size: 26px;
text-transform: none;
text-shadow: 1px 0 0 $color5, -1px 0 0 $color5, 0 1px 0 $color5, 0 -1px 0 $color5, 1px 1px $color5, -1px -1px 0 $color5, 1px -1px 0 $color5, -1px 1px 0 $color5;
}
}
}
</script>
h3 {
text-align: center;
margin-bottom: 2em;
}
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<div class="recipeList">
<div class="recipeFavList">
<div class="list-add-item recipe">
<a href="/recettes">
<i></i>
@ -8,10 +8,10 @@
</div>
<div v-for="(recipe, index) in recipes" :key="recipe.id" class="recipeWrapper">
<button @click="removeFromFavs(recipe.id, index)" :disabled="processing">
<div v-if="processing" class="loader"></div>
<p v-if="processing" class="loader"></p>
<span v-else>&times;</span>
</button>
<a :href="'/recettes/' + recipe.slug" class="favorite-recipe-text">
<a :href="route('recipes.show').replace('~RECIPE~', recipe.slug)" class="favorite-recipe-text">
<figure>
<div class="hoverFigure">
<h5>Voir la recette !</h5>
@ -45,9 +45,9 @@
methods: {
removeFromFavs(recipeId, index) {
this.processing = true;
axios.post('/mon-compte/recettes-favorites/retirer', {
id: recipeId
}).then(
axios.post(this.route('setFav').replace('~RECIPE~', recipeId)
.replace('~STATUS~', 0))
.then(
(response) => {
this.recipes.splice(index, 1);
this.processing = false;
@ -61,3 +61,134 @@
}
}
</script>
<style lang="scss">
@import '../../../sass/_variables.scss';
.recipeFavList{
max-width: $big_screen;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.recipeWrapper {
position: relative;
text-align: center;
min-width: 36em;
flex-basis: 33%;
& button {
position: absolute;
top: -5%;
right: 5%;
font-size: 45px;
border-radius: 50%;
color: white;
background-color: $orange;
height: 50px;
width: 50px;
border: 3px rgba(255,255,255,0.5) solid;
text-align: center;
font-family: "Veneer";
font-size: 40px;
line-height: 45px;
font-style: normal;
transition: opacity 0.3s;
opacity: 0;
z-index: 6;
cursor: pointer;
@include min-width($tablet) {
opacity: 1;
}
}
&:hover {
& button {
opacity: 1;
}
}
figure {
height: 236px;
margin: 0 8px 27px;
border: 8px solid white;
padding: 0;
position: relative;
display:flex;
align-items: center;
justify-content: center;
overflow: hidden;
.hoverFigure{
position:absolute;
top:0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(247, 158, 21, 0.7);
z-index:5;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 500ms ease 0s;
&:hover{
opacity: 1;
}
h5{
color:#FFFFFF;
font-size:4em;
position: relative;
&:before {
background-image: url('~@/images/recette/hoverRecette.png');
display: inline-block;
content: "";
width: 100px;
height: 35px;
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
}
&:after {
background-image: url('~@/images/recette/hoverRecette.png');
display: inline-block;
content: "";
width: 100px;
height: 35px;
transform: rotate(180deg) translateX(54%);
position: absolute;
top: 45px;
left: 50%;
}
}
}
img {
background: $color5;
min-height:100%;
min-width: 100%;
width:100%;
height:auto;
}
}
p {
font-family: 'Catamaran-Bold';
font-size: 18px;
padding: 0 40px;
text-transform: uppercase;
&:last-child {
color: $color6;
font-family: "CreamyScriptRegular";
font-size: 26px;
text-transform: none;
text-shadow: 1px 0 0 $color5, -1px 0 0 $color5, 0 1px 0 $color5, 0 -1px 0 $color5, 1px 1px $color5, -1px -1px 0 $color5, 1px -1px 0 $color5, -1px 1px 0 $color5;
}
}
}
h3 {
text-align: center;
margin-bottom: 2em;
}
}
</style>

View file

@ -658,7 +658,7 @@ export default {
position: relative;
margin-left: 1rem;
background-color: #fff;
min-width: 27rem;
min-width: 22rem;
width: 25vw;
padding: 2rem;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);

View file

@ -61,6 +61,7 @@
this.baseNotifications = JSON.parse(this.dbnotifications);
this.notificationtype = JSON.parse(this.dbnotificationtype);
this.articlecategory = JSON.parse(this.dbarticlecategory);
this.category = this.notificationtype.all.value;
},
props: [
'dbnotifications',

View file

@ -25,7 +25,7 @@
@include max-width($tablet) {
right: 50%;
transform: translateX(50%);
top: 75%;
top: 80%;
}
& > a {

View file

@ -17,6 +17,7 @@
font-family: 'Veneer';
text-decoration: underline;
text-shadow: 0px 0px 16px #000;
text-align: center;
@include max-width($tablet){
position: relative;
top: 25px;

View file

@ -92,7 +92,7 @@
overflow: hidden;
@include max-width($tablet) {
width: 100%;
min-height: 360px;
min-height: 17rem;
order: 3;
}
&:after {
@ -129,6 +129,7 @@
align-items: center;
justify-content: center;
overflow: hidden;
padding-top: 1em;
@include max-width($tablet) {
width: 100%;
min-height: 600px;
@ -158,6 +159,10 @@
}
@include max-width($mobile) {
top: 0;
flex-direction: column-reverse;
picture {
display: none;
}
}
.txt {
color: #fff;
@ -282,7 +287,7 @@
left: 14%;
}
}
img {
picture {
width: auto;
height: 170px;
position: absolute;
@ -293,11 +298,14 @@
&.logo {
left: -45px;
}
img {
height: 170px;
width: auto;
}
}
}
@include max-width($tablet) {
width: 100%;
height: 40%;
.txtOui {
width: 80%;
a {
@ -305,6 +313,31 @@
transform: translateX(-50%);
text-align: center;
}
}
}
@include max-width($mobile) {
.txtOui {
width: 100%;
a {
left: 50%;
transform: translateX(-50%);
text-align: center;
width: 96%;
}
picture {
top: -90px;
img {
height: 8rem;
}
&.eleveur {
right: 0;
}
&.logo {
left: 0;
}
}
}
}
}

View file

@ -2,7 +2,7 @@
position: relative;
background-color: $color1;
margin-top: -120px;
padding: 2rem;
padding-bottom: 5rem;
& .content {
max-width: 1200px;
@ -10,8 +10,10 @@
& .inner-size {
& > h1 {
margin-bottom: 5px;
color: $color9;
margin:5px auto;
padding: 0 0.6em;
text-align: center;
& > i {
vertical-align: revert;
@ -30,9 +32,10 @@
font-size: 25px;
padding-left: 65px;
padding-bottom: 40px;
text-align: center;
@media screen and (max-width: $tablet) {
padding-bottom: 0;
@include max-width($tablet) {
padding: 0 0.6em;
}
}
@ -47,16 +50,14 @@
.club-list-items {
width: 100% !important;
@media screen and (max-width: $mobile) {
justify-content: center !important;
}
display: flex;
flex-wrap: wrap;
justify-content: center !important;
}
.list-add-item {
display: flex;
flex-basis: 33%;
height: 390px;
margin: 0 auto;
max-width: 255px;
justify-content: center;
@ -120,7 +121,18 @@
align-items: center;
padding-bottom: 88px;
@media screen and (max-width: $tablet) {
@include max-width($tablet) {
padding-bottom: 0;
max-width: 344px;
}
}
.list-add-item.product {
max-width: 100%;
align-items: center;
padding-bottom: 88px;
@include max-width($tablet) {
padding-bottom: 0;
max-width: 344px;
}

View file

@ -181,35 +181,37 @@
position: relative;
align-items: center;
justify-content: space-between;
padding: 20px;
padding-left: 120px;
padding: 1em;
padding-left: 7rem;
background-color: #afcb03;
margin: 50px auto;
border: 10px solid #fff;
@include max-width($tablet) {
padding-left: 2rem;
padding-left: 5rem;
}
@media screen and (max-width: $mobile) {
@include max-width($mobile + 100px) {
flex-direction: column;
padding-left: 5rem;
}
& > figure {
position: absolute;
height: 160px;
width: auto;
left: -75px;
top: -95px;
left: -77px;
top: -100px;
@media screen and (max-width: $tablet) {
@include max-width($tablet) {
height: 140px;
}
@media screen and (max-width: $mobile) {
@include max-width($mobile) {
height: 120px;
left: -45px;
top: -65px;
left: -60px;
top: -85px;
}
& > img {
@ -224,11 +226,11 @@
line-height: 1em;
color: #fff;
@media screen and (max-width: $tablet) {
@include max-width($tablet) {
font-size: 2em;
}
@media screen and (max-width: $mobile) {
@include max-width($mobile + 100px) {
text-align: center;
}
}
@ -237,14 +239,14 @@
display: block;
color: white;
font-family: "Catamaran-Regular";
font-size: 15px;
font-size: 2em;
width: 80%;
@media screen and (max-width: $tablet) {
font-size: 10px;
@include max-width($tablet) {
font-size: 1.3em;
}
@media screen and (max-width: $mobile) {
@include max-width($mobile + 100px) {
display: none;
}
}
@ -267,7 +269,7 @@
color: #003b22;
}
@media screen and (max-width: $mobile) {
@include max-width($mobile) {
padding: 3px 10px;
font-size: 1.2em;
display: inline-block;
@ -279,7 +281,8 @@
}
}
& .pagination li a, .pagination li span {
& .pagination li a,
.pagination li span {
background-color: transparent;
}
}

View file

@ -43,7 +43,7 @@
<div class="volaillesfr">
<div class="col1">
<picture>
<source srcset="{{ asset('assets/images/home/volaillesfr_landing.webp') }}" type="image/webp">
<source srcset="{{ asset(resize('assets/images/home/volaillesfr_landing.png', 'landingWebp')) }}" type="image/webp">
<img src="{{ asset('assets/images/home/volaillesfr_landing.png') }}" alt="{{ __('volailles 100% Françaises') }}" />
</picture>
<div class="txt">
@ -54,11 +54,15 @@
</div>
<div class="col2">
<div class="txtOui">
<picture>
<picture class="logo">
<source srcset="{{ asset('assets/images/ocb/logo-oui.webp') }}" type="image/webp">
<img class="logo" src="{{ asset('assets/images/ocb/logo-oui.png') }}" alt="{{ __('volailles 100% Françaises') }}" />
<img src="{{ asset('assets/images/ocb/logo-oui.png') }}" alt="{{ __('volailles 100% Françaises') }}" />
</picture>
<img class="eleveur" src="{{ $breeder->picture }}" alt="{{__('Photo éleveur') }}">
<picture class="eleveur">
<source srcset="{{ asset(resize($breeder->picture, 'landingWebp')) }}" type="image/webp">
<img src="{{ $breeder->picture }}" alt="{{__('Photo éleveur') }}">
</picture>
<h5>{{ __('Alimentation :') }}</h5>
<ul>
<li><i class="fa fa-chevron-right"></i>{{ __('Céréales Entières 100% Françaises') }}</li>

View file

@ -4,21 +4,10 @@
@section('breadcrumb', request()->route()->getName())
@section('sub_header')
<div class="sub_header entete-white sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="{{ __('Le Club des Gaulois - Le Gaulois') }}">
{{ __('Les infos du Club') }}
</p>
</div>
<!-- TODO : GESTION IMG SI MOBILE -->
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="{{ __('Le club des Gaulois - Le Gaulois') }}" class="img-club">
</div>
</div>
@endsection
@include('front.club.modules.clubSubheader', [
'title' => __('Les infos du Club'),
'white' => true
])
@section('content')
<section class="white-bg">

View file

@ -2,21 +2,9 @@
@section('title', 'Club des Gaulois ma liste de courses')
@section('description', "Enregistrez en quelques clics vos produits Le Gaulois préférés")
@section('sub_header')
<div class="sub_header sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
Mon compte
</p>
</div>
<!-- TODO : GESTION IMG SI MOBILE -->
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
</div>
</div>
@endsection
@include('front.club.modules.clubSubheader', [
'title' => __('Mon Compte')
])
@section('content')
@include('front.club.modules.quicklink', ['top' => true])
@ -35,3 +23,15 @@
</div>
</section>
@endsection
@push('scriptsConstants')
<script>
window._locale = '{{ app()->getLocale() }}';
window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
window._asset = '{{ asset('') }}';
window._routes = {
'setFav': '{{ route('account.set-cart', ['product' => '~PRODUCT~', 'status' => '~STATUS~']) }}',
'product.show': '{{ route('product.show', ['product' => '~PRODUCT~']) }}'
};
</script>
@endpush

View file

@ -2,21 +2,9 @@
@section('title', 'Club des Gaulois mes recettes favorites')
@section('description', "Retrouvez en un clic toutes vos recettes Le Gaulois préférée à essayer ou déjà testées et approuvées")
@section('sub_header')
<div class="sub_header sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
Mon compte
</p>
</div>
<!-- TODO : GESTION IMG SI MOBILE -->
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
</div>
</div>
@endsection
@include('front.club.modules.clubSubheader', [
'title' => __('Mon Compte')
])
@section('content')
@include('front.club.modules.quicklink', ['top' => true])
@ -36,3 +24,15 @@
</div>
</section>
@endsection
@push('scriptsConstants')
<script>
window._locale = '{{ app()->getLocale() }}';
window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
window._asset = '{{ asset('') }}';
window._routes = {
'setFav': '{{ route('account.set-favs-recipes', ['recipe' => '~RECIPE~', 'status' => '~STATUS~']) }}',
'recipes.show': '{{ route('recipes.show', ['recipe' => '~RECIPE~']) }}'
};
</script>
@endpush

View file

@ -2,21 +2,9 @@
@section('title', 'Le Club des Gaulois')
@section('description', "Entrez dans le Club des Gaulois pour bénéficier des avantages réservés aux membres : bons de réduction, avant-premières, Départ'aimants et bourse aux échanges")
@section('sub_header')
<div class="sub_header sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
Mon compte
</p>
</div>
<!-- TODO : GESTION IMG SI MOBILE -->
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
</div>
</div>
@endsection
@include('front.club.modules.clubSubheader', [
'title' => __('Mon Compte')
])
@section('content')
@include('front.club.modules.quicklink', ['top' => true])

View file

@ -2,20 +2,9 @@
@section('title', 'Club des Gaulois mes notifications')
@section('description', "Soyez averti de nouvelles activités sur le Club des Gaulois via des alertes : message, nouveautés, sondage")
@section('sub_header')
<div class="sub_header sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="{{ __('Le Club des Gaulois - Le Gaulois') }}">
{{ __('Mes messages') }}
</p>
</div>
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="{{ __('Le club des Gaulois - Le Gaulois') }}" class="img-club">
</div>
</div>
@endsection
@include('front.club.modules.clubSubheader', [
'title' => __('Mon Compte')
])
@section('content')
@include('front.club.modules.quicklink', ['top' => true])

View file

@ -0,0 +1,17 @@
@section('sub_header')
<div class="sub_header @if(isset($white))entete-white @endif sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="{{ __('Le Club des Gaulois - Le Gaulois') }}">
{{ $title }}
</p>
</div>
<picture>
<source srcset="{{ asset('assets/images/club/bandeau-club-mbl.png') }}" media="(max-width: 500px)">
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="{{ __('Le club des Gaulois - Le Gaulois') }}" class="img-club">
</picture>
</div>
</div>
@endsection

View file

@ -2,21 +2,9 @@
@section('title', 'Club des Gaulois mes notifications')
@section('description', "Soyez averti de nouvelles activités sur le Club des Gaulois via des alertes : message, nouveautés, sondage")
@section('sub_header')
<div class="sub_header sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
Mon compte
</p>
</div>
<!-- TODO : GESTION IMG SI MOBILE -->
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
</div>
</div>
@endsection
@include('front.club.modules.clubSubheader', [
'title' => __('Mon Compte')
])
@section('content')
@include('front.club.modules.quicklink', ['top' => true])

View file

@ -2,21 +2,9 @@
@section('title', 'Les réductions Le Gaulois')
@section('description', "Pour accéder à vos bons de réductions, inscrivez-vous ou connectez-vous au Club des Gaulois")
@section('sub_header')
<div class="sub_header sub_header_club">
<div class="content white-bg">
@include('front.club.modules.customerToolbar')
<div class="title-club-account">
<p>
<img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
{{ __('Les Promos') }}
</p>
</div>
<!-- TODO : GESTION IMG SI MOBILE -->
<img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
</div>
</div>
@endsection
@include('front.club.modules.clubSubheader', [
'title' => __('Les Promos')
])
@section('content')
<a href="{{ $urlReductions }}" class="reductions-link" target="_blank">