From 309befa5cc880f0c3ef83d8c0508aa0370c4fdf3 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 17 Sep 2019 18:01:28 +0200 Subject: [PATCH] WIP #3034 @8 --- package.json | 1 + resources/js/app.js | 7 ++- resources/js/components/CartItem.vue | 2 +- resources/js/vendor/cubist/gtag/gtag.js | 6 ++- resources/styles/app.styl | 1 + .../styles/{components => common}/grids.styl | 6 +-- resources/styles/components/application.styl | 19 +++++++ resources/styles/components/cart.styl | 14 +++++ resources/styles/components/form.styl | 22 ++++++++ resources/styles/components/news.styl | 53 +++++++++++++++++++ .../styles/components/product-gallery.styl | 11 +++- resources/styles/components/search.styl | 19 +++++++ resources/views/layouts/app.blade.php | 2 +- resources/views/pages/news.blade.php | 2 +- webpack.mix.js | 4 ++ yarn.lock | 5 ++ 16 files changed, 164 insertions(+), 10 deletions(-) rename resources/styles/{components => common}/grids.styl (96%) diff --git a/package.json b/package.json index ce2d4a9..3a73abb 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "browser-sync-webpack-plugin": "2.0.1", "cash-dom": "^4.1.5", "cross-env": "^5.2.0", + "css-vars-ponyfill": "^2.1.2", "element-closest": "^3.0.1", "element-closest-polyfill": "^1.0.0", "element-matches-polyfill": "^1.0.0", diff --git a/resources/js/app.js b/resources/js/app.js index 90ca11b..b410bcb 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -7,7 +7,12 @@ require('./bootstrap'); require('./menu'); require('../../vendor/cubist/cms-back/src/public/emailobfuscator/emailobfuscator'); -require("element-closest"); +require('element-closest'); + +// Todo: WIP for CSS vars - need to assess MMenu usage and options for the polyfill. In default state, it's only partially working so it's better to disable this until it fully works. +//import cssVars from 'css-vars-ponyfill'; +//cssVars({}); // Polyfill CSS Vars for older browsers + var glob = require('glob'); var path = require('path'); diff --git a/resources/js/components/CartItem.vue b/resources/js/components/CartItem.vue index 67d93fb..f2d38d0 100644 --- a/resources/js/components/CartItem.vue +++ b/resources/js/components/CartItem.vue @@ -4,7 +4,7 @@ :href="item.URL" :style="`background-image: url(${item.image});`"> -
+
{{ item.reference }} diff --git a/resources/js/vendor/cubist/gtag/gtag.js b/resources/js/vendor/cubist/gtag/gtag.js index 54c7b1e..be69a03 100644 --- a/resources/js/vendor/cubist/gtag/gtag.js +++ b/resources/js/vendor/cubist/gtag/gtag.js @@ -56,8 +56,10 @@ cubistga.prototype.event = function (action, category, label, value, noninteract if (undefined !== value && null !== value) { options.value = value; } - console.log('gtag event', action, options); - return gtag('event', action, options) + + //console.log('gtag event', action, options); + + return (typeof gtag !== "undefined") ? gtag('event', action, options) : false; }; cubistga.prototype.handleGtag = function (el) { diff --git a/resources/styles/app.styl b/resources/styles/app.styl index 596534a..09b5ba8 100644 --- a/resources/styles/app.styl +++ b/resources/styles/app.styl @@ -12,6 +12,7 @@ // Extracted components or custom styles that can't be done with utilities @import 'common/spacing' @import 'common/columns' +@import 'common/grids' @import 'common/global' @import 'common/headings' @import 'common/links' diff --git a/resources/styles/components/grids.styl b/resources/styles/common/grids.styl similarity index 96% rename from resources/styles/components/grids.styl rename to resources/styles/common/grids.styl index 21a4c77..6d724cd 100644 --- a/resources/styles/components/grids.styl +++ b/resources/styles/common/grids.styl @@ -44,11 +44,11 @@ $vw-spacing = { $fallback_grid_gap = $vw-spacing.lg // Basis for all grid gaps and $fallback_grid_gap_px = unit($fallback_grid_gap / 100, '') * $base-width -grid-fallback(cols) { +grid-fallback(cols, gap = $fallback_grid_gap) { .no-cssgrid & { > * { - lost-column: s('1/%s %s %s', cols, cols, $fallback_grid_gap) - margin-bottom: $fallback_grid_gap + lost-column: s('1/%s %s %s', cols, cols, gap) + margin-bottom: gap } } } diff --git a/resources/styles/components/application.styl b/resources/styles/components/application.styl index 54fa800..e31df3a 100644 --- a/resources/styles/components/application.styl +++ b/resources/styles/components/application.styl @@ -18,3 +18,22 @@ &-body grid-area: body + + + .no-cssgrid & + + &-layout + display: flex + align-items: flex-start + + +below(700px) + display: block + + > * + flex: 1 1 auto + + &-body + padding: 0 2em + + +below(700px) + padding: 2em 0 diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl index fec5bce..a413d3e 100644 --- a/resources/styles/components/cart.styl +++ b/resources/styles/components/cart.styl @@ -47,6 +47,13 @@ transition: max-height var(--transition-duration) overflow-y: auto + // IE 11 Flexbox + /*! purgecss start ignore */ + .flexboxtweener & + .cart-item-text + flex: 1 1 0% // Fix for inconsistent sizing in IE11 (flex-basis must have unit) + /*! purgecss end ignore */ + &-footer @apply bg-grey-100 p-10 @@ -83,3 +90,10 @@ &-image max-width: 144px max-height: @max-width + +// CSS Grid fallback +.template-cart .grid-cols-auto + grid-fallback(2) + + +below(850px) + grid-fallback(1) diff --git a/resources/styles/components/form.styl b/resources/styles/components/form.styl index 06c2f74..33b4690 100644 --- a/resources/styles/components/form.styl +++ b/resources/styles/components/form.styl @@ -49,3 +49,25 @@ min-width: unset padding-left: 1.5em padding-right: @padding-left + + + // CSS Grid fallback + // Since forms can be used in multiple contexts (main / sidebar), + // it's not worth the complexity here in the fallback to accommodate + // the dual column layout because with only flexbox, the closest we + // can get is 2 columns without gaps OR a column gap but narrower + // fields than the full-width ones (because we don't know when + // the container will force a wrap) + .no-cssgrid & + .grid + display: flex + flex-wrap: wrap + justify-content: space-between + margin-bottom: 0 + + label + @apply block w-full + //min-width: 200px + // + //&.half + // flex: 0 1 48% diff --git a/resources/styles/components/news.styl b/resources/styles/components/news.styl index 93a2c0b..52d70ee 100644 --- a/resources/styles/components/news.styl +++ b/resources/styles/components/news.styl @@ -43,6 +43,39 @@ width 100%; + // Non-CSS grid fallback + .no-cssgrid & + + &-layout + display: flex + + +below(900px) + display: block + + &-articles + flex: 1 1 auto + + &-sidebar + flex: 0 1 320px + + +below(900px) + margin-top: 2em + max-width: none + + &-article + display: flex + + &-image + flex: 1 1 auto + width: 33% + max-width: 330px + + &-text + flex: 1 1 67% + padding: 0 2em + + + //=== Individual News Post // 3 column layout with image / text / sidebar @@ -74,3 +107,23 @@ &-sidebar grid-area: sidebar min-width: 320px + + + .no-cssgrid & + + &-layout + display: flex + align-items: flex-start + + +below(1200px) + display: block + + > * + flex: 1 1 auto + + &-body + padding: 0 2em + + +below(1200px) + padding: 2em 0 + diff --git a/resources/styles/components/product-gallery.styl b/resources/styles/components/product-gallery.styl index bb22291..d3006c8 100644 --- a/resources/styles/components/product-gallery.styl +++ b/resources/styles/components/product-gallery.styl @@ -14,4 +14,13 @@ @apply w-full bg-center bg-cover pb-100p border-4 border-grey-100 cursor-pointer &-current - @apply border-grey-300 \ No newline at end of file + @apply border-grey-300 + + + // Non CSS Grid + .grid + grid-fallback(3, 15px) + + .no-cssgrid & + &-thumb + padding-bottom: calc(33.3% - 10px) diff --git a/resources/styles/components/search.styl b/resources/styles/components/search.styl index 6bb48d8..6ba4e67 100644 --- a/resources/styles/components/search.styl +++ b/resources/styles/components/search.styl @@ -30,6 +30,25 @@ $breakpoint-search-results = 980px @apply w-full mb-4 + // Non CSS Grid fallback + .no-cssgrid & + &-layout + @apply flex + + +below($breakpoint-search-results) + @apply block + + &-main + flex: 1 1 0% + + &-sidebar + @apply ml-8 + flex: 0 0 320px + + +below($breakpoint-search-results) + @apply ml-0 mt-6 + + //== Autocomplete field /*! purgecss start ignore */ .autocomplete diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 5ba1e1f..ea81d15 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -34,7 +34,7 @@ @show -
+
@yield('content')
diff --git a/resources/views/pages/news.blade.php b/resources/views/pages/news.blade.php index a4f4e7d..6a7a60a 100644 --- a/resources/views/pages/news.blade.php +++ b/resources/views/pages/news.blade.php @@ -1,7 +1,7 @@ @extends('layouts.app') @section('content') - @intro(['padding' => 'pb-4v']) + @intro(['padding' => 'pb-2v']) diff --git a/webpack.mix.js b/webpack.mix.js index 432a6e6..670cd2e 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -17,6 +17,8 @@ mix.webpackConfig({ ], 'feature-detects': [ 'css/cssgrid', + 'css/flexbox', + 'css/flexboxtweener', ] }), ], @@ -71,6 +73,8 @@ if (mix.inProduction()) { mix.version(); // Enable unique hashed filenames when in production // Transpile code for older browsers like IE11 + // This has to be here because if it is in the default setup, + // it seems to cause BrowserSync to go into an infinite loop :( mix.babel(['public/js/app.js'], 'public/js/app.js'); } diff --git a/yarn.lock b/yarn.lock index df84931..3883fd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2375,6 +2375,11 @@ css-url-regex@^1.1.0: resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec" integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w= +css-vars-ponyfill@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/css-vars-ponyfill/-/css-vars-ponyfill-2.1.2.tgz#0de2e49e72a6bac09cb456a0325c8584cadaecd2" + integrity sha512-Jfff/j2AGwr+WJaIbxVroTa9sFXy9b0xe5zjWEVQ9aoeCpd0e6iOo4D+d3OoLDTWcHCf2UBTswis/hN6fKEKiA== + css-what@^2.1.2: version "2.1.3" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" -- 2.39.5