{
parent::setFields();
+ $this->addField(['name' => 'email',
+ 'type' => 'Email',
+ 'label' => __('E-mail'),
+ 'tab' => 'Informations de contact']);
- $this->addField(['name'=>'email',
- 'type'=>'Email',
- 'label'=>'E-mail',
- 'tab'=>'Informations de contact']);
+ $this->addField(['name' => 'phone',
+ 'type' => 'Text',
+ 'label' => __('Téléphone'),
+ 'translatable' => false,
+ 'tab' => 'Informations de contact']);
- $this->addField(['name'=>'phone',
- 'type'=>'Text',
- 'label'=>'Téléphone',
- 'tab'=>'Informations de contact']);
+ $this->addField(['name' => 'address',
+ 'type' => 'Textarea',
+ 'label' => __('Adresse'),
+ 'translatable' => false,
+ 'tab' => 'Informations de contact']);
}
}
BladeX::component('components.grid'); // <grid cols="3" gap="md"> ... </grid>
BladeX::component('components.text-block'); // <text-block> ... </text-block>
BladeX::component('components.link-button'); // <link-button> ... </link-button>
- }catch (\Exception $e){
+ BladeX::component('components.phone-link'); // <phone-link number="012345"> ... </phone-link>
+ BladeX::component('components.map-link'); // <map-link address="..."> ... </map-link>
+ } catch (\Exception $e) {
}
}
parent::init();
$this->addField(['name' => 'title',
'label' => 'Titre',
- 'type' => 'Text']);
+ 'type' => 'Textarea',
+ 'attributes' => [
+ 'rows' => '2', // Sometimes we need to put line breaks in titles, hence the textarea
+ ]]);
$this->addField(['name' => 'text',
'label' => 'Texte',
- 'type' => 'Textarea']);
+ 'type' => 'Textarea',
+ 'attributes' => [
+ 'rows' => 10,
+ ]]);
$this->addField(['name' => 'image',
'label' => 'Image',
$this->addField(['name' => 'text',
'label' => 'Texte',
- 'type' => 'Textarea']);
+ 'type' => 'Textarea',
+ 'attributes' => [
+ 'rows' => '6',
+ ]]);
$this->addField(['name' => 'image',
'label' => 'Image',
+++ /dev/null
-<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.086" viewBox="0 0 33.5 29.086">
- <g id="Groupe_47" data-name="Groupe 47" transform="translate(-4417.889 997.75)">
- <g id="Groupe_45" data-name="Groupe 45" transform="translate(4435.19 -984.862)">
- <circle id="Ellipse_13" data-name="Ellipse 13" cx="3.022" cy="3.022" r="3.022" transform="translate(4.702 4.702)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
- <path id="Tracé_33" data-name="Tracé 33" d="M4460.729-960.9a7.681,7.681,0,0,1-4.365,1.344,7.725,7.725,0,0,1-7.725-7.724,7.725,7.725,0,0,1,7.725-7.724,7.724,7.724,0,0,1,7.724,7.724v.671a2.351,2.351,0,0,1-2.352,2.351,2.351,2.351,0,0,1-2.351-2.351v-.671" transform="translate(-4448.639 975)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
- </g>
- <g id="Groupe_46" data-name="Groupe 46" transform="translate(4418.639 -997)">
- <path id="Tracé_34" data-name="Tracé 34" d="M4430.777-978.241h-10.482a1.655,1.655,0,0,1-1.656-1.655v-14.9a2.213,2.213,0,0,1,2.207-2.207h24.276a2.213,2.213,0,0,1,2.207,2.207v6.069" transform="translate(-4418.639 997)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
- <path id="Tracé_35" data-name="Tracé 35" d="M4447.239-996l-13.6,11.034L4419.515-996" transform="translate(-4419.032 996.552)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1.5"/>
- </g>
- </g>
-</svg>
+++ /dev/null
-<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.109" viewBox="0 0 33.5 29.109">
- <g id="Groupe_48" data-name="Groupe 48" transform="translate(-4644.654 1067.424)">
- <path id="Tracé_36" data-name="Tracé 36" d="M4697.908-1041.295a2.3,2.3,0,0,1-2.207,2.207l-9.931.024a2.319,2.319,0,0,1-2.207-2.231v-23.172a2.3,2.3,0,0,1,2.207-2.207h9.931a2.276,2.276,0,0,1,2.207,2.183Z" transform="translate(-29.355)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
- <line id="Ligne_92" data-name="Ligne 92" x2="14.345" transform="translate(4654.208 -1062.26)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
- <line id="Ligne_93" data-name="Ligne 93" x2="14.345" transform="translate(4654.208 -1043.502)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
- <line id="Ligne_94" data-name="Ligne 94" y2="16.696" transform="translate(4649.794 -1059.358)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
- <line id="Ligne_95" data-name="Ligne 95" y2="13.913" transform="translate(4645.405 -1057.966)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
- <line id="Ligne_96" data-name="Ligne 96" y2="16.696" transform="translate(4672.967 -1062.14)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
- <line id="Ligne_97" data-name="Ligne 97" y2="13.913" transform="translate(4677.405 -1060.749)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
- </g>
-</svg>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="../../css/app.css">
- <link href="https://fonts.googleapis.com/css?family=Barlow:600|Muli&display=swap" rel="stylesheet">
- <title>pmi</title>
-</head>
-<body>
-<div id="contact-module">
- <div class="module flex items-center justify-between">
- <img class="icon-size" src="img/icon-phone.svg" alt="">
- <p class="text-white"><a class="text-white" href="tel:+330146919332">01 46 91 93 32</a></p>
- </div>
-
- <div class="wrapper-module flex flex-col">
- <div class="module-mail flex items-center justify-between">
- <img class="icon-size" src="img/icon-mail.svg" alt="">
- <p class="text-white"><a class="text-white" href="mailto:contact@pm-instrumentation.com">contact@pm-instrumentation.com</a></p>
- </div>
- <div class="module-mail module-reveal flex flex-col items-center justify-center">
- <p class="text-white">Utilisez notre <a class="text-white underline" href="">formulaire de contact</a></p>
- </div>
- </div>
-</div>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-$h3 = 24px
-$barlow = 'Barlow', sans-serif
-$muli = 'Muli', sans-serif
-$dark = #6B7287
-$lightblue = #0EAADA
-*
- padding: 0
- box-sizing: border-box
- margin: 0
- font-family: $muli
-
-#contact-module
- height 150px
- position fixed
- right 0
- max-width 320px
- width 320px
- top: 215px
- .module
- max-width: 175px
- padding: 0 12px
- height: 48px
- background: $lightblue
- transform:translateX(calc(100% - -97px))
- transition: 500ms all ease
- cursor: pointer
- &:hover
- transform: translateX(85%)
- .icon-size
- width: 26px;
- height: 22px;
- .wrapper-module
- height: 96px
- margin-top: 5px
- transition: 500ms all ease
- transform: translateX(calc(100% - 48px))
- &:hover
- transform: translateX(0px)
- .module-reveal
- transform: translateX(0px)
- .module-mail
- background : $lightblue
- height: 48px
- width: 100%
- padding: 0 12px
- .module-reveal
- transform: translateX(48px)
- transition: 300ms all ease
- position relative
- &::after
- content: ''
- display block
- height 1px
- width 90%
- background #079ECC
- position absolute
- top: 0
\ No newline at end of file
--- /dev/null
+$contact-tab-width = 48px // Width of visible tab when closed
+
+.contact-shortcut
+ @apply fixed right-0 z-30 text-white
+ top: 215px
+
+ a
+ @apply text-inherit
+
+ &-tab
+ transform: s('translateX(calc(100% - %s))', $contact-tab-width)
+ transition: transform 0.5s ease
+ &:hover
+ transform: none
+ .contact-shortcut-detail
+ transform: none
+ transition: none // So it snaps out on hover but animates on mouseout
+
+ &-icon
+ @apply mr-3
+ height: 22px
+ width: auto
+
+ &-detail
+ @apply p-3
+ border-top: 1px solid #079ECC
+ transform: translateX($contact-tab-width)
+ transition: transform 0.3s ease 0.3s // Delay so it slides out of view at the end of main animation
+ a
+ @apply underline
--- /dev/null
+{{-- Map Link --}}
+{{-- Open address in Google Maps --}}
+
+@if (!empty($address))
+
+ <a class="{{ $class ?? '' }}" href="https://maps.google.fr/?q={{ urlencode(str_replace("\n", " ", $address)) }}" target="_blank" rel="noopener">
+ {{ $slot }}
+ </a>
+
+@endif
--- /dev/null
+{{-- Telephone Link --}}
+{{-- Formats and link a telephone number --}}
+
+@if (!empty($number))
+
+ @php
+ $number = preg_replace('/\D/', '', $number); // Strip everything except digits
+
+ // When a country code is present, add this to the start of the link and trim leading zero
+ if (isset($countryCode)) {
+ $number = "+{$countryCode}" . ltrim($number, 0);
+ }
+ @endphp
+
+
+ <a class="{{ $class ?? '' }}" href="tel:{{ $number }}">
+ {{ $slot }}
+ </a>
+
+@endif
@yield('content')
</main>
+ @include('partials.contact-shortcut')
+
@include('partials.footer')
<div class="body-overlay" @click="closeCart"></div>
</column>
<column>
- <text-block class="pt-2v" title_class="h1 overlap-left">
- <slot name="title">
- Expert de la mesure
- depuis plus de 30 ans
- </slot>
+ <text-block class="pt-2v" title_class="h1 overlap-left" :title="$page->intro->title">
+ {{-- Todo: make a better function for converting plain text into paragraphs and breaks --}}
+ <p>{!! nl2br($page->intro->text) !!}</p>
- <p>PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de capteurs et systèmes d’excellente qualité provenant principalement des Etats-Unis.</p>
-
- <p>Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.</p>
-
- <p><a href="#">En savoir plus</a></p>
+ {{-- Todo: make a component for handling CMS links when passing an object like $page->intro->button --}}
+ <p><a href="#">{{ $page->intro->button->label }}</a></p>
</text-block>
</column>
</column>
<column>
- <text-block class="pt-2v" title_class="h1 overlap-left capitalize" :title="$page->title ?? 'Lorem ipsum'">
+ <text-block class="pt-2v" title_class="h1 overlap-left capitalize" :title="$page->intro->title ?? ''">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam aspernatur corporis dicta dolore, earum est et eum eveniet, harum minima non, pariatur perspiciatis possimus ratione repudiandae veniam voluptas. Aspernatur eius esse laudantium nostrum nulla?</p>
+ <p>{!! nl2br($page->intro->text) !!}</p>
- <p>Sit amet, consectetur adipisicing elit. Aut cum dolores ratione vel. Alias exercitationem obcaecati quae! Accusantium alias, aspernatur atque autem beatae commodi delectus dolores esse, exercitationem facere illo itaque iusto libero magni natus nemo obcaecati odit officia quia quibusdam reiciendis soluta suscipit unde ut veritatis, voluptate voluptatibus.</p>
-
- <p><a href="#">En savoir plus</a></p>
+ <p><a href="#">{{ $page->intro->button->label }}</a></p>
</text-block>
</column>
--- /dev/null
+<div class="contact-shortcut flex flex-col">
+
+ <phone-link :number="$global->phone" class="contact-shortcut-tab mb-px inline-flex self-end bg-blue p-3 inline-block">
+ <img class="contact-shortcut-icon" src="{{ asset('images/icon-phone.svg') }}" alt="{{ __('Téléphone') }}">
+ {{ $global->phone }}
+ </phone-link>
+
+
+ <div class="contact-shortcut-tab">
+ <a href="mailto:{{ $global->email }}" class="bg-blue p-3 bg-blue flex">
+ <img class="contact-shortcut-icon" src="{{ asset('images/icon-email.svg') }}" alt="{{ __('E-mail') }}">
+ {{ $global->email }}
+ </a>
+
+ <div class="contact-shortcut-detail bg-blue nowrap">
+ {!! sprintf(__('Utilisez notre <a href="%s">formulaire de contact</a>'), '/contact') !!}
+ </div>
+ </div>
+</div>
<div class="footer-col">
<h3 class="footer-col-heading">Nous contacter</h3>
- <a class="footer-contact-block" href="#">
+ <map-link class="footer-contact-block" :address="$global->address">
@svg('icon-address', 'footer-contact-icon')
<div class="footer-contact-text">
<div class="footer-contact-title">{{ __('Address') }}</div>
-
- 59, rue Émile Deschanel<br>
- 92400 - COURBEVOIE - France
+ {!! nl2br($global->address) !!}
</div>
- </a>
+ </map-link>
- <a class="footer-contact-block" href="mailto:{{$global->email}}">
+ <a class="footer-contact-block" href="mailto:{{ $global->email }}">
@svg('icon-email', 'footer-contact-icon')
<div class="footer-contact-text">
<div class="footer-contact-title">{{ __('Email') }}</div>
-
- {{$global->email}}
+ {{ $global->email }}
</div>
</a>
- <a class="footer-contact-block" href="#">
+ <phone-link class="footer-contact-block" :number="$global->phone" country-code="33">
@svg('icon-phone', 'footer-contact-icon')
<div class="footer-contact-text">
<div class="footer-contact-title">{{ __('Telephone') }}</div>
-
- 01 46 91 93 32
+ {{ $global->phone }}
</div>
- </a>
+ </phone-link>
</div>
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
+gsap@^2.1.3:
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/gsap/-/gsap-2.1.3.tgz#c63ee3a50f0b7dc3b46ed0845bb0f09049feb944"
+ integrity sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ==
+
handle-thing@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
-tailwindcss@^1.0.1:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.3.tgz#12845ec6c9542e97f07ea2bd8af4ba47e8a888d1"
- integrity sha512-myjuB0hqqLiXQCea0hEeZfrQVxzmkhtgi7HsuwJgXaVPgBp+7r/wywOvkDTUS8sQ1LraF43OLatip0yhfo/FtA==
+tailwindcss@^1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.4.tgz#98f186c8142bfb292bcbfcb53b84df369f11ef91"
+ integrity sha512-+1NNPW+U83k6DV/uUOnsfmX86Cfb8N87fiuN0cX0mEi2sZUpglLzZqlXtP8FD9Hlne5H1UhlS8tajz+F9SSxjA==
dependencies:
autoprefixer "^9.4.5"
bytes "^3.0.0"
projects / pmi.git / commitdiff
