forge-joniko/ldc-lionor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'issue-38-responsive' into 'develop'

Browse source 
fix: #38 - Responsive was broken : axis x was sometimes larger than 100vw

See merge request ldc-web/projets/lionor!29
This commit is contained in:
Vincent BRIDIER 2024-06-21 06:48:05 +00:00
commit 428e92ca44
7 changed files with 86 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/images/menu-wave.svg
View file

@ -10,7 +10,7 @@
</defs>
<g id="Groupe_198" data-name="Groupe 198" transform="translate(17.39 -394.783)">
<g transform="matrix(1, 0, 0, 1, -17.39, 394.78)" filter="url(#Tracé_2)">
<path id="Tracé_2-2" data-name="Tracé 2" d="M2538.107,1541.009c-36.592-12.47-73.208-23.422-108.83-32.566-78.356-20.073-161-33.244-245.63-39.15-35.041-2.445-69.43-3.689-102.187-3.689-118.48,0-234.992,14.359-346.29,42.67l-1.074.26c-1.448.374-2.875.792-4.311,1.211-2.25.644-4.491,1.289-6.766,1.89-58.646,16-123.46,24.169-192.2,24.169-45.351,0-78.38-3.746-87.409-4.9l-1.574-.2-1.548-.261a666.13,666.13,0,0,1-65.336-14.811c-91.11-25.594-167.894-70.075-228.193-132.207-105.432-108.637-120.49-230.568-120.49-256.174.745-2.508,1598.73-1.777,1600.073,0v444.6Z" transform="translate(-1011.27 -1125.63)" fill="#fff"/>
<path id="Tracé_2-2" data-name="Tracé 2" d="M2538.107,1541.009c-36.592-12.47-73.208-23.422-108.83-32.566-78.356-20.073-161-33.244-245.63-39.15-35.041-2.445-69.43-3.689-102.187-3.689-118.48,0-234.992,14.359-346.29,42.67l-1.074.26c-1.448.374-2.875.792-4.311,1.211-2.25.644-4.491,1.289-6.766,1.89-58.646,16-123.46,24.169-192.2,24.169-45.351,0-78.38-3.746-87.409-4.9l-1.574-.2-1.548-.261a666.13,666.13,0,0,1-65.336-14.811c-91.11-25.594-167.894-70.075-228.193-132.207-105.432-108.637-120.49-230.568-120.49-256.174.745-2.508,1598.73-1.777,1630.073,0v444.6Z" transform="translate(-1011.27 -1125.63)" fill="#fff"/>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

7
resources/sass/fo/partials/_cover.scss
View file

@ -232,17 +232,12 @@
}
.navbar {
.dropdown-menu::after {
position: absolute;
z-index: -1;
left: -25px;
width: 103%;
.nav-product-dropdown {
height: 485px;
background-image: url("@/images/menu-wave.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
content: "";
}
.dropdown:hover .dropdown-menu {

5
resources/sass/fo/partials/_local.scss
View file

@ -6,11 +6,6 @@
border-bottom-right-radius: 80% 10%;
}
.img-fluid {
width: 200px;
max-width: 200px;
}
.local-item img {
width: 123px;
height: 123px;

2
resources/sass/fo/partials/_site-footer.scss
View file

@ -43,7 +43,7 @@
.site-footer {
&::before {
position: absolute;
top: -45px;
top: 0;
left: 25%;
display: block;
width: 700px;

2
resources/views/fo/layouts/footer.blade.php
View file

@ -1,4 +1,4 @@
<footer class="site-footer position-relative mb-3 mt-5">
<footer class="site-footer position-relative mb-3 mt-5 overflow-x-hidden pt-5">
<!-- reassurance block -->
<div class="bckg-red reassurances position-relative py-4">
<div class="d-md-flex align-items-center container">

67
resources/views/fo/layouts/header.blade.php
View file

@ -1,11 +1,13 @@
<header class="site-header">
<!-- TOPBAR -->
<div class="container d-flex justify-content-center topbar small">
<div class="d-flex justify-content-center topbar small container">
<p><span class="fst-italic">{{ __('Besoin d\'une information ?') }}</span>
<a href="{{ route('contact.show') }}" title="{{ __('Page de contact') }}" class="fw-bold text-decoration-underline">{{ __('Nous contacter') }}</a>
<a class="fw-bold text-decoration-underline" href="{{ route('contact.show') }}"
title="{{ __('Page de contact') }}">{{ __('Nous contacter') }}</a>
<span>|</span>
<span class="fst-italic">{{ __('Une remarque, une suggestion ?') }}</span>
<a href="{{ route('contact.show') }}" title="{{ __('Page de contact service consommateurs') }}" class="fw-bold text-decoration-underline">{{ __('Service consommateurs') }}</a>
<a class="fw-bold text-decoration-underline" href="{{ route('contact.show') }}"
title="{{ __('Page de contact service consommateurs') }}">{{ __('Service consommateurs') }}</a>
<span>|</span>
</p>
<!-- SOCIAL -->
@ -13,7 +15,8 @@
<ul class="socials-list ms-3">
<li class="social-item">
<a href="https://www.facebook.com/people/Lionor/100063507206404/" title="{{ __('Page Facebook de Lionor') }}">
<img src="{{ Vite::asset('resources/assets/images/Facebook.svg') }}" alt="Le F de Facebook surmonté dune crète de poulet">
<img src="{{ Vite::asset('resources/assets/images/Facebook.svg') }}"
alt="Le F de Facebook surmonté dune crète de poulet">
</a>
</li>
</ul>
@ -26,49 +29,49 @@
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}" title="{{ __('Page d\'accueil') }}">
<img src="{{ Vite::asset('resources/assets/images/logo.png') }}" alt="Logo de la société Lionor" class="branding img-fluid">
<img class="branding img-fluid" src="{{ Vite::asset('resources/assets/images/logo.png') }}"
alt="Logo de la société Lionor">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-supported-content" aria-controls="navbar-supported-content" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-supported-content" type="button"
aria-controls="navbar-supported-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase font-amatic font-amatic-33" id="navbar-supported-content">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown
@if (Route::current()->getName() == 'ranges.index' ||
<div class="navbar-collapse text-uppercase font-amatic font-amatic-33 collapse" id="navbar-supported-content">
<ul class="navbar-nav mb-lg-0 mb-2 me-auto">
<li class="nav-item dropdown @if (Route::current()->getName() == 'ranges.index' ||
Route::current()->getName() == 'ranges.products' ||
Route::current()->getName() == 'products.show') active @endif">
<a class="nav-link dropdown-toggle" href="{{ route('ranges.index') }}" id="navbarDropdown" role="button" aria-expanded="false">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="{{ route('ranges.index') }}" role="button"
aria-expanded="false">
{{ __('Nos produits') }}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
@if(count($PublishedRangesGlobal))
@foreach ($PublishedRangesGlobal as $range)
<li class="mx-3">
<a href="{{ route('ranges.products', ['publishedRange' => $range]) }}" title="{{ __('Découvrez la gamme') }} {{ $range->name }}">
<div class="card">
<img src="{{ asset($range->sticker) }}" alt="{{ $range->sticker_alt }}" title="{{ $range->sticker_title }}" class="card-img-top">
<div class="card-body">
<p>{{ $range->name }}</p>
</div>
</div>
</a>
</li>
@endforeach
<ul class="dropdown-menu nav-product-dropdown" aria-labelledby="navbarDropdown">
@if (count($PublishedRangesGlobal))
@foreach ($PublishedRangesGlobal as $range)
<li class="mx-3">
<a href="{{ route('ranges.products', ['publishedRange' => $range]) }}"
title="{{ __('Découvrez la gamme') }} {{ $range->name }}">
<div class="card">
<img class="card-img-top" src="{{ asset($range->sticker) }}"
title="{{ $range->sticker_title }}" alt="{{ $range->sticker_alt }}">
<div class="card-body">
<p>{{ $range->name }}</p>
</div>
</div>
</a>
</li>
@endforeach
@else
<p>{{ __('Aucune gamme n\'est actuellement disponible') }}</p>
<p>{{ __('Aucune gamme n\'est actuellement disponible') }}</p>
@endif
</ul>
</li>
<li class="nav-item
@if (Route::current()->getName() == 'engagments' ||
Route::current()->getName() == 'local') active @endif">
<li class="nav-item @if (Route::current()->getName() == 'engagments' || Route::current()->getName() == 'local') active @endif">
<a class="nav-link" href="{{ route('engagments') }}">{{ __('Nos engagements') }}</a>
</li>
<li class="nav-item
@if (Route::current()->getName() == 'recipes.index' ||
Route::current()->getName() == 'recipes.show') active @endif">
<li class="nav-item @if (Route::current()->getName() == 'recipes.index' || Route::current()->getName() == 'recipes.show') active @endif">
<a class="nav-link" href="{{ route('recipes.index') }}">{{ __('Nos recettes et astuces') }}</a>
</li>
<li class="nav-item @if (Route::current()->getName() == 'map') active @endif">

81
resources/views/fo/pages/home.blade.php
View file

@ -6,21 +6,23 @@
@section('content')
<div class="d-md-flex g-0 position-relative hero">
<img src="{{ Vite::asset('resources/assets/images/100LOCAL-V1.png') }}" alt="Logo 100% local" class="img-fluid">
<div class="hero-left bckg-yellow col-md-6 position-relative text-uppercase ">
<img src="{{ Vite::asset('resources/assets/images/Eleveur.jpg') }}" alt="Un éleveur posant avec un poulet" class="img-fluid">
<section class="hero-content bckg-yellow bottom-0 start-0 end-0 opacity hero_content hero_left">
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/100LOCAL-V1.png') }}" alt="Logo 100% local">
<div class="hero-left bckg-yellow col-md-6 position-relative text-uppercase">
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/Eleveur.jpg') }}" alt="Un éleveur posant avec un poulet">
<section class="hero-content bckg-yellow opacity hero_content hero_left bottom-0 end-0 start-0">
<h2>{{ __('Des produits bien élevés qui ont le goût de la qualité') }}</h2>
<h3>{{ __('Garantis 100% local') }}</h3>
<a href="{{ route('engagments') }}" title="Nous découvrir" class="btn btn-light mt-2 mb-5">{{ __('Nous Découvrir >') }}</a>
<a class="btn btn-light mb-5 mt-2" href="{{ route('engagments') }}" title="Nous découvrir">{{ __('Nous Découvrir >') }}</a>
</section>
</div>
<div class="hero-right bckg-red col-md-6 position-relative text-uppercase ">
<img src="{{ Vite::asset('resources/assets/images/Brochette.jpg') }}" alt="Une assiette de brochette de volaille prise en gros plan" class="img-fluid">
<section class="hero-content bckg-red bottom-0 start-0 end-0 opacity hero_content hero_right">
<div class="hero-right bckg-red col-md-6 position-relative text-uppercase">
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/Brochette.jpg') }}"
alt="Une assiette de brochette de volaille prise en gros plan">
<section class="hero-content bckg-red opacity hero_content hero_right bottom-0 end-0 start-0">
<h2>{{ __('Des produits de qualité bons et accessibles') }}</h2>
<h3>{{ __('Pour manger sain et régional') }}</h3>
<a href="{{ route('recipes.index') }}" title="Voir nos recettes" class="btn btn-light mt-2 mb-5">{{ __('Voir nos recettes >') }}</a>
<a class="btn btn-light mb-5 mt-2" href="{{ route('recipes.index') }}"
title="Voir nos recettes">{{ __('Voir nos recettes >') }}</a>
</section>
</div>
</div>
@ -32,26 +34,30 @@
<div class="container-fluid pt-5 text-center">
<div class="row">
<section class="col-md-8 offset-md-2 stripes">
<h2 class="text-uppercase font-amatic font-amatic-48">{{ __('Découvrez nos volailles bien élevées') }}<span class="font-amatic-red">{{ __('qui ont le goût de la qualité') }}</span></h2>
<h2 class="text-uppercase font-amatic font-amatic-48">{{ __('Découvrez nos volailles bien élevées') }}<span
class="font-amatic-red">{{ __('qui ont le goût de la qualité') }}</span></h2>
</section>
</div>
<div class="row mt-4">
<div class="row mt-4 overflow-hidden">
<div class="col-lg-6 offset-lg-3">
<div class="container">
<div class="row justify-content-center position-relative bckg-illustration bckg-illustration--poulet">
@foreach($ranges as $range)
@if ($range->status)
<div class="col-md-6 mb-5">
<div class="card">
<img src="{{ asset($range->sticker) }}" alt="{{ $range->sticker_alt }}" title="{{ $range->sticker_title }}" class="card-img-top">
<div class="card-body">
<h3 class="card-title text-uppercase font-amatic font-amatic-46 mt-4">{{ $range->name }}</h3>
<p class="card-text minheight-3">{{ $range->subtitle }}</p>
<a href="{{ route('ranges.products', ['publishedRange' => $range->slug]) }}" title="{{ $range->name }}" class="btn btn-primary text-uppercase">{{ __('Découvrir >') }}</a>
@foreach ($ranges as $range)
@if ($range->status)
<div class="col-md-6 mb-5">
<div class="card">
<img class="card-img-top" src="{{ asset($range->sticker) }}" title="{{ $range->sticker_title }}"
alt="{{ $range->sticker_alt }}">
<div class="card-body">
<h3 class="card-title text-uppercase font-amatic font-amatic-46 mt-4">{{ $range->name }}</h3>
<p class="card-text minheight-3">{{ $range->subtitle }}</p>
<a class="btn btn-primary text-uppercase"
href="{{ route('ranges.products', ['publishedRange' => $range->slug]) }}"
title="{{ $range->name }}">{{ __('Découvrir >') }}</a>
</div>
</div>
</div>
</div>
</div>
@endif
@endif
@endforeach
</div>
</div>
@ -60,22 +66,29 @@
</div>
<!-- OU NOUS TROUVER -->
<section class="container pt-5 mb-5 text-center position-relative">
<section class="position-relative container mb-5 pt-5 text-center">
<span class="separator-shadow"></span>
<h2 class="d-md-flex justify-content-center align-items-center text-uppercase font-amatic font-amatic-yellow font-amatic-48 font-amatic-before font-amatic-after">{{ __('Où trouver notre gamme de produits Lionor ?') }}</h2>
<a href="{{ route('map') }}" title="Voir la carte" class="btn btn-primary text-uppercase">{{ __('Voir la carte >') }}</a>
<h2
class="d-md-flex justify-content-center align-items-center text-uppercase font-amatic font-amatic-yellow font-amatic-48 font-amatic-before font-amatic-after">
{{ __('Où trouver notre gamme de produits Lionor ?') }}</h2>
<a class="btn btn-primary text-uppercase" href="{{ route('map') }}" title="Voir la carte">{{ __('Voir la carte >') }}</a>
</section>
<!-- RECETTES -->
<div class="container recipes">
<section class="stripes">
<h2 class="text-center text-uppercase font-amatic font-amatic-48 special d-sm-inline-flex position-relative">{{ __('Trouver l\'inspiration avec nos recettes') }}<span class="font-amatic-red">{{ __('de volailles bonnes et accessibles') }}</span></h2>
</section>
<div class="recipes overflow-hidden">
<div class="container">
<section class="stripes">
<h2 class="text-uppercase font-amatic font-amatic-48 special d-sm-inline-flex position-relative text-center">
{{ __('Trouver l\'inspiration avec nos recettes') }}<span
class="font-amatic-red">{{ __('de volailles bonnes et accessibles') }}</span></h2>
</section>
@include('fo.partials.recipes-block', ['recipes' => $publishedRecipes])
@include('fo.partials.recipes-block', ['recipes' => $publishedRecipes])
<p class="text-center mt-3">
<a href="{{ route('recipes.index') }}" title="{{ __('Nos recettes') }}" class="btn btn-primary text-uppercase">{{ __('Voir toutes nos recettes >') }}</a>
</p>
<p class="mt-3 text-center">
<a class="btn btn-primary text-uppercase" href="{{ route('recipes.index') }}"
title="{{ __('Nos recettes') }}">{{ __('Voir toutes nos recettes >') }}</a>
</p>
</div>
</div>
@endsection