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

style: 💄 equalize product card height

Browse source
This commit is contained in:
Karl Muller 2024-09-24 09:33:39 +02:00
parent 39da23cd67
commit 7e062f0e03
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
resources/sass/fo/partials/_product-card.scss
View file

@ -1,4 +1,3 @@
.product-card {
.product-card-tag {
top: -5%;
@ -36,6 +35,10 @@
.product-card-bottom-part {
top: -1rem;
@include media-breakpoint-up(lg) {
min-height: 8.5rem;
}
.product-card-view-more {
margin-bottom: -1rem;
}

7
resources/views/fo/partials/product-card.blade.php
View file

@ -1,6 +1,6 @@
<div class="position-relative product-card bottom-left-shadow mt-3 py-3">
<div class="position-relative product-card bottom-left-shadow h-100 mt-5 py-3">
<div class="line-border-medium bg-tertiary position-absolute w-100 h-75 left-0 start-0"></div>
<div class="position-relative" title="{{ __('Accéder au produit : :name', ['name' => $model->label]) }}">
<div class="h-75 position-relative" title="{{ __('Accéder au produit : :name', ['name' => $model->label]) }}">
<a class="d-flex justify-content-center text-decoration-none pb-5" href="{{ route('fo.products.show', $model->slug) }}">
<img src="{{ asset($model->packaging) }}" title="{{ $model->packaging_title }}" alt="{{ $model->packaging_alt }}"
@class([
@ -23,7 +23,8 @@
</div>
{{-- BOTTOM PART --}}
<div class="position-relative">
<div class="line-border-medium position-relative d-flex flex-column align-items-center product-card-bottom-part bg-white pb-3">
<div
class="line-border-medium position-relative d-flex flex-column align-items-center justify-content-center product-card-bottom-part bg-white pb-3">
<p class="text-uppercase f-bourton-base fs-4 my-4 px-4 text-center">{{ $model->label }}</p>
</div>
<div class="position-absolute w-100 d-flex justify-content-center bottom-0">