From: Stephen Cameron <stephen@cubedesigners.com>
Date: Fri, 31 May 2019 18:01:08 +0000 (+0200)
Subject: WIP #2738 @9.25
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c9a52479210a047a4991d9c7805bbed82ba31170;p=pmi.git

WIP #2738 @9.25
---

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 6b78da7..b78ba9a 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -31,6 +31,7 @@ class AppServiceProvider extends ServiceProvider
         BladeX::component('components.content'); // <content> ... </content>
         BladeX::component('components.columns'); // <columns> ... </columns>
         BladeX::component('components.column'); // <column> ... </column>
+        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>
     }
diff --git a/composer.json b/composer.json
index f1ebf50..c2b6ce1 100644
--- a/composer.json
+++ b/composer.json
@@ -18,7 +18,10 @@
     ],
     "license": "proprietary",
     "require": {
-        "cubist/cms-back": "dev-master"
+        "cubist/cms-back": "dev-master",
+        "lavary/laravel-menu": "^1.7",
+        "nothingworks/blade-svg": "^0.3.1",
+        "spatie/laravel-blade-x": "^2.2"
     },
     "config": {
         "optimize-autoloader": true,
@@ -57,5 +60,9 @@
         "post-create-project-cmd": [
             "@php artisan key:generate --ansi"
         ]
+    },
+    "require-dev": {
+        "barryvdh/laravel-ide-helper": "^2.6",
+        "filp/whoops": "^2.3"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 32d79b4..962c369 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -17,10 +17,8 @@ window.Vue = require('vue');
  * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
  */
 
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+const files = require.context('./', true, /\.vue$/i)
+files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index c1f8ac3..4ba264b 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -7,12 +7,12 @@ window._ = require('lodash');
  * code may be modified to fit the specific needs of your application.
  */
 
-try {
-    window.Popper = require('popper.js').default;
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
+// try {
+//     window.Popper = require('popper.js').default;
+//     window.$ = window.jQuery = require('jquery');
+//
+//     require('bootstrap');
+// } catch (e) {}
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
diff --git a/resources/js/components/ExampleComponent.vue b/resources/js/components/ExampleComponent.vue
deleted file mode 100644
index 3fb9f9a..0000000
--- a/resources/js/components/ExampleComponent.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card">
-                    <div class="card-header">Example Component</div>
-
-                    <div class="card-body">
-                        I'm an example component.
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>
diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
new file mode 100644
index 0000000..d3ee9b9
--- /dev/null
+++ b/resources/js/components/Search.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="bg-white" v-show="visible">
+        <div class="header-search-box container py-3">
+            <form action="/search/" method="get" class="flex justify-between items-center">
+                <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
+                       type="text"
+                       name="search"
+                       autocomplete="off"
+                       placeholder="Search...">
+                <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
+
+                    <!-- Todo: work out the best way to inline SVG files in vue components (via props, slots etc?) -->
+                    <!--
+                        See: https://gist.github.com/calebporzio/623c536f7fff77861b8a37ec11a1d3da
+                        and https://stackoverflow.com/questions/44695560/how-can-i-import-a-svg-file-to-a-vue-component
+                    -->
+
+                    <!-- @svg('search', 'fill-current text-navy w-6 h-6') -->
+
+                </button>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+
+        data() {
+            return {
+               visible: false
+            }
+        },
+
+        mounted() {
+            console.log('Search component mounted.')
+        }
+    }
+</script>
diff --git a/resources/styles/common/setup.styl b/resources/styles/common/setup.styl
index 99d1bce..26faba8 100644
--- a/resources/styles/common/setup.styl
+++ b/resources/styles/common/setup.styl
@@ -12,7 +12,7 @@ $horizontal-gutter = 5vw
 $vertical-gutter   = 5vw
 
 // Breakpoints in Rupture (https://github.com/jescalan/rupture)
-$breakpoint-columns  = 768px
+$breakpoint-columns  = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js
 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/components/grids.styl b/resources/styles/components/grids.styl
index a3c5e4c..f53cc17 100644
--- a/resources/styles/components/grids.styl
+++ b/resources/styles/components/grids.styl
@@ -1,40 +1,57 @@
 // Generate utility classes for grids
 // Grid gaps are on 0.25vw jumps for greater control
+// Also some named gaps: sm, md, lg, xl
 $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,
+
+  'xs': 0.25vw,
+  'sm': 0.5vw,
+  'md': 1.25vw,
+  'lg': 2.5vw,
+  'xl': 5vw,
+
+  '1v': 0.25vw,
+  '2v': 0.5vw,
+  '3v': 0.75vw,
+  '4v': 1vw,
+  '5v': 1.25vw,
+  '6v': 1.5vw,
+  '7v': 1.75vw,
+  '8v': 2vw,
+  '9v': 2.25vw,
+  '10v': 2.5vw,
+  '20v': 5vw,
 }
 
-// Generate classes
-for counter, vwAmount in $vw-spacing
+// Generate classes + make responsive
+
+@responsive
+  for id, vwAmount in $vw-spacing
 
-  .grid-gap-{counter}v
-    constrain(grid-gap, vwAmount)
+    .grid-gap-{id}
+      constrain(grid-gap, vwAmount)
 
 //----------------------------------
 
+@responsive // Generate responsive utilities like sm:grid, md:grid-cols-2 etc
+  .grid
+    display: grid
 
-.grid
-  display: grid
+    &-cols-auto
+      // Automatic number of columns based on number of children
+      // but with a min-width to stop them getting too small...
+      grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))
 
-  // ToDo: add Tailwind @responsive variations so grids can be changed via generic class names
+    &-cols-1
+      grid-template-columns: 1fr
 
-  &-cols-2
-    grid-template-columns: repeat(2, 1fr)
+    &-cols-2
+      grid-template-columns: repeat(2, 1fr)
 
-  &-cols-3
-    grid-template-columns: repeat(3, 1fr)
+    &-cols-3
+      grid-template-columns: repeat(3, 1fr)
 
-  &-cols-4
-    grid-template-columns: repeat(4, 1fr)
+    &-cols-4
+      grid-template-columns: repeat(4, 1fr)
 
 
   //&-cols-2
diff --git a/resources/views/components/grid.blade.php b/resources/views/components/grid.blade.php
new file mode 100644
index 0000000..2f47abb
--- /dev/null
+++ b/resources/views/components/grid.blade.php
@@ -0,0 +1,27 @@
+{{-- Grid Component --}}
+{{--
+    Using CSS Grid to make a grid out of any child elements.
+    By default, the grid is "auto", meaning it will make as many
+    columns as there are child elements until a minimum width for
+    each column is hit, then the columns will start to wrap
+
+    Possible column classes (listed here so PurgeCSS doesn't strip them):
+    grid-cols-auto (default)
+    grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4
+
+    eg.
+        <grid cols="4" gap="md" class="md:grid-cols-3 sm:grid-cols-2">
+            ...
+        </grid>
+--}}
+
+@php
+    // Default classes
+    $class = $class ?? '';
+    $cols = !empty($cols) ? 'grid-cols-'.$cols : 'grid-cols-auto';
+    $gap = isset($gap) ? 'grid-gap-'.$gap : 'grid-gap-lg'; // Can be overridden by passing an empty string
+@endphp
+
+<div class="grid {{ $cols }} {{ $gap }} {{ $class }}">
+    {{ $slot }}
+</div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 21fbebe..a51dec7 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,13 +1,18 @@
 @include('cubist::head.htmldeclaration')
 <head>
     {{--@include('cubist::head.head')--}}
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
 </head>
 <body class="font-body text-grey-dark">
 @include('cubist::body.begin')
 
-<div class="flex flex-col min-h-screen">
+<div id="app" class="flex flex-col min-h-screen">
+
     @include('partials.header')
 
     @section('breadcrumbs')
@@ -27,6 +32,8 @@
     @include('partials.footer')
 </div>
 
+<script src="{{ mix('/js/app.js') }}"></script>
+
 @include('cubist::body.end')
 </body>
 </html>
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index 3379602..8b28fa6 100644
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -72,9 +72,9 @@
             <columns>
                 <column>
 
-                    <h3 class="h2 simple pl-1v">Capteurs</h3>
+                    <h3 class="h2 simple pl-1v md:text-2xl sm:pl-0">Capteurs</h3>
 
-                    <div class="grid grid-cols-2 grid-gap-5v pr-1v border-r border-grey-300">
+                    <grid cols="2" gap="md" class="xs:grid-cols-1 pr-1v border-r border-grey-300 sm:pr-0 sm:border-0">
                         @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="#">
@@ -85,15 +85,15 @@
                                 </a>
                             </div>
                         @endfor
-                    </div>
+                    </grid>
 
                 </column>
 
 
                 <column>
-                    <h3 class="h2 simple pl-2v">Systèmes de mesure</h3>
+                    <h3 class="h2 simple pl-2v md:text-2xl sm:pl-0">Systèmes de mesure</h3>
 
-                    <div class="grid grid-cols-2 grid-gap-5v pl-1v">
+                    <grid cols="2" gap="md" class="xs:grid-cols-1 pl-1v sm:pl-0">
                         @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="#">
@@ -104,7 +104,7 @@
                                 </a>
                             </div>
                         @endfor
-                    </div>
+                    </grid>
 
                 </column>
 
@@ -131,7 +131,7 @@
                 ];
             @endphp
 
