update main slider colors/arrow
This commit is contained in:
Alexis Gousseau
parent
16e14cd24a
commit
5e572b17d2
5 changed files with 98 additions and 28 deletions
|
|
@ -11,9 +11,11 @@ class MainSlideFactory extends Factory
|
|||
* Define the model's default state.
|
||||
*
|
||||
* @return array<string, mixed>
|
||||
* @phpcs:disable Generic.Metrics.CyclomaticComplexity.TooHigh
|
||||
*/
|
||||
public function definition()
|
||||
{
|
||||
// @phpcs:enable
|
||||
$button1status = fake()->boolean(75);
|
||||
$button2status = fake()->boolean(75);
|
||||
$publishedStatus = fake()->boolean(75);
|
||||
|
|
@ -30,10 +32,10 @@ class MainSlideFactory extends Factory
|
|||
'button_2_text' => $button2status ? fake()->sentence(3) : null,
|
||||
'button_2_url' => $button2status ? fake()->url() : null,
|
||||
'color_block' => fake()->unique()->safeHexColor(),
|
||||
'button_1_color_text' => fake()->unique()->safeHexColor(),
|
||||
'button_1_color_background' => fake()->unique()->safeHexColor(),
|
||||
'button_2_color_text' => fake()->unique()->safeHexColor(),
|
||||
'button_2_color_background' => fake()->unique()->safeHexColor(),
|
||||
'button_1_color_text' => '#FFFFFF',
|
||||
'button_1_color_background' => '#4E3238',
|
||||
'button_2_color_text' => '#4E3238',
|
||||
'button_2_color_background' => '#FFFFFF',
|
||||
'button_1_status' => $button1status,
|
||||
'button_1_target' => $button1status ? fake()->boolean(75) : false,
|
||||
'button_2_status' => $button2status,
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@ return new class extends Migration
|
|||
$table->string('button_2_text')->nullable()->comment('Text of the button n°2 in the slide.');
|
||||
$table->string('button_2_url')->nullable()->comment('Url of the button n°2 in the slide.');
|
||||
$table->unsignedBigInteger('color_block')->comment('Slide block background color.');
|
||||
$table->unsignedBigInteger('button_1_color_text')->nullable()->comment('Slide button n°1 text color.');
|
||||
$table->unsignedBigInteger('button_1_color_background')->nullable()
|
||||
$table->unsignedBigInteger('button_1_color_text')->comment('Slide button n°1 text color.');
|
||||
$table->unsignedBigInteger('button_1_color_background')
|
||||
->comment('Slide button n°1 background color.');
|
||||
$table->unsignedBigInteger('button_2_color_text')->nullable()->comment('Slide button n°2 text color.');
|
||||
$table->unsignedBigInteger('button_2_color_background')->nullable()
|
||||
$table->unsignedBigInteger('button_2_color_text')->comment('Slide button n°2 text color.');
|
||||
$table->unsignedBigInteger('button_2_color_background')
|
||||
->comment('Slide button n°2 background color.');
|
||||
$table->integer('order')->comment('Slide order.');
|
||||
$table->boolean('button_1_status')->comment('Slide button n°1 publish status.');
|
||||
|
|
|
|||
|
|
@ -59,7 +59,15 @@
|
|||
top: 14rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
top: 45%;
|
||||
top: 42rem;
|
||||
}
|
||||
|
||||
&-prev-custom {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
&-next-custom {
|
||||
left: calc(20vw + 29.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@
|
|||
:value="intValue"
|
||||
>
|
||||
<div
|
||||
:class="`chrome-picker position-absolute left-0 ${
|
||||
:class="`color-picker position-absolute left-0 ${
|
||||
intDisplayPicker ? 'd-inline-block' : 'd-none'
|
||||
}`"
|
||||
>
|
||||
<Chrome-picker
|
||||
<Color-picker
|
||||
ref="picker"
|
||||
v-model="intInternalValue"
|
||||
/>
|
||||
|
|
@ -65,9 +65,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Sketch } from "@ckpack/vue-color";
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
// @ts-ignore
|
||||
import { Chrome } from "@ckpack/vue-color";
|
||||
import trans from "../../modules/trans";
|
||||
import { Tooltips } from "./../../modules/bsTooltips";
|
||||
|
||||
|
|
@ -76,7 +75,7 @@ export default defineComponent({
|
|||
inheritAttrs: false,
|
||||
mixins: [trans],
|
||||
components: {
|
||||
"Chrome-picker": Chrome,
|
||||
"Color-picker": Sketch,
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
|
|
@ -118,7 +117,7 @@ export default defineComponent({
|
|||
intDisplayPicker: boolean;
|
||||
intNullableInput: HTMLInputElement | null;
|
||||
intColorPickerFakeInput: HTMLElement | null;
|
||||
intPicker: typeof Chrome | null;
|
||||
intPicker: typeof Sketch | null;
|
||||
tooltips: Tooltips | null;
|
||||
} {
|
||||
return {
|
||||
|
|
@ -141,7 +140,7 @@ export default defineComponent({
|
|||
this.intNullableInput = this.$refs.nullableInput as HTMLInputElement;
|
||||
this.intColorPickerFakeInput = this.$refs
|
||||
.colorPickerFakeInput as HTMLElement;
|
||||
this.intPicker = this.$refs.picker as typeof Chrome;
|
||||
this.intPicker = this.$refs.picker as typeof Sketch;
|
||||
|
||||
const json = String(this.$attrs.json ?? "{}"),
|
||||
data = JSON.parse(json);
|
||||
|
|
@ -251,19 +250,77 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
.color-picker-component {
|
||||
position: relative;
|
||||
.chrome-picker {
|
||||
z-index: 9;
|
||||
z-index: 2;
|
||||
.vc-sketch {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
.vc-chrome-alpha-wrap {
|
||||
.vc-sketch-sliders, .vc-sketch-field {
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.vc-sketch-sliders {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 16px;
|
||||
}
|
||||
.vc-sketch-hue-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
.vc-sketch-alpha-wrap, .vc-sketch-presets-color:last-of-type, .vc-sketch-color-wrap, .vc-sketch-field--single {
|
||||
display: none;
|
||||
}
|
||||
.vc-chrome-body {
|
||||
background-color: var(--bs-body-bg);
|
||||
.vc-sketch-color-wrap .vc-checkerboard {
|
||||
background-image: none !important;
|
||||
}
|
||||
.vc-chrome-fields .vc-input__input {
|
||||
.vc-sketch-active-color, .vc-sketch-saturation-wrap {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.vc-sketch-hue-wrap, .vc-hue-pointer, .vc-hue-picker {
|
||||
height: 100%;
|
||||
}
|
||||
.vc-hue-picker {
|
||||
margin: 0;
|
||||
}
|
||||
.vc-saturation-circle {
|
||||
box-shadow: 0 0 0 1.2px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4)
|
||||
}
|
||||
.vc-editable-input {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.vc-input__label, .vc-input__input {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
.vc-input__label {
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
.vc-input__input {
|
||||
padding: .375rem .75rem !important;
|
||||
margin-left: 0.5rem;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-body-bg);
|
||||
border: var(--bs-border-width) solid var(--bs-border-color) !important;
|
||||
border-radius: var(--bs-border-radius);
|
||||
box-shadow: none !important;
|
||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
|
||||
}
|
||||
.vc-input__input:focus {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-body-bg);
|
||||
border-color: #94a8be;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 .25rem #29507c40 !important;
|
||||
}
|
||||
.vc-sketch-presets {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
@if ($mainSlideModel->{'button_' . $i . '_status'})
|
||||
<a class="btn btn-primary m-1 m-1 border-0"
|
||||
href="{{ $mainSlideModel->{'button_' . $i . '_url'} }}"
|
||||
title="{{ __('Accéder au lien suivant: :site', ['site' => $mainSlideModel->{'button_' . $i . '_url'}]) }}"
|
||||
title="{{ $mainSlideModel->{'button_' . $i . '_text'} }}"
|
||||
style="color:{{ $mainSlideModel->{'button_' . $i . '_color_text'} }};background-color:{{ $mainSlideModel->{'button_' . $i . '_color_background'} }}"
|
||||
@if ($mainSlideModel->{'button_' . $i . '_target'}) target="_blank" @endif>{{ $mainSlideModel->{'button_' . $i . '_text'} }}</a>
|
||||
@endif
|
||||
|
|
@ -53,7 +53,8 @@
|
|||
@endforeach
|
||||
</div>
|
||||
<button
|
||||
class="position-absolute z-1 swiper-pagination-playpause btn btn-secondary btn-sm bg-secondary bottom-0 start-0 border-0 bg-opacity-50">
|
||||
class="position-absolute z-1 swiper-pagination-playpause btn btn-secondary btn-sm bg-secondary bottom-0 start-0 border-0 bg-opacity-50"
|
||||
title="{{ __('Bouton pour mettre le carrousel en pause/en fonctionnement') }}">
|
||||
<i class="fa-solid fa-xl fa-pause"></i>
|
||||
<i class="fa-solid fa-xl fa-play d-none"></i>
|
||||
</button>
|
||||
|
|
@ -99,12 +100,12 @@
|
|||
<div class="ck-editor">{!! clean($approachSlideModel->text) !!}</div>
|
||||
</div>
|
||||
<div
|
||||
class="slide-btns w-100 position-absolute translate-middle-x d-flex flex-column flex-xl-row justify-content-center align-items-center start-50">
|
||||
class="slide-btns w-100 position-absolute translate-middle-x d-flex flex-column flex-xl-row justify-content-center align-items-center start-50 z-1">
|
||||
@for ($i = 1; $i <= 2; $i++)
|
||||
@if ($approachSlideModel->{'button_' . $i . '_status'})
|
||||
<a class="btn btn-secondary m-1 m-1 border-0"
|
||||
href="{{ $approachSlideModel->{'button_' . $i . '_url'} }}"
|
||||
title="{{ __('Accéder au lien suivant: :site', ['site' => $approachSlideModel->{'button_' . $i . '_url'}]) }}"
|
||||
title="{{ $approachSlideModel->{'button_' . $i . '_text'} }}"
|
||||
@if ($approachSlideModel->{'button_' . $i . '_target'}) target="_blank" @endif>{{ $approachSlideModel->{'button_' . $i . '_text'} }}</a>
|
||||
@endif
|
||||
@endfor
|
||||
|
|
@ -141,6 +142,7 @@
|
|||
</div>
|
||||
<div class="col-12 position-relative my-4">
|
||||
@php
|
||||
//FIXME: replace data by commitment models
|
||||
$arrayCommitments = [
|
||||
[
|
||||
'picto' => Vite::asset('resources/assets/images/home/commitments/picto-volaille-francaise-blanc.svg'),
|
||||
|
|
@ -188,8 +190,9 @@
|
|||
<img class="card-img-top" src="{{ $commitment['picto'] }}" title="{{ $commitment['picto_title'] }}"
|
||||
alt="{{ $commitment['picto_alt'] }}">
|
||||
<div class="card-body">
|
||||
<h6 class="fs-5">{{ str($commitment['title'])->upper() }}</h6>
|
||||
<p class="h3 fs-5">{{ str($commitment['title'])->upper() }}</p>
|
||||
<p class="m-0">{{ str($commitment['text'])->ucFirst() }}</p>
|
||||
<a class="stretched-link" href="#FIXME:commitment url {{ $commitment['title'] }}"></a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
|
@ -208,7 +211,7 @@
|
|||
</div>
|
||||
<div class="col-12 pb-5 text-center">
|
||||
<a class="btn btn-secondary" href="#FIXME:page engagements"
|
||||
title="{{ __('Accéder à la page engagements') }}">{{ str(__('découvrir nos engagements'))->ucFirst() }}</a>
|
||||
title="{{ __('Découvrir nos engagements') }}">{{ str(__('découvrir nos engagements'))->ucFirst() }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue