From: Stephen Cameron Date: Tue, 17 Sep 2019 16:01:28 +0000 (+0200) Subject: WIP #3034 @8 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=309befa5cc880f0c3ef83d8c0508aa0370c4fdf3;p=pmi.git WIP #3034 @8 --- 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/common/grids.styl b/resources/styles/common/grids.styl new file mode 100644 index 0000000..6d724cd --- /dev/null +++ b/resources/styles/common/grids.styl @@ -0,0 +1,130 @@ +// 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 = { + + '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 + make responsive + +@responsive + for id, vwAmount in $vw-spacing + + .grid-gap-{id} + constrain(grid-gap, vwAmount) + + // Non-CSS-Grid should have padding + negative margins to simulate grid gaps + // In the end this is a bit too complicated to do for not enough benefit so + // all grids can have the same fixed gap (see grid-fallback mixin) + //.no-cssgrid & + // horizontal-spacing(vwAmount / -2, margin) // Negative half spacing on each side + // > * + // horizontal-spacing(vwAmount / 2) // Halved because padding will be doubled between neighbouring columns + +//---------------------------------- + +// Fallback mixin for non-CSS-Grid columns +$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, gap = $fallback_grid_gap) { + .no-cssgrid & { + > * { + lost-column: s('1/%s %s %s', cols, cols, gap) + margin-bottom: gap + } + } +} + +//---------------------------------- + +@responsive // Generate responsive utilities like sm:grid, md:grid-cols-2 etc + .grid + display: grid + + .no-cssgrid & + display: flex + flex-wrap: wrap + margin-bottom: - $fallback_grid_gap + + &-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)) + + // When there's no CSS Grid support, set columns based on breakpoints + grid-fallback(4) + + +below(1500px) + grid-fallback(3) + +below(1100px) + grid-fallback(2) + +below(600px) + grid-fallback(1) + + + &-cols-1 + grid-template-columns: 1fr + grid-fallback(1) + + &-cols-2 + grid-template-columns: repeat(2, 1fr) + grid-fallback(2) + + &-cols-3 + grid-template-columns: repeat(3, 1fr) + grid-fallback(3) + + &-cols-4 + grid-template-columns: repeat(4, 1fr) + grid-fallback(4) + + &-cols-5 + grid-template-columns: repeat(5, 1fr) + grid-fallback(5) + + + //&-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/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/grids.styl b/resources/styles/components/grids.styl deleted file mode 100644 index 21a4c77..0000000 --- a/resources/styles/components/grids.styl +++ /dev/null @@ -1,130 +0,0 @@ -// 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 = { - - '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 + make responsive - -@responsive - for id, vwAmount in $vw-spacing - - .grid-gap-{id} - constrain(grid-gap, vwAmount) - - // Non-CSS-Grid should have padding + negative margins to simulate grid gaps - // In the end this is a bit too complicated to do for not enough benefit so - // all grids can have the same fixed gap (see grid-fallback mixin) - //.no-cssgrid & - // horizontal-spacing(vwAmount / -2, margin) // Negative half spacing on each side - // > * - // horizontal-spacing(vwAmount / 2) // Halved because padding will be doubled between neighbouring columns - -//---------------------------------- - -// Fallback mixin for non-CSS-Grid columns -$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) { - .no-cssgrid & { - > * { - lost-column: s('1/%s %s %s', cols, cols, $fallback_grid_gap) - margin-bottom: $fallback_grid_gap - } - } -} - -//---------------------------------- - -@responsive // Generate responsive utilities like sm:grid, md:grid-cols-2 etc - .grid - display: grid - - .no-cssgrid & - display: flex - flex-wrap: wrap - margin-bottom: - $fallback_grid_gap - - &-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)) - - // When there's no CSS Grid support, set columns based on breakpoints - grid-fallback(4) - - +below(1500px) - grid-fallback(3) - +below(1100px) - grid-fallback(2) - +below(600px) - grid-fallback(1) - - - &-cols-1 - grid-template-columns: 1fr - grid-fallback(1) - - &-cols-2 - grid-template-columns: repeat(2, 1fr) - grid-fallback(2) - - &-cols-3 - grid-template-columns: repeat(3, 1fr) - grid-fallback(3) - - &-cols-4 - grid-template-columns: repeat(4, 1fr) - grid-fallback(4) - - &-cols-5 - grid-template-columns: repeat(5, 1fr) - grid-fallback(5) - - - //&-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/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"