-            <div class="grid grid-cols-3 grid-gap-10v">
+            <grid cols="3" class="sm:grid-cols-2 xs:grid-cols-1">
                 @foreach ($solutions as $i => $solution)
                     @php($i++)
                     <a class="solutions-link">
@@ -139,7 +139,7 @@
                         <span class="solutions-link-text">{{ $solution }}</span>
                     </a>
                 @endforeach
-            </div>
+            </grid>
 
         </content>
     </full-width>
@@ -170,7 +170,7 @@
         <content>
             <text-block title="Actualités" />
 
-            <div class="grid grid-cols-4 grid-gap-10v">
+            <grid cols="4" class="md:grid-cols-2 xs:grid-cols-1 xs:grid-gap-20v">
                 @for ($i = 1; $i <= 4; $i++)
                     <div>
                         <img class="mb-4" src="{{ asset('storage/uploads/images/news-1.jpg') }}" alt="">
@@ -179,7 +179,7 @@
                         <p><a href="#">Lire la suite</a></p>
                     </div>
                 @endfor
-            </div>
+            </grid>
         </content>
     </full-width>
 
@@ -188,11 +188,11 @@
         <content>
             <text-block title="Nos clients" />
 
-            <div class="grid grid-cols-4 grid-gap-10v">
+            <grid cols="4" class="sm:grid-cols-2">
                 @for ($i = 1; $i <= 8; $i++)
                     <div class="bg-white hover:bg-grey-200 cursor-pointer" style="padding-bottom: 58%"></div>
                 @endfor
-            </div>
+            </grid>
         </content>
     </full-width>
 
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 9179a60..f4a150a 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -22,15 +22,4 @@
 
 </header>
 
-<div class="bg-white">
-    <content class="header-search-box hidden py-3">
-        <form class="flex justify-between items-center">
-            <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
-                   type="text"
-                   name="search"
-                   autocomplete="off"
-                   placeholder="{{ __('Search...') }}">
-            <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">@svg('search', 'fill-current text-navy w-6 h-6')</button>
-        </form>
-    </content>
-</div>
+<search></search>
diff --git a/tailwind.config.js b/tailwind.config.js
index 914d34e..e7e88d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,16 @@
 module.exports = {
   theme: {
+    screens: {
+      // We're using the desktop-first approach to media queries so everything is max-width based
+      // The most important breakpoint for PMI is when the columns stack. This is defined in setup.styl
+      // and for now it needs to be manually matched here. The idea is that we can set styles using
+      // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'.
+      // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller
+      // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2)
+      'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
+      'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... }
+      'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... }
+    },
     extend: {
       colors: {
         'inherit': 'inherit',