From 21284540935a7f313a25998fca67a27bd4996cc4 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 27 May 2019 20:50:52 +0200 Subject: [PATCH] WIP #2731 @9.5 --- app/Providers/AppServiceProvider.php | 16 +- composer.json | 3 +- composer.lock | 88 +++++++- resources/styles/app.styl | 1 + resources/styles/common/columns.styl | 24 ++ resources/styles/common/global.styl | 18 +- resources/styles/common/links.styl | 25 ++- resources/styles/common/setup.styl | 3 +- resources/styles/common/spacing.styl | 6 +- resources/styles/components/buttons.styl | 2 +- resources/styles/components/grids.styl | 82 +++++-- resources/styles/components/solutions.styl | 4 +- resources/styles/components/text-block.styl | 11 + resources/views/components/button.blade.php | 3 - resources/views/components/column.blade.php | 4 + resources/views/components/columns.blade.php | 30 +-- .../views/components/flexible-image.blade.php | 21 ++ .../views/components/link-button.blade.php | 3 + .../views/components/text-block.blade.php | 6 +- resources/views/pages/home.blade.php | 208 ++++++++---------- 20 files changed, 363 insertions(+), 195 deletions(-) create mode 100644 resources/styles/common/columns.styl create mode 100644 resources/styles/components/text-block.styl delete mode 100644 resources/views/components/button.blade.php create mode 100644 resources/views/components/column.blade.php create mode 100644 resources/views/components/flexible-image.blade.php create mode 100644 resources/views/components/link-button.blade.php diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php index fba2c6c..88faa47 100644 --- a/app/Providers/AppServiceProvider.php +++ b/app/Providers/AppServiceProvider.php @@ -4,6 +4,7 @@ namespace App\Providers; use Illuminate\Support\ServiceProvider; use Illuminate\Support\Facades\Blade; +use Spatie\BladeX\Facades\BladeX; class AppServiceProvider extends ServiceProvider { @@ -24,11 +25,14 @@ 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'); // + BladeX::component('components.full-width'); // ... + BladeX::component('components.content'); // ... + BladeX::component('components.columns'); // ... + BladeX::component('components.column'); // ... + BladeX::component('components.text-block'); // ... + BladeX::component('components.link-button'); // ... } } diff --git a/composer.json b/composer.json index f28b4f2..6e0203b 100644 --- a/composer.json +++ b/composer.json @@ -14,7 +14,8 @@ ], "license": "proprietary", "require": { - "cubist/cms-back": "dev-master" + "cubist/cms-back": "dev-master", + "spatie/laravel-blade-x": "^2.2" }, "config": { "optimize-autoloader": true, diff --git a/composer.lock b/composer.lock index 64ba83d..52b94f9 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "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", @@ -4099,6 +4099,92 @@ ], "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", diff --git a/resources/styles/app.styl b/resources/styles/app.styl index 4a843cc..f2129dd 100644 --- a/resources/styles/app.styl +++ b/resources/styles/app.styl @@ -8,6 +8,7 @@ // 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' diff --git a/resources/styles/common/columns.styl b/resources/styles/common/columns.styl new file mode 100644 index 0000000..11ad380 --- /dev/null +++ b/resources/styles/common/columns.styl @@ -0,0 +1,24 @@ +// 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) + + diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl index dca707a..246ba10 100644 --- a/resources/styles/common/global.styl +++ b/resources/styles/common/global.styl @@ -18,14 +18,16 @@ $overlap-amount = 10vw .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 diff --git a/resources/styles/common/links.styl b/resources/styles/common/links.styl index ccc34b3..2fdd559 100644 --- a/resources/styles/common/links.styl +++ b/resources/styles/common/links.styl @@ -4,12 +4,13 @@ a @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 @@ -28,15 +29,15 @@ a 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 diff --git a/resources/styles/common/setup.styl b/resources/styles/common/setup.styl index d7e96bb..99d1bce 100644 --- a/resources/styles/common/setup.styl +++ b/resources/styles/common/setup.styl @@ -9,9 +9,10 @@ $content-max-width = $base-width * 0.9 // Allows 5% either side // 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 diff --git a/resources/styles/common/spacing.styl b/resources/styles/common/spacing.styl index c0f8bc5..2f3b6d0 100644 --- a/resources/styles/common/spacing.styl +++ b/resources/styles/common/spacing.styl @@ -1,4 +1,4 @@ -// 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 = { @@ -21,7 +21,7 @@ $sides = { // 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 @@ -32,7 +32,7 @@ for counter, vwAmount in $vw-spacing constrain(margin, vwAmount) // Negative margins (-m-1v, -m-2v etc) - .-m{counter}v + .-m-{counter}v constrain(margin, - vwAmount) diff --git a/resources/styles/components/buttons.styl b/resources/styles/components/buttons.styl index 8556931..26ac84f 100644 --- a/resources/styles/components/buttons.styl +++ b/resources/styles/components/buttons.styl @@ -1,7 +1,7 @@ // 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 diff --git a/resources/styles/components/grids.styl b/resources/styles/components/grids.styl index 2d6d034..a3c5e4c 100644 --- a/resources/styles/components/grids.styl +++ b/resources/styles/components/grids.styl @@ -1,32 +1,66 @@ -.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) diff --git a/resources/styles/components/solutions.styl b/resources/styles/components/solutions.styl index cdade83..bd16b9c 100644 --- a/resources/styles/components/solutions.styl +++ b/resources/styles/components/solutions.styl @@ -24,14 +24,14 @@ 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) diff --git a/resources/styles/components/text-block.styl b/resources/styles/components/text-block.styl new file mode 100644 index 0000000..823da83 --- /dev/null +++ b/resources/styles/components/text-block.styl @@ -0,0 +1,11 @@ +.text-block + + +below($breakpoint-columns) + padding-left: 0 + padding-right: 0 + + &-body + @apply max-w-text + + +below($breakpoint-columns) + max-width: none diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php deleted file mode 100644 index 45cbe77..0000000 --- a/resources/views/components/button.blade.php +++ /dev/null @@ -1,3 +0,0 @@ - - {{ $slot }} - diff --git a/resources/views/components/column.blade.php b/resources/views/components/column.blade.php new file mode 100644 index 0000000..a9eeb47 --- /dev/null +++ b/resources/views/components/column.blade.php @@ -0,0 +1,4 @@ +{{-- Column Component --}} +
+ {{ $slot }} +
diff --git a/resources/views/components/columns.blade.php b/resources/views/components/columns.blade.php index 5b1eee4..b4f6ab3 100644 --- a/resources/views/components/columns.blade.php +++ b/resources/views/components/columns.blade.php @@ -1,19 +1,13 @@ -@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 - -
- - @for ($i = 1; $i <= $count; $i++) -
- {{-- Create numbered slots for each column with the name 'column_x' --}} - {{ ${"column_$i"} ?? '' }} -
- @endfor - +{{-- Columns Component --}} +{{-- + This is a simplified version thanks to CSS Grid. + Using the BladeX syntax, this is called using: + + Col 1 + Col 2 + +--}} + +
+ {{ $slot }}
diff --git a/resources/views/components/flexible-image.blade.php b/resources/views/components/flexible-image.blade.php new file mode 100644 index 0000000..1a16dc9 --- /dev/null +++ b/resources/views/components/flexible-image.blade.php @@ -0,0 +1,21 @@ +{{-- 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 + +
+
+
+@endif + + + diff --git a/resources/views/components/link-button.blade.php b/resources/views/components/link-button.blade.php new file mode 100644 index 0000000..b1ad034 --- /dev/null +++ b/resources/views/components/link-button.blade.php @@ -0,0 +1,3 @@ + + {{ $slot }} + diff --git a/resources/views/components/text-block.blade.php b/resources/views/components/text-block.blade.php index e692647..5d43db7 100644 --- a/resources/views/components/text-block.blade.php +++ b/resources/views/components/text-block.blade.php @@ -3,16 +3,16 @@ // Default classes $class = $class ?? ''; $padding = $padding ?? 'pl-2v'; - $title_class = $title_class ?? 'h1'; + $titleClass = $titleClass ?? 'h1'; @endphp
@isset($title) -

{{ $title }}

+

{{ $title }}

@endisset -
+
{{ $slot }}
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php index 06f5aaf..875786b 100644 --- a/resources/views/pages/home.blade.php +++ b/resources/views/pages/home.blade.php @@ -1,93 +1,76 @@ -@extends('layouts.app') +@extends('layouts/app') @section('content') {{-- Slider --}} - @fullwidth(['class' => 'bg-navy text-white antialiased', 'padding' => 'pt-1v']) - @content + + + + - @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 +

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.

- @button(['url' => '#']) - Découvrir - @endbutton + Découvrir

+ + - @endtextblock - - @endslot + + + - @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 + + + {{-- Intro text --}} - @fullwidth(['padding' => 'pt-5v pb-4v']) - @content - @cols - @slot('column_1') + + + + - @endslot + - @slot('column_2') - @textblock(['class' => 'pt-2v', 'title_class' => 'h1 overlap-left']) - @slot('title') + + + Expert de la mesure depuis plus de 30 ans - @endslot +

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.

Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.

-

En savoir plus

- @endtextblock - @endslot - @endcols - @endcontent - @endfullwidth +

En savoir plus

+ + + + + + {{-- Our products --}} - @fullwidth(['class' => 'bg-grey-100']) - @content + + - @textblock(['class' => 'mb-2v']) - @slot('title') - Nos Produits - @endslot - @endtextblock + - @cols - @slot('column_1') + +

Capteurs

-
+
@for ($i = 1; $i <= 6; $i++)
@@ -100,13 +83,13 @@ @endfor
- @endslot + - @slot('column_2') +

Systèmes de mesure

-
+
@for ($i = 1; $i <= 6; $i++)
@@ -119,22 +102,18 @@ @endfor
- @endslot + - @endcols + - @endcontent - @endfullwidth + + {{-- Solutions / Applications --}} - @fullwidth(['class' => 'bg-navy text-white antialiased']) - @content - @textblock(['title_class' => 'h1 text-inherit']) - @slot('title') - Solutions / Applications - @endslot - @endtextblock + + + @php // TEMPORARY DATA @@ -148,7 +127,7 @@ ]; @endphp -
+
@foreach ($solutions as $i => $solution) @php($i++) @@ -158,54 +137,59 @@ @endforeach
- @endcontent - @endfullwidth + + {{-- Services & Support --}} - @fullwidth(['class' => 'bg-grey-100']) - @content - @cols - @slot('column_1') - - @endslot - - @slot('column_2') - @textblock(['class' => 'pt-2v', 'title_class' => 'h1 overlap-left']) - @slot('title') - Services & Support - @endslot - -

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.

- -

Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.

- -

En savoir plus

- @endtextblock - @endslot - @endcols - @endcontent - @endfullwidth + + + + + + + + + +

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.

+ +

Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.

+ +

En savoir plus

+ + + + + {{-- News --}} - @fullwidth - @content - @textblock - @slot('title') - Actualités - @endslot - @endtextblock - @endcontent - @endfullwidth + + + + +
+ @for ($i = 1; $i <= 4; $i++) +
+ +

News 0{{ $i }}

+

PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz,...

+

Lire la suite

+
+ @endfor +
+ + {{-- Our Clients --}} - @fullwidth(['class' => 'bg-grey-100']) - @content - @textblock - @slot('title') - Nos clients - @endslot - @endtextblock - @endcontent - @endfullwidth + + + + +
+ @for ($i = 1; $i <= 8; $i++) +
+ @endfor +
+ + @endsection -- 2.39.5