Merge branch 'issue-41' into 'develop'
Closes #41 See merge request ldc-web/projets/le-gaulois!70
This commit is contained in:
Vincent BRIDIER
commit
7a7abd7abd
4 changed files with 147 additions and 163 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
207
resources/sass/front/pages/club/_index.scss
vendored
207
resources/sass/front/pages/club/_index.scss
vendored
|
|
@ -20,144 +20,125 @@
|
|||
& .top-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 150px;
|
||||
top: -7rem;
|
||||
height: 18rem;
|
||||
z-index: 20;
|
||||
|
||||
@media screen and (max-width: $large_screen) {
|
||||
height: 350px;
|
||||
margin-bottom: -70px;
|
||||
align-items: flex-end;
|
||||
top: -90px;
|
||||
top: -2rem;
|
||||
height: 14rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $desktop - 60) {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
top: auto;
|
||||
height: inherit;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
& .left {
|
||||
position: relative;
|
||||
top: -90px;
|
||||
width: 50%;
|
||||
height: 220px;
|
||||
background-image: url('~@/images/club/bg-promo-club-dkstp.png');
|
||||
background-repeat: no-repeat;
|
||||
z-index: 80;
|
||||
|
||||
@media screen and (max-width: $large_screen) {
|
||||
top: auto;
|
||||
}
|
||||
margin: 35px 18px 0;
|
||||
|
||||
@media screen and (max-width: $desktop - 60) {
|
||||
top: auto;
|
||||
margin: 0 auto 50px auto;
|
||||
background-image: url('~@/images/club/bg-promo-club-mbl.png');
|
||||
height: 340px;
|
||||
background-position-x: center;
|
||||
background-position-y: top;
|
||||
width: auto;
|
||||
margin: 0 auto 30px auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile) {
|
||||
width: 75%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
margin: 0 auto 30px auto;
|
||||
}
|
||||
|
||||
& .img-products {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
width: 35%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@media screen and (max-width: $desktop - 60) {
|
||||
width: 80%;
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
& .img-reduc {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 10%;
|
||||
width: 40%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@media screen and (max-width: $desktop - 60) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .bloc-reduc {
|
||||
& a {
|
||||
position: relative;
|
||||
top: 40%;
|
||||
right: 10%;
|
||||
line-height: normal;
|
||||
font-family: 'Veneer';
|
||||
font-size: 2.4em;
|
||||
color: white;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@media screen and (max-width: $large_screen) {
|
||||
font-size: 2em;
|
||||
}
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $color5;
|
||||
|
||||
@media screen and (max-width: $desktop - 60) {
|
||||
font-size: 1.7em;
|
||||
top: 70%;
|
||||
right: 50%;
|
||||
transform: translateX(25%);
|
||||
margin: 0 30px 25px 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet - 60) {
|
||||
& .montant {
|
||||
position: absolute;
|
||||
font-family: "Veneer";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
left: 56%;
|
||||
top: 21%;
|
||||
font-size: 4em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
|
||||
@include max-width($big_screen) {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
@include max-width($desktop) {
|
||||
font-size: 3em;
|
||||
}
|
||||
@include max-width($tablet + 100px) {
|
||||
font-size: 3em;
|
||||
width: 27%;
|
||||
left: 65%;
|
||||
}
|
||||
@include max-width($tablet - 100px) {
|
||||
font-size: 3em;
|
||||
}
|
||||
@include max-width($mobile) {
|
||||
font-size: 3em;
|
||||
}
|
||||
@include max-width($xmobile + 100px) {
|
||||
font-size: 2.4em;
|
||||
}
|
||||
@include max-width($xmobile) {
|
||||
font-size: 2em;
|
||||
}
|
||||
& .euro {
|
||||
font-size: 2em;
|
||||
margin-left: 10px;
|
||||
color: red;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
& .sentence {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
right: 1.5em;
|
||||
width: 34%;
|
||||
text-align: left;
|
||||
font-family: "Catamaran-Bold";
|
||||
font-size: 1.5em;
|
||||
top: 70%;
|
||||
right: 50%;
|
||||
transform: translateX(25%);
|
||||
}
|
||||
|
||||
&>span:first-child {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 21%;
|
||||
width: 4em;
|
||||
|
||||
@media screen and (max-width: $tablet - 60) {
|
||||
right: 24%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile) {
|
||||
right: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
&>span:nth-child(2) {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 4%;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
&>span:nth-child(3) {
|
||||
position: absolute;
|
||||
right: 1%;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&>span:last-child {
|
||||
position: absolute;
|
||||
font-size: 0.7em;
|
||||
font-family: 'Catamaran-Bold';
|
||||
color: #242424;
|
||||
top: 70px;
|
||||
left: 60%;
|
||||
line-height: 1.2em;
|
||||
@include max-width($big_screen) {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@include max-width($desktop) {
|
||||
font-size: 1.4em;
|
||||
width: 33%;
|
||||
}
|
||||
@include max-width($tablet + 50px) {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
@include max-width($mobile) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
@include max-width($xmobile + 10px){
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $desktop - 60) {
|
||||
left: 50%;
|
||||
top: 50px;
|
||||
text-align: center;
|
||||
picture {
|
||||
display: block;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -187,14 +168,12 @@
|
|||
background-color: #974c99;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
top: -215px;
|
||||
top: -0.8rem;
|
||||
|
||||
@media screen and (max-width: $large_screen) {
|
||||
top: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $desktop - 60) {
|
||||
top: auto;
|
||||
padding: 0 30px 25px 30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@extends('layouts.app')
|
||||
@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('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_index">
|
||||
<div class="content white-bg">
|
||||
<div class="content">
|
||||
@include('front.club.modules.customerToolbar')
|
||||
<h1 class="title-club">
|
||||
<p class="up">{{ __('Le club') }}</p>
|
||||
|
|
@ -13,64 +15,67 @@
|
|||
<p class="club-promo">{{ __('Les promos !') }}</p>
|
||||
<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">
|
||||
<img class="img-club" src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}"
|
||||
alt="{{ __('Le club des Gaulois - Le Gaulois') }}">
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<section class="content index-club">
|
||||
<h2 class="promo-responsive">{{ __('Les promos !') }}</h2>
|
||||
<div class="top-content">
|
||||
<a class="left" href="{{ auth('customer')->check() ? route('club.reductions') : route('form-connexion') }}">
|
||||
<img class="img-products" src="{{ asset('assets/images/club/produit-promo.png') }}" alt="{{ __('Promos - Le Gaulois') }}">
|
||||
<img class="img-reduc" src="{{ asset('assets/images/club/bg-red-3d.png') }}" alt="{{ __('Promos - Le Gaulois') }}">
|
||||
<div class="bloc-reduc">
|
||||
<span>{{ __('Économisez aujourd\'hui') }}</span>
|
||||
<span>{{ number_format($montantReduction, 2, ',', '') }}</span>
|
||||
<span>€</span>
|
||||
<span>{{ __('En bons de réduction sur une sélection de produits Le Gaulois') }}</span>
|
||||
<section class="content index-club">
|
||||
<h2 class="promo-responsive">{{ __('Les promos !') }}</h2>
|
||||
<div class="top-content">
|
||||
<div class="left">
|
||||
<a href="{{ auth('customer')->check() ? route('club.reductions') : route('form-connexion') }}">
|
||||
<span class="montant">{{ __('économisez aujourd\'hui') }} <span
|
||||
class="euro">{{ number_format($montantReduction, 2, ',', '') }}€</span></span>
|
||||
<span class="sentence">{{ __('En bons de réductions sur une sélection de produits Le Gaulois') }}</span>
|
||||
<picture>
|
||||
<img src="{{ asset('assets/images/home/background-BR.png') }}" alt="Bons de réduction image arière plan">
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
<div class="right">
|
||||
<div class="departaimants-content">
|
||||
<div class="departaimant-img"></div>
|
||||
<div class="inner-content">
|
||||
<p class="nbr-membres"><span>{{ __(':number membres', [
|
||||
'number' => $nbCustomers
|
||||
]) }}</span></p>
|
||||
<ul class="list">
|
||||
<li><span class="check"><i class="fa fa-check"></i></span><span>{{ __('Bourses aux échanges') }}</span></li>
|
||||
<li><span class="check"><i class="fa fa-check"></i></span><span>{{ __('Fond de carte') }}</span></li>
|
||||
<li><span class="check"><i class="fa fa-check"></i></span><span>{{ __('Messages') }}</span></li>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<div class="departaimants-content">
|
||||
<div class="departaimant-img"></div>
|
||||
<div class="inner-content">
|
||||
<p class="nbr-membres">
|
||||
<span>{{ __(':number membres', [
|
||||
'number' => $nbCustomers,
|
||||
]) }}</span>
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li><span class="check"><i class="fa fa-check"></i></span><span>{{ __('Bourses aux échanges') }}</span></li>
|
||||
<li><span class="check"><i class="fa fa-check"></i></span><span>{{ __('Fond de carte') }}</span></li>
|
||||
<li><span class="check"><i class="fa fa-check"></i></span><span>{{ __('Messages') }}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn brdr-jaune" href="{{ auth('customer')->check() ? route('club.bourse.index') : route('form-connexion') }}"
|
||||
title="{{ __('Complétez votre collec') }}">{{ __('Complétez votre collec\'') }}</a>
|
||||
<a class="btn brdr-jaune" href="{{ auth('customer')->check() ? route('club.boutique.index') : route('form-connexion') }}"
|
||||
title="{{ __('Accédez à la boutique') }}">{{ __('Accédez à la boutique') }}</a>
|
||||
</div>
|
||||
<a class="btn brdr-jaune" href="{{ auth('customer')->check() ? route('club.bourse.index') : route('form-connexion') }}" title="{{ __('Complétez votre collec') }}">{{__('Complétez votre collec\'') }}</a>
|
||||
<a class="btn brdr-jaune" href="{{ auth('customer')->check() ? route('club.boutique.index') : route('form-connexion') }}" title="{{ __('Accédez à la boutique') }}">{{__('Accédez à la boutique') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('front.club.modules.quicklink')
|
||||
<p>{{ __('Pour tout savoir sur Le Gaulois') }}</p>
|
||||
<articles-club
|
||||
:show-title="true"
|
||||
dbarticles="{{ json_encode($articles->toArray(), JSON_FORCE_OBJECT) }}"
|
||||
dbcategories="{{ json_encode($categories->toArray(), JSON_FORCE_OBJECT) }}"
|
||||
choosedcategory='{{ $category }}'/></articles-club>
|
||||
</section>
|
||||
@include('front.club.modules.quicklink')
|
||||
<p>{{ __('Pour tout savoir sur Le Gaulois') }}</p>
|
||||
<articles-club :show-title="true" dbarticles="{{ json_encode($articles->toArray(), JSON_FORCE_OBJECT) }}"
|
||||
dbcategories="{{ json_encode($categories->toArray(), JSON_FORCE_OBJECT) }}"
|
||||
choosedcategory='{{ $category }}' /></articles-club>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@push('scriptsConstants')
|
||||
<script nonce="{{ $nonce }}">
|
||||
window._locale = '{{ app()->getLocale() }}';
|
||||
window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
|
||||
window._asset = '{{ asset('') }}';
|
||||
window._routes = {
|
||||
"club.infos.child": "{{ route('club.infos.child', [
|
||||
'articleTag' => 'TAG',
|
||||
'publishedArticle' => 'ARTICLE'
|
||||
]) }}"
|
||||
};
|
||||
</script>
|
||||
<script nonce="{{ $nonce }}">
|
||||
window._locale = '{{ app()->getLocale() }}';
|
||||
window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
|
||||
window._asset = '{{ asset('') }}';
|
||||
window._routes = {
|
||||
"club.infos.child": "{{ route('club.infos.child', [
|
||||
'articleTag' => 'TAG',
|
||||
'publishedArticle' => 'ARTICLE',
|
||||
]) }}"
|
||||
};
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue