From 2d69c2935a534334e79560220839d2436ba3ee03 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Fri, 24 May 2019 19:37:19 +0200 Subject: [PATCH] WIP #2731 @9.25 --- app/Providers/AppServiceProvider.php | 4 + public/images/burger-menu.svg | 7 + public/images/cart.svg | 11 + resources/styles/common/debug.styl | 5 + resources/styles/common/global.styl | 5 +- resources/styles/common/links.styl | 62 ++--- resources/styles/components/buttons.styl | 36 ++- resources/styles/components/cart.styl | 19 ++ resources/styles/components/grids.styl | 8 +- resources/styles/components/header.styl | 14 ++ resources/styles/components/navigation.styl | 12 + resources/styles/components/solutions.styl | 49 ++++ resources/views/components/columns.blade.php | 19 ++ resources/views/components/content.blade.php | 4 + .../views/components/full-width.blade.php | 8 + .../views/components/text-block.blade.php | 19 ++ resources/views/pages/home.blade.php | 236 ++++++++++++------ resources/views/partials/cart.blade.php | 5 +- resources/views/partials/header.blade.php | 22 +- resources/views/partials/nav.blade.php | 14 +- 20 files changed, 433 insertions(+), 126 deletions(-) create mode 100644 public/images/burger-menu.svg create mode 100644 public/images/cart.svg create mode 100644 resources/styles/components/cart.styl create mode 100644 resources/styles/components/header.styl create mode 100644 resources/styles/components/navigation.styl create mode 100644 resources/styles/components/solutions.styl create mode 100644 resources/views/components/columns.blade.php create mode 100644 resources/views/components/content.blade.php create mode 100644 resources/views/components/full-width.blade.php create mode 100644 resources/views/components/text-block.blade.php diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php index fefcb80..fba2c6c 100644 --- a/app/Providers/AppServiceProvider.php +++ b/app/Providers/AppServiceProvider.php @@ -25,6 +25,10 @@ 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 } } diff --git a/public/images/burger-menu.svg b/public/images/burger-menu.svg new file mode 100644 index 0000000..3f73828 --- /dev/null +++ b/public/images/burger-menu.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/cart.svg b/public/images/cart.svg new file mode 100644 index 0000000..ae494fe --- /dev/null +++ b/public/images/cart.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/resources/styles/common/debug.styl b/resources/styles/common/debug.styl index e6b1dba..96657b5 100644 --- a/resources/styles/common/debug.styl +++ b/resources/styles/common/debug.styl @@ -1,5 +1,10 @@ // Debugging styles +// Quick helper to outline element and its children +.debug, .debug * + outline: 1px dotted red !important + + if ($debug.overlays) //:root diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl index 9835876..dca707a 100644 --- a/resources/styles/common/global.styl +++ b/resources/styles/common/global.styl @@ -1,5 +1,8 @@ // PMI Global Styles +body + min-width: 320px + p:not(:last-child) margin-bottom: 1.5em @@ -21,7 +24,7 @@ $overlap-amount = 10vw position: relative constrain(left, - $overlap-amount) - width: calc(100% + $overlap-amount) + width: s('calc(100% + %s)', $overlap-amount) max-width: 672px +above($base-width) diff --git a/resources/styles/common/links.styl b/resources/styles/common/links.styl index e1c54b7..ccc34b3 100644 --- a/resources/styles/common/links.styl +++ b/resources/styles/common/links.styl @@ -2,39 +2,41 @@ a @apply text-blue + transition: color 0.3s - // Don't apply if 'no-animation' class is set - &:not(.btn):not(.no-animation) + &.animated-underline position: relative padding-bottom: 2px - // Only apply to
content - main & + + + &:before + content: '' + display: block + position: absolute + bottom: 0 + left: 0 + width: 100% + height: 2px + background-color: currentColor + transform: scaleX(0) + transform-origin: left + transition: transform 0.2s ease-out + + &:hover + &:before + transform: scaleX(1) + + + // Partial underline hover effect + &.partial-underline + overflow: hidden &:before - content: '' - display: block - position: absolute - bottom: 0 - left: 0 - width: 100% - height: 2px - background-color: currentColor - transform: scaleX(0) - transform-origin: left - transition: transform 0.2s ease-out - - &:hover - &:before - transform: scaleX(1) - - - // Partial underline hover effect - &.partial-underline - overflow: hidden - - &:before - constrain(width, 2.5vw) - - &:hover > * - color: currentColor + constrain(width, 2.5vw) + + &:hover > * + color: currentColor + + > * + transition: color 0.2s diff --git a/resources/styles/components/buttons.styl b/resources/styles/components/buttons.styl index fb3c365..8556931 100644 --- a/resources/styles/components/buttons.styl +++ b/resources/styles/components/buttons.styl @@ -7,21 +7,39 @@ @apply z-10 relative &:hover:before - transform: scale(1.1) translateY(-50%) + transform: scaleX(1) opacity: 1 &:before content: '' position: absolute - top: 50% + top: 0 left: 0 + width: 100% + height: 100% z-index: 1 background-color: rgba(#fff, 0.2) - width: 100% - padding-bottom: 100% - border-radius: 50% - transform: scale(0) translateY(-50%) - transform-origin: top center - transition: all 0.2s ease-out - opacity: 0 + transform: scaleX(0) + transform-origin: left + transition: transform 0.2s ease-out + + // Circle hover effect + // &:hover:before + // transform: scale(1.1) translateY(-50%) + // opacity: 1 + // + // &:before + // content: '' + // position: absolute + // top: 50% + // left: 0 + // z-index: 1 + // background-color: rgba(#fff, 0.2) + // width: 100% + // padding-bottom: 100% + // border-radius: 50% + // transform: scale(0) translateY(-50%) + // transform-origin: top center + // transition: all 0.2s ease-out + // opacity: 0 diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl new file mode 100644 index 0000000..5032a1f --- /dev/null +++ b/resources/styles/components/cart.styl @@ -0,0 +1,19 @@ +.cart + + &-title + @apply mr-4 + + +below(1150px) + display: none + + &-icon + display: inline-block + width: 34px + height: 36px + background: url(/images/cart.svg) no-repeat center + background-size: contain + text-align: center + line-height: 40px + font-size: 14px + padding-left: 11px + padding-right: 4px diff --git a/resources/styles/components/grids.styl b/resources/styles/components/grids.styl index 12aa72b..2d6d034 100644 --- a/resources/styles/components/grids.styl +++ b/resources/styles/components/grids.styl @@ -1,9 +1,11 @@ .grid @supports (display: grid) // Modern browsers get the native grid display: grid + constrain(grid-gap, 1.25vw) &-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 @@ -11,7 +13,6 @@ @supports (display: grid) grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) - constrain(grid-gap, 1.25vw) //Reset the lost-grid so it doesn't interfere > * @@ -24,3 +25,8 @@ //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/header.styl b/resources/styles/components/header.styl new file mode 100644 index 0000000..d45611c --- /dev/null +++ b/resources/styles/components/header.styl @@ -0,0 +1,14 @@ +.site-header + @apply bg-navy text-white text-lg font-display font-medium antialiased + + +below(1000px) + .mobile-menu-icon + display: block + cursor: pointer + flex-shrink: 0 + + .logo + @apply mx-auto px-8 + + .nav + display: none diff --git a/resources/styles/components/navigation.styl b/resources/styles/components/navigation.styl new file mode 100644 index 0000000..454ee06 --- /dev/null +++ b/resources/styles/components/navigation.styl @@ -0,0 +1,12 @@ +.nav-primary + @apply flex mx-auto px-10 + + &-item + &:not(:last-child) + @apply mr-10 + + &-link + @apply text-inherit + + &:hover + color: theme('colors.blue') diff --git a/resources/styles/components/solutions.styl b/resources/styles/components/solutions.styl new file mode 100644 index 0000000..cdade83 --- /dev/null +++ b/resources/styles/components/solutions.styl @@ -0,0 +1,49 @@ +.solutions-link + @apply relative cursor-pointer + padding-bottom: 100% + overflow: hidden + + &:hover + .solutions-link-bg + transform: scale(1.1) + .solutions-link-text:after + transform: scaleX(2) + + &-bg, &-text:after + transition: all 0.3s ease-out + + &-bg + @apply absolute bg-cover bg-center + top: 0 + left: 0 + width: 100% + height: 100% + + // Vignette on bottom of image to help with text readability + &:before + content: '' + position: absolute + left: 0 + 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 + constrain(left, 2.5vw) + constrain(bottom, 2.5vw) + + +below(900px) + @apply text-xl + + &:after + content: '' + display: block + width: 24px // Using px instead of vw since it's better not scaled + height: 4px + background-color: theme('colors.blue') + margin-top: 0.5em + transform: scaleX(1) + transform-origin: left diff --git a/resources/views/components/columns.blade.php b/resources/views/components/columns.blade.php new file mode 100644 index 0000000..5b1eee4 --- /dev/null +++ b/resources/views/components/columns.blade.php @@ -0,0 +1,19 @@ +@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 + +
diff --git a/resources/views/components/content.blade.php b/resources/views/components/content.blade.php new file mode 100644 index 0000000..63dfad0 --- /dev/null +++ b/resources/views/components/content.blade.php @@ -0,0 +1,4 @@ +{{-- Content container - constrained width + centred --}} +
+ {{ $slot }} +
diff --git a/resources/views/components/full-width.blade.php b/resources/views/components/full-width.blade.php new file mode 100644 index 0000000..2b6a93f --- /dev/null +++ b/resources/views/components/full-width.blade.php @@ -0,0 +1,8 @@ +{{-- Full-width section --}} +@php + $padding = $padding ?? 'pt-3v pb-4v'; // Default padding +@endphp + +
+ {{ $slot }} +
diff --git a/resources/views/components/text-block.blade.php b/resources/views/components/text-block.blade.php new file mode 100644 index 0000000..e692647 --- /dev/null +++ b/resources/views/components/text-block.blade.php @@ -0,0 +1,19 @@ +{{-- Text Block Component --}} +@php + // Default classes + $class = $class ?? ''; + $padding = $padding ?? 'pl-2v'; + $title_class = $title_class ?? 'h1'; +@endphp + +
+ + @isset($title) +

{{ $title }}

+ @endisset + +
+ {{ $slot }} +
+ +
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php index 826bc50..06f5aaf 100644 --- a/resources/views/pages/home.blade.php +++ b/resources/views/pages/home.blade.php @@ -3,62 +3,96 @@ @section('content') {{-- Slider --}} -
-
-
-

Wheel Force Transducer

-

- 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 -

- -
+ @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 +

+ +
-
-
-
-
+ + @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 --}} -
-
- -
-
-

- Expert de la mesure - depuis plus de 30 ans -

+ @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.

+

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.

+

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

-

En savoir plus

+

En savoir plus

+ @endtextblock + @endslot + @endcols + @endcontent + @endfullwidth -
-
{{-- Our products --}} -
-
-

Nos produits

+ @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++)
- +
- +

Product title {{ $i }}

 @@ -66,52 +100,112 @@ @endfor
-
-
-

Systèmes de mesure

+ @endslot + + + @slot('column_2') +

Systèmes de mesure

-
+
@for ($i = 1; $i <= 6; $i++) -
-
- -
-

Product title {{ $i }}

+
+ +
+ +
+

Product title {{ $i }}

+
@endfor
-
-
+ @endslot -
-
+ @endcols + + @endcontent + @endfullwidth {{-- Solutions / Applications --}} -
-
-

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 + $solutions = [ + 'Énergie', + 'Aéronautique', + 'Ferroviaire', + 'Automobile', + 'Génie civil', + 'Industrie', + ]; + @endphp + +
+ @foreach ($solutions as $i => $solution) + @php($i++) + + + {{ $solution }} + + @endforeach +
+ + @endcontent + @endfullwidth {{-- Services & Support --}} -
-
-

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 {{-- News --}} -
-

Actualités

-
+ @fullwidth + @content + @textblock + @slot('title') + Actualités + @endslot + @endtextblock + @endcontent + @endfullwidth {{-- Our Clients --}} -
-
-

Nos clients

-
-
+ @fullwidth(['class' => 'bg-grey-100']) + @content + @textblock + @slot('title') + Nos clients + @endslot + @endtextblock + @endcontent + @endfullwidth @endsection diff --git a/resources/views/partials/cart.blade.php b/resources/views/partials/cart.blade.php index 2b9c1d8..89f4ae4 100644 --- a/resources/views/partials/cart.blade.php +++ b/resources/views/partials/cart.blade.php @@ -1,3 +1,2 @@ -
- (Cart) -
+My Selection +0 diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php index bddd459..3f88cbd 100644 --- a/resources/views/partials/header.blade.php +++ b/resources/views/partials/header.blade.php @@ -1,8 +1,22 @@ -
+
- @include('partials.logo') - @include('partials.nav') - @include('partials.cart') + + + + + +
+ @include('partials.nav') +
+ +
+ @include('partials.cart') +
+
diff --git a/resources/views/partials/nav.blade.php b/resources/views/partials/nav.blade.php index 87e04d3..6f1cfb4 100644 --- a/resources/views/partials/nav.blade.php +++ b/resources/views/partials/nav.blade.php @@ -1,8 +1,8 @@ -