From cb631b950063e6837b6d2be64170de4d546ce9ed Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Wed, 31 Mar 2021 19:00:23 +0100 Subject: [PATCH] Replaced masonry plugin with CSS grid layout --- .../tile-icons/networking/compliance.png | Bin 0 -> 8068 bytes src/components/Collapsable.vue | 5 +- src/lib/vue-masonry-css.js | 226 ------------------ src/main.js | 2 - src/styles/media-queries.scss | 40 ++++ src/views/Home.vue | 51 ++-- 6 files changed, 72 insertions(+), 252 deletions(-) create mode 100644 public/img/item-icons/tile-icons/networking/compliance.png delete mode 100644 src/lib/vue-masonry-css.js create mode 100644 src/styles/media-queries.scss diff --git a/public/img/item-icons/tile-icons/networking/compliance.png b/public/img/item-icons/tile-icons/networking/compliance.png new file mode 100644 index 0000000000000000000000000000000000000000..9f6a838f16ea0dc8e61faff788255ace6aa5046b GIT binary patch literal 8068 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 EFTn3);{X5v literal 0 HcmV?d00001 diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue index 9c9e350e..c6efc5d9 100644 --- a/src/components/Collapsable.vue +++ b/src/components/Collapsable.vue @@ -74,7 +74,6 @@ export default { @import '../../src/styles/constants.scss'; .collapsable { - // width: 310px; padding: 5px; margin: 10px; border-radius: $curve-factor; @@ -82,7 +81,9 @@ export default { // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1); // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1); box-shadow: 1px 1px 2px #130f23; - width: auto; + height: fit-content; + width: 100%; + width: stretch; // &.col-1 { width: 155px; } // &.col-2 { width: 310px; } // &.col-3 { width: 465px; } diff --git a/src/lib/vue-masonry-css.js b/src/lib/vue-masonry-css.js deleted file mode 100644 index 79f8f6d7..00000000 --- a/src/lib/vue-masonry-css.js +++ /dev/null @@ -1,226 +0,0 @@ -/* eslint-disable */ -// the component name `` -// can be overridden with `Vue.use(Masonry, { name: 'the-masonry' });` -const componentName = 'masonry'; - -const props = { - tag: { - type: [String], - default: 'div', - }, - cols: { - type: [Object, Number, String], - default: 2, - }, - gutter: { - type: [Object, Number, String], - default: 0, - }, - css: { - type: [Boolean], - default: true, - }, - columnTag: { - type: [String], - default: 'div', - }, - columnClass: { - type: [String, Array, Object], - default: () => [], - }, - columnAttr: { - type: [Object], - default: () => ({}), - }, -}; - -// Get the resulting value from `:col=` prop -// based on the window width -const breakpointValue = (mixed, windowWidth) => { - const valueAsNum = parseInt(mixed); - - if (valueAsNum > -1) { - return mixed; - } if (typeof mixed !== 'object') { - return 0; - } - - let matchedBreakpoint = Infinity; - let matchedValue = mixed.default || 0; - - for (const k in mixed) { - const breakpoint = parseInt(k); - const breakpointValRaw = mixed[breakpoint]; - const breakpointVal = parseInt(breakpointValRaw); - - if (isNaN(breakpoint) || isNaN(breakpointVal)) { - continue; - } - - const isNewBreakpoint = windowWidth <= breakpoint && breakpoint < matchedBreakpoint; - - if (isNewBreakpoint) { - matchedBreakpoint = breakpoint; - matchedValue = breakpointValRaw; - } - } - - return matchedValue; -}; - -const component = { - props, - - data() { - return { - displayColumns: 2, - displayGutter: 0, - }; - }, - - mounted() { - this.$nextTick(() => { - this.reCalculate(); - }); - - // Bind resize handler to page - if (window) { - window.addEventListener('resize', this.reCalculate); - } - }, - - updated() { - this.$nextTick(() => { - this.reCalculate(); - }); - }, - - beforeDestroy() { - if (window) { - window.removeEventListener('resize', this.reCalculate); - } - }, - - methods: { - // Recalculate how many columns to display based on window width - // and the value of the passed `:cols=` prop - reCalculate() { - const previousWindowWidth = this.windowWidth; - - this.windowWidth = (window ? window.innerWidth : null) || Infinity; - - // Window resize events get triggered on page height - // change which when loading the page can result in multiple - // needless calculations. We prevent this here. - if (previousWindowWidth === this.windowWidth) { - return; - } - - this._reCalculateColumnCount(this.windowWidth); - - this._reCalculateGutterSize(this.windowWidth); - }, - - _reCalculateGutterSize(windowWidth) { - this.displayGutter = breakpointValue(this.gutter, windowWidth); - }, - - _reCalculateColumnCount(windowWidth) { - let newColumns = breakpointValue(this.cols, windowWidth); - - // Make sure we can return a valid value - newColumns = Math.max(1, Number(newColumns) || 0); - - this.displayColumns = newColumns; - }, - - _getChildItemsInColumnsArray() { - const columns = []; - let childItems = this.$slots.default || []; - - // This component does not work with a child ..yet, - // so for now we think it may be helpful to ignore until we can find a way for support - if (childItems.length === 1 && childItems[0].componentOptions && childItems[0].componentOptions.tag == 'transition-group') { - childItems = childItems[0].componentOptions.children; - } - - // Loop through child elements - for (let i = 0, visibleItemI = 0; i < childItems.length; i++, visibleItemI++) { - // skip Vue elements without tags, which includes - // whitespace elements and also plain text - if (!childItems[i].tag) { - visibleItemI--; - - continue; - } - - // Get the column index the child item will end up in - const columnIndex = visibleItemI % this.displayColumns; - - if (!columns[columnIndex]) { - columns[columnIndex] = []; - } - - columns[columnIndex].push(childItems[i]); - } - - return columns; - }, - }, - - render(createElement) { - const columnsContainingChildren = this._getChildItemsInColumnsArray(); - const isGutterSizeUnitless = parseInt(this.displayGutter) === this.displayGutter * 1; - const gutterSizeWithUnit = isGutterSizeUnitless ? `${this.displayGutter}px` : this.displayGutter; - - const columnStyle = { - boxSizing: 'border-box', - backgroundClip: 'padding-box', - width: `${100 / this.displayColumns}%`, - border: '0 solid transparent', - borderLeftWidth: gutterSizeWithUnit, - }; - - const columns = columnsContainingChildren.map((children, index) => - // / Create column element and inject the children - createElement(this.columnTag, { - key: `${index}-${columnsContainingChildren.length}`, - style: this.css ? columnStyle : null, - class: this.columnClass, - attrs: this.columnAttr, - }, children), // specify child items here - ); - - const containerStyle = { - display: ['-webkit-box', '-ms-flexbox', 'flex'], - marginLeft: `-${gutterSizeWithUnit}`, - }; - - // Return wrapper with columns - return createElement( - this.tag, // tag name - this.css ? { style: containerStyle } : null, // element options - columns, // column vue elements - ); - }, -}; - -const Plugin = function () {}; - -Plugin.install = function (Vue, options) { - if (Plugin.installed) { - return; - } - - if (options && options.name) { - Vue.component(options.name, component); - } else { - Vue.component(componentName, component); - } -}; - -if (typeof window !== 'undefined' && window.Vue) { - window.Vue.use(Plugin); -} - -export default Plugin; diff --git a/src/main.js b/src/main.js index 1f01c1bd..219d4eee 100644 --- a/src/main.js +++ b/src/main.js @@ -4,10 +4,8 @@ import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; import router from './router'; import './registerServiceWorker'; -import VueMasonry from './lib/vue-masonry-css'; // Thank you @PaulCollett 🙌 https://git.io/JeeYC Vue.use(Element); -Vue.use(VueMasonry); Vue.config.productionTip = false; new Vue({ diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss new file mode 100644 index 00000000..24d835a0 --- /dev/null +++ b/src/styles/media-queries.scss @@ -0,0 +1,40 @@ + +/* Widths in px */ +$tiny: 600px; +$small: 780px; +$medium: 1150px; +$large: 1780px; +$extra-large: 2800px; + +/* Usage @include tablet { ... } */ + +@mixin phone { + @media (max-width: #{$tiny - 1px}) { + @content; + } +} + +@mixin tablet { + @media (min-width: #{$tiny}) and (max-width: #{$small - 1px}) { + @content; + } +} + +@mixin laptop { + @media (min-width: #{$small}) and (max-width: #{$medium - 1px}) { + @content; + } +} + +@mixin monitor { + @media (min-width: #{$medium}) and (max-width: #{$large - 1px}) { + @content; + } +} + +@mixin big-screen { + @media (min-width: #{$large}) { + @content; + } +} + diff --git a/src/views/Home.vue b/src/views/Home.vue index dccf26f9..9b24a238 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -3,20 +3,15 @@
- - - +
@@ -69,22 +64,34 @@ export default {