use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
+use Spatie\BladeX\Facades\BladeX;
class AppServiceProvider extends ServiceProvider
{
*/
public function boot()
{
- // Blade Component Aliases
- Blade::component('components.full-width', 'fullwidth'); // @fullwidth / @endfullwidth
- Blade::component('components.content', 'content'); // @content / @endcontent
- Blade::component('components.columns', 'cols'); // @cols / @endcols
- Blade::component('components.text-block', 'textblock'); // @textblock / @endtextblock
- Blade::component('components.button', 'button'); // @button / @endbutton
+ // BladeX Component Aliases
+ // Ref: https://docs.spatie.be/laravel-blade-x/v2/introduction
+ BladeX::component('components.flexible-image'); // <flexible-image />
+ BladeX::component('components.full-width'); // <full-width> ... </full-width>
+ BladeX::component('components.content'); // <content> ... </content>
+ BladeX::component('components.columns'); // <columns> ... </columns>
+ BladeX::component('components.column'); // <column> ... </column>
+ BladeX::component('components.text-block'); // <text-block> ... </text-block>
+ BladeX::component('components.link-button'); // <link-button> ... </link-button>
}
}
],
"license": "proprietary",
"require": {
- "cubist/cms-back": "dev-master"
+ "cubist/cms-back": "dev-master",
+ "spatie/laravel-blade-x": "^2.2"
},
"config": {
"optimize-autoloader": true,
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
- "content-hash": "baa7e538ae705a74b0316768ec48ab1e",
+ "content-hash": "d30d88039eb3603444dae6a76486df8e",
"packages": [
{
"name": "almasaeed2010/adminlte",
],
"time": "2019-04-25T11:01:00+00:00"
},
+ {
+ "name": "spatie/laravel-blade-x",
+ "version": "2.2.0",
+ "source": {
+ "type": "git",
+ "url": "https://github.com/spatie/laravel-blade-x.git",
+ "reference": "db4f3dfd1f5f3d05ca3f4a688cdd708129a652f4"
+ },
+ "dist": {
+ "type": "zip",
+ "url": "https://api.github.com/repos/spatie/laravel-blade-x/zipball/db4f3dfd1f5f3d05ca3f4a688cdd708129a652f4",
+ "reference": "db4f3dfd1f5f3d05ca3f4a688cdd708129a652f4",
+ "shasum": ""
+ },
+ "require": {
+ "illuminate/view": "~5.8.0",
+ "php": "^7.2"
+ },
+ "require-dev": {
+ "orchestra/testbench": "~3.8.0",
+ "phpunit/phpunit": "^8.0",
+ "spatie/phpunit-snapshot-assertions": "^2.1"
+ },
+ "type": "library",
+ "extra": {
+ "laravel": {
+ "providers": [
+ "Spatie\\BladeX\\BladeXServiceProvider"
+ ],
+ "aliases": {
+ "BladeX": "Spatie\\BladeX\\Facades\\BladeX"
+ }
+ }
+ },
+ "autoload": {
+ "psr-4": {
+ "Spatie\\BladeX\\": "src"
+ }
+ },
+ "notification-url": "https://packagist.org/downloads/",
+ "license": [
+ "MIT"
+ ],
+ "authors": [
+ {
+ "name": "Sebastian De Deyne",
+ "email": "sebastian@spatie.be",
+ "homepage": "https://spatie.be",
+ "role": "Developer"
+ },
+ {
+ "name": "Freek Van der Herten",
+ "email": "freek@spatie.be",
+ "homepage": "https://spatie.be",
+ "role": "Developer"
+ },
+ {
+ "name": "Alex Vanderbist",
+ "email": "alex@spatie.be",
+ "homepage": "https://spatie.be",
+ "role": "Developer"
+ },
+ {
+ "name": "Brent Roose",
+ "email": "brent@spatie.be",
+ "homepage": "https://spatie.be",
+ "role": "Developer"
+ },
+ {
+ "name": "Ruben Van Assche",
+ "email": "ruben@spatie.be",
+ "homepage": "https://spatie.be",
+ "role": "Developer"
+ }
+ ],
+ "description": "Supercharged Blade components",
+ "homepage": "https://github.com/spatie/laravel-blade-x",
+ "keywords": [
+ "blade",
+ "components",
+ "html",
+ "laravel-blade-x",
+ "spatie"
+ ],
+ "time": "2019-02-27T16:32:52+00:00"
+ },
{
"name": "spatie/laravel-googletagmanager",
"version": "2.6.0",
// Extracted components or custom styles that can't be done with utilities
@import 'common/spacing'
+@import 'common/columns'
@import 'common/global'
@import 'common/headings'
@import 'common/links'
--- /dev/null
+// Layout Columns (see columns.blade.php)
+
+// Using CSS Grid make a set of equal width columns
+// The number of columns may vary and we can also use
+// other classes set things like the grid gap
+.column-wrapper
+ display: grid
+ grid-auto-columns: 1fr
+ grid-auto-flow: column
+
+ // Although we could use CSS Grid's minmax functionality to make
+ // grids wrap, it's better to set a specific breakpoint because
+ // then we can use the same breakpoint for other things like
+ // disabling overlaps, reducing text-block padding etc.
+ +below($breakpoint-columns)
+ grid-template-columns: 1fr
+ grid-auto-columns: unset
+ grid-auto-flow: unset
+
+ // When columns are stacked, add margins between them
+ .column
+ constrain(margin-bottom, $vertical-gutter)
+
+
.overlap
&-left
- // Todo: only apply this above the columns breakpoint
- //+above($breakpoint-columns)
-
- position: relative
- constrain(left, - $overlap-amount)
-
- width: s('calc(100% + %s)', $overlap-amount)
- max-width: 672px
+ +above($breakpoint-columns)
+ position: relative
+ constrain(left, - $overlap-amount)
+ width: s('calc(100% + %s)', $overlap-amount)
+ max-width: 672px
+above($base-width)
width: s('calc(100% + %s)', $base-width * 0.1)
+
+ &-bottom
+ +above($breakpoint-columns)
+ constrain(margin-bottom, -5vw)
+ z-index: 10
@apply text-blue
transition: color 0.3s
- &.animated-underline
+ // Apply these styles only to links without any classes (default links)
+ // OR to those with the special class names in case we need to override it
+ &:not([class]), &.animated-underline, &.partial-underline
+ font-family: theme('fontFamily.display')
position: relative
padding-bottom: 2px
-
-
&:before
content: ''
display: block
transform: scaleX(1)
- // Partial underline hover effect
- &.partial-underline
- overflow: hidden
+ // Partial underline hover effect
+ &.partial-underline
+ overflow: hidden
- &:before
- constrain(width, 2.5vw)
+ &:before
+ constrain(width, 2.5vw)
- &:hover > *
- color: currentColor
+ &:hover > *
+ color: currentColor
- > *
- transition: color 0.2s
+ > *
+ transition: color 0.2s
// Gutters (assumed to always be a vw, vh or % unit)
$horizontal-gutter = 5vw
-$vertical-gutter = 2.5vw
+$vertical-gutter = 5vw
// Breakpoints in Rupture (https://github.com/jescalan/rupture)
+$breakpoint-columns = 768px
rupture.scale = 0 400px 768px 1024px
rupture.scale-names = 'small' 'medium' 'large'
rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
-// Build utility classes for padding/margin based on vw units
+// Generate utility classes for padding/margin based on vw units
// This will generate classes like pt-1v, pt-2v, pr-1v etc.
$vw-spacing = {
// Generate classes
for counter, vwAmount in $vw-spacing
- // First, generate classes for all sides...
+ // First, generate classes for all sides + grid gaps...
// Padding (p-1v, p-2v etc)
.p-{counter}v
constrain(margin, vwAmount)
// Negative margins (-m-1v, -m-2v etc)
- .-m{counter}v
+ .-m-{counter}v
constrain(margin, - vwAmount)
// Buttons
.btn
- @apply bg-blue text-white px-10 py-4 relative inline-block overflow-hidden
+ @apply bg-blue text-white font-display px-10 py-4 relative inline-block overflow-hidden
&-text
@apply z-10 relative
-.grid
- @supports (display: grid) // Modern browsers get the native grid
- display: grid
- constrain(grid-gap, 1.25vw)
+// Generate utility classes for grids
+// Grid gaps are on 0.25vw jumps for greater control
+$vw-spacing = {
+ '1': 0.25vw,
+ '2': 0.5vw,
+ '3': 0.75vw,
+ '4': 1vw,
+ '5': 1.25vw,
+ '6': 1.5vw,
+ '7': 1.75vw,
+ '8': 2vw,
+ '9': 2.25vw,
+ '10': 2.25vw,
+}
- &-cols-2
+// Generate classes
+for counter, vwAmount in $vw-spacing
- // Todo: consider using Modernizr so we can clean this up and only apply the .no-grid for IE11 and friends
- // For IE11 and older browsers, use lost grid...
- > *
- lost-column: 1/2 2 1.25vw
- margin-bottom: 1.25vw
+ .grid-gap-{counter}v
+ constrain(grid-gap, vwAmount)
- @supports (display: grid)
- grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
+//----------------------------------
- //Reset the lost-grid so it doesn't interfere
- > *
- lost-column: none
- margin: 0 !important
- flex-basis: auto
- max-width: none
- //// Internal block alignment - make sure text label sits at bottom
- //display: flex
- //flex-direction: column
- //justify-content: space-between
+.grid
+ display: grid
+
+ // ToDo: add Tailwind @responsive variations so grids can be changed via generic class names
+ &-cols-2
+ grid-template-columns: repeat(2, 1fr)
&-cols-3
- @supports (display: grid)
- grid-template-columns: repeat(3, 1fr)
+ grid-template-columns: repeat(3, 1fr)
+
+ &-cols-4
+ grid-template-columns: repeat(4, 1fr)
+
+
+ //&-cols-2
+ //
+ // // Todo: consider using Modernizr so we can clean this up and only apply the .no-grid for IE11 and friends
+ // // For IE11 and older browsers, use lost grid...
+ // > *
+ // lost-column: 1/2 2 1.25vw
+ // margin-bottom: 1.25vw
+ //
+ // @supports (display: grid)
+ // grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
+ //
+ // //Reset the lost-grid so it doesn't interfere
+ // > *
+ // lost-column: none
+ // margin: 0 !important
+ // flex-basis: auto
+ // max-width: none
+ //
+ // //// Internal block alignment - make sure text label sits at bottom
+ // //display: flex
+ // //flex-direction: column
+ // //justify-content: space-between
+ //
+ //
+ //&-cols-3
+ // @supports (display: grid)
+ // grid-template-columns: repeat(3, 1fr)
content: ''
position: absolute
left: 0
- bottom: 0
+ bottom: -5px // Avoid small gaps at some resolutions when bottom: 0
width: 110% // A bit wider to get rid of small gaps at some resolutions
height: 50%
background-image: linear-gradient(to top, rgba(#000, 0.6), transparent)
&-text
- @apply absolute text-2xl text-white
+ @apply absolute text-2xl text-white font-display
constrain(left, 2.5vw)
constrain(bottom, 2.5vw)
--- /dev/null
+.text-block
+
+ +below($breakpoint-columns)
+ padding-left: 0
+ padding-right: 0
+
+ &-body
+ @apply max-w-text
+
+ +below($breakpoint-columns)
+ max-width: none
+++ /dev/null
-<a href="{{ $url ?? '#' }}" class="btn {{ $class ?? '' }}">
- <span class="btn-text">{{ $slot }}</span>
-</a>
--- /dev/null
+{{-- Column Component --}}
+<div class="column {{ $class ?? '' }}">
+ {{ $slot }}
+</div>
-@php
- $count = $count ?? 2;
- $column_class = 'w-1/' . $count; // Dynamic number of columns
-
- // PurgeCSS can't see the dynamically generated class names above
- // so we provide a quick whitelist in this comment for it to read:
- // w-1/2 w-1/3 w-1/4 w-1/5 w-1/6 w-1/12
-@endphp
-
-<div class="flex">
-
- @for ($i = 1; $i <= $count; $i++)
- <div class="{{ $column_class }} {{ ${"column_{$i}_class"} ?? '' }}" {{ ${"column_{$i}_attributes"} ?? '' }}>
- {{-- Create numbered slots for each column with the name 'column_x' --}}
- {{ ${"column_$i"} ?? '' }}
- </div>
- @endfor
-
+{{-- Columns Component --}}
+{{--
+ This is a simplified version thanks to CSS Grid.
+ Using the BladeX syntax, this is called using:
+ <columns class="grid-no-gap">
+ <column>Col 1</column>
+ <column>Col 2</column>
+ </columns>
+--}}
+
+<div class="column-wrapper {{ $class ?? '' }}">
+ {{ $slot }}
</div>
--- /dev/null
+{{-- Flexible Background Image Block --}}
+{{--
+ This component is used when we need an image that will fill a column's height
+ (cropped using background-size: cover) but then behave like a normal responsive
+ image when the columns are stacked.
+--}}
+
+@if ($src)
+
+ @php
+ $meta = getimagesize($src);
+ $ratio = $meta[1] / $meta[0] * 100 .'%'; // Height / Width
+ @endphp
+
+ <div class="bg-image h-full bg-cover bg-no-repeat" style="background-image: url({{ asset($src) }}); background-position: {{ $bg_position ?? 'center' }}">
+ <div class="bg-image-sizer" style="padding-bottom: {{ $ratio }}"></div>
+ </div>
+@endif
+
+
+
--- /dev/null
+<a href="{{ $href ?? '#' }}" class="btn {{ $class ?? '' }}">
+ <span class="btn-text">{{ $slot }}</span>
+</a>
// Default classes
$class = $class ?? '';
$padding = $padding ?? 'pl-2v';
- $title_class = $title_class ?? 'h1';
+ $titleClass = $titleClass ?? 'h1';
@endphp
<div class="text-block {{ $class }} {{ $padding }}">
@isset($title)
- <h2 class="{{ $title_class }}">{{ $title }}</h2>
+ <h2 class="{{ $titleClass }}">{{ $title }}</h2>
@endisset
- <div class="text-block-body max-w-text">
+ <div class="text-block-body">
{{ $slot }}
</div>
-@extends('layouts.app')
+@extends('layouts/app')
@section('content')
{{-- Slider --}}
- @fullwidth(['class' => 'bg-navy text-white antialiased', 'padding' => 'pt-1v'])
- @content
+ <full-width class="bg-navy text-white antialiased" padding="pt-1v">
+ <content>
+ <columns>
+ <column class="pt-2v pr-1v pb-2v">
- @cols
- @slot('column_1_class') pt-2v pr-1v pb-2v @endslot
- @slot('column_1')
-
- @textblock(['title_class' => 'h1 text-inherit'])
-
- @slot('title')
- Wheel Force Transducer
- @endslot
+ <text-block title="Wheel Force Transducer" title-class="h1 text-inherit">
<p>
Wheel Force Transducers (WFT) are used for measuring all wheel forces and moments. Field and laboratory test of passenger cars, light duty trucks, heavy duty trucks, vans, SUVs, class 8 trucks, heavy duty construction and farm equipment.
</p>
<p>
- @button(['url' => '#'])
- Découvrir
- @endbutton
+ <link-button href="#test123">Découvrir</link-button>
</p>
<div class="pb-2v"></div>
+ </text-block>
+ </column>
- @endtextblock
-
- @endslot
+ <column class="overlap-bottom">
+ <flexible-image src="storage/uploads/images/home-car.jpg" />
+ </column>
- @slot('column_2_class') -mb-2v z-10 bg-cover @endslot
- @slot('column_2_attributes')
- style="background-image:url({{ asset('storage/uploads/images/home-car.jpg') }})"
- @endslot
- @slot('column_2')
- {{-- No content --}}
- @endslot
-
- @endcols
- @endcontent
- @endfullwidth
+ </columns>
+ </content>
+ </full-width>
{{-- Intro text --}}
- @fullwidth(['padding' => 'pt-5v pb-4v'])
- @content
- @cols
- @slot('column_1')
+ <full-width padding="pt-5v pb-4v">
+ <content>
+ <columns>
+ <column>
<img src="{{ asset('storage/uploads/images/home-wing.jpg') }}" alt="">
- @endslot
+ </column>
- @slot('column_2')
- @textblock(['class' => 'pt-2v', 'title_class' => 'h1 overlap-left'])
- @slot('title')
+ <column>
+ <text-block class="pt-2v" title_class="h1 overlap-left">
+ <slot name="title">
Expert de la mesure
depuis plus de 30 ans
- @endslot
+ </slot>
<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 class="animated-underline" href="#">En savoir plus</a></p>
- @endtextblock
- @endslot
- @endcols
- @endcontent
- @endfullwidth
+ <p><a href="#">En savoir plus</a></p>
+ </text-block>
+
+ </column>
+ </columns>
+ </content>
+ </full-width>
{{-- Our products --}}
- @fullwidth(['class' => 'bg-grey-100'])
- @content
+ <full-width class="bg-grey-100">
+ <content>
- @textblock(['class' => 'mb-2v'])
- @slot('title')
- Nos Produits
- @endslot
- @endtextblock
+ <text-block class="mb-2v" title="Nos Produits" />
- @cols
- @slot('column_1')
+ <columns>
+ <column>
<h3 class="h2 simple pl-1v">Capteurs</h3>
- <div class="grid grid-cols-2 pr-1v border-r border-grey-300">
+ <div class="grid grid-cols-2 grid-gap-5v pr-1v border-r border-grey-300">
@for ($i = 1; $i <= 6; $i++)
<div class="bg-white px-1v py-6 flex">
<a class="animated-underline partial-underline flex flex-col justify-between w-full" href="#">
@endfor
</div>
- @endslot
+ </column>
- @slot('column_2')
+ <column>
<h3 class="h2 simple pl-2v">Systèmes de mesure</h3>
- <div class="grid grid-cols-2 pl-1v">
+ <div class="grid grid-cols-2 grid-gap-5v pl-1v">
@for ($i = 1; $i <= 6; $i++)
<div class="bg-white px-1v py-6 flex">
<a class="animated-underline partial-underline flex flex-col justify-between w-full" href="#">
@endfor
</div>
- @endslot
+ </column>
- @endcols
+ </columns>
- @endcontent
- @endfullwidth
+ </content>
+ </full-width>
{{-- Solutions / Applications --}}
- @fullwidth(['class' => 'bg-navy text-white antialiased'])
- @content
- @textblock(['title_class' => 'h1 text-inherit'])
- @slot('title')
- Solutions / Applications
- @endslot
- @endtextblock
+ <full-width class="bg-navy text-white antialiased">
+ <content>
+ <text-block title-class="h1 text-inherit" title="Solutions / Applications" />
@php
// TEMPORARY DATA
];
@endphp
- <div class="grid grid-cols-3">
+ <div class="grid grid-cols-3 grid-gap-10v">
@foreach ($solutions as $i => $solution)
@php($i++)
<a class="solutions-link">
@endforeach
</div>
- @endcontent
- @endfullwidth
+ </content>
+ </full-width>
{{-- Services & Support --}}
- @fullwidth(['class' => 'bg-grey-100'])
- @content
- @cols
- @slot('column_1')
- <img src="{{ asset('storage/uploads/images/home-services.jpg') }}" alt="">
- @endslot
-
- @slot('column_2')
- @textblock(['class' => 'pt-2v', 'title_class' => 'h1 overlap-left'])
- @slot('title')
- Services & Support
- @endslot
-
- <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 class="animated-underline" href="#">En savoir plus</a></p>
- @endtextblock
- @endslot
- @endcols
- @endcontent
- @endfullwidth
+ <full-width class="bg-grey-100">
+ <content>
+ <columns>
+ <column>
+ <img src="{{ asset('storage/uploads/images/home-services.jpg') }}" alt="">
+ </column>
+
+ <column>
+ <text-block class="pt-2v" title-class="h1 overlap-left" title="Services & Support">
+ <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>
+ </text-block>
+ </column>
+ </columns>
+ </content>
+ </full-width>
{{-- News --}}
- @fullwidth
- @content
- @textblock
- @slot('title')
- Actualités
- @endslot
- @endtextblock
- @endcontent
- @endfullwidth
+ <full-width>
+ <content>
+ <text-block title="Actualités" />
+
+ <div class="grid grid-cols-4 grid-gap-10v">
+ @for ($i = 1; $i <= 4; $i++)
+ <div>
+ <img class="mb-4" src="{{ asset('storage/uploads/images/news-1.jpg') }}" alt="">
+ <h4 class="font-display">News 0{{ $i }}</h4>
+ <p>PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz,...</p>
+ <p><a href="#">Lire la suite</a></p>
+ </div>
+ @endfor
+ </div>
+ </content>
+ </full-width>
{{-- Our Clients --}}
- @fullwidth(['class' => 'bg-grey-100'])
- @content
- @textblock
- @slot('title')
- Nos clients
- @endslot
- @endtextblock
- @endcontent
- @endfullwidth
+ <full-width class="bg-grey-100">
+ <content>
+ <text-block title="Nos clients" />
+
+ <div class="grid grid-cols-4 grid-gap-10v">
+ @for ($i = 1; $i <= 8; $i++)
+ <div class="bg-white hover:bg-grey-200 cursor-pointer" style="padding-bottom: 58%"></div>
+ @endfor
+ </div>
+ </content>
+ </full-width>
@endsection
projects / pmi.git / commitdiff