From cb631b950063e6837b6d2be64170de4d546ce9ed Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
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 `<masonry />`
-// 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 <transition-group /> ..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 @@
<Header />
<FilterTile @user-is-searchin="searching" class="filter-container" />
<div class="item-group-container">
- <masonry
- :cols="{600: 1, 780: 2, 1150: 2, 1780: 3, 9999: 4}"
- :gutter="30"
- >
- <ItemGroup
- v-for="(item, index) in items"
- :key="index"
- :groupId="item.id"
- :title="item.name"
- :collapsed="item.collapsed"
- :cols="item.cols"
- :items="filterTiles(item.items)"
- />
- </masonry>
+ <ItemGroup
+ v-for="(item, index) in items"
+ :key="index"
+ :groupId="item.id"
+ :title="item.name"
+ :collapsed="item.collapsed"
+ :cols="item.cols"
+ :items="filterTiles(item.items)"
+ />
</div>
</div>
</template>
@@ -69,22 +64,34 @@ export default {
</script>
<style lang="scss" scoped>
-
@import '../../src/styles/color-pallet.scss';
+@import '../../src/styles/media-queries.scss';
.home {
background: $background;
padding-bottom: 1px;
}
+/* Outside container wrapping the item groups*/
.item-group-container {
- display: flex;
- flex-wrap: wrap;
- margin: 2rem;
- align-items:flex-start;
- align-content:flex-start;
- .item-group-outer {
- margin: 10px;
+ display: grid;
+ gap: 10px;
+ // grid-template-rows: masonry;
+
+ @include phone {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ @include tablet {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ @include laptop {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ @include monitor {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ @include big-screen {
+ grid-template-columns: repeat(4, 1fr);
}
}
</style>