From 635bf19546c5b97dc84395f3c742c053ac923a46 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Sun, 19 Jun 2022 19:22:14 -0300 Subject: [PATCH] Removes dependency of vue-masonry-css. #498. --- package-lock.json | 5 - package.json | 1 - .../lists/collections-home-list.vue | 433 +++++++++--------- .../admin/components/lists/items-list.vue | 14 +- src/views/admin/js/admin-main.js | 2 - src/views/admin/pages/home-page.vue | 10 +- .../admin/scss/_collection-home-cards.scss | 64 ++- .../blocks/faceted-search/theme.js | 2 - 8 files changed, 273 insertions(+), 258 deletions(-) diff --git a/package-lock.json b/package-lock.json index 147caa4fc..c11d31e97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7115,11 +7115,6 @@ } } }, - "vue-masonry-css": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/vue-masonry-css/-/vue-masonry-css-1.0.3.tgz", - "integrity": "sha512-viecHQiHVLez7HlYUQsv1wJb2MT/RDSzkDp6m3In41vPrk6OsBmT2qRE8LZqYIA4daIwrnx/Xm8h4fjOpuE3hw==" - }, "vue-resize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz", diff --git a/package.json b/package.json index fc8597ac2..9f8b3f91b 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "vue-apexcharts": "^1.6.2", "vue-blurhash": "^0.1.4", "vue-countup-v2": "^4.0.0", - "vue-masonry-css": "^1.0.3", "vue-router": "^3.1.6", "vue-the-mask": "^0.11.1", "vuedraggable": "^2.24.3", diff --git a/src/views/admin/components/lists/collections-home-list.vue b/src/views/admin/components/lists/collections-home-list.vue index cc212dfcb..2f037a2fb 100644 --- a/src/views/admin/components/lists/collections-home-list.vue +++ b/src/views/admin/components/lists/collections-home-list.vue @@ -2,82 +2,79 @@
- - + +
  • +
      +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + + +
      • +
    • + + + + + +
      • +
    + + + + +
    +

    {{ collection.name != undefined ? collection.name : '' }}

    +
    +     +
    • +
    diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue index 6b8593e37..17fec5fe8 100644 --- a/src/views/admin/components/lists/items-list.vue +++ b/src/views/admin/components/lists/items-list.vue @@ -1445,12 +1445,14 @@ export default { if (this.masonry !== false) this.masonry.destroy(); - this.masonry = new Masonry( '.tainacan-' + this.viewMode + '-container', { - itemSelector: 'li', - columnWidth: '.tainacan-' + this.viewMode + '-grid-sizer', - gutter: this.viewMode == 'masonry' ? 25 : 30, - percentPosition: true - }); + if (this.viewMode == 'masonry' || this.viewMode == 'records') { + this.masonry = new Masonry( '.tainacan-' + this.viewMode + '-container', { + itemSelector: 'li', + columnWidth: '.tainacan-' + this.viewMode + '-grid-sizer', + gutter: this.viewMode == 'masonry' ? 25 : 30, + percentPosition: true + }); + } }); } }, diff --git a/src/views/admin/js/admin-main.js b/src/views/admin/js/admin-main.js index b4cb809db..b34f5dbb1 100644 --- a/src/views/admin/js/admin-main.js +++ b/src/views/admin/js/admin-main.js @@ -30,7 +30,6 @@ import { Numberinput } from 'buefy'; import VTooltip from 'floating-vue'; -import VueMasonry from 'vue-masonry-css'; import draggable from 'vuedraggable'; import VueTheMask from 'vue-the-mask'; import cssVars from 'css-vars-ponyfill'; @@ -181,7 +180,6 @@ export default (element) => { } } }); - Vue.use(VueMasonry); Vue.use(VueBlurHash); Vue.use(I18NPlugin); Vue.use(UserPrefsPlugin); diff --git a/src/views/admin/pages/home-page.vue b/src/views/admin/pages/home-page.vue index 67a39cc2c..f4e7106bf 100644 --- a/src/views/admin/pages/home-page.vue +++ b/src/views/admin/pages/home-page.vue @@ -250,6 +250,10 @@ export default { } .home-section { + + @media screen and (max-width: 768px) { + margin-right: 25px; + } &.home-section-repository{ position: relative; @@ -260,7 +264,11 @@ export default { &.home-section-collection { position: relative; margin-left: 52px; - margin-bottom: 80px; + margin-bottom: 80px; + + @media screen and (max-width: 768px) { + padding-right: 0.75em; + } } .section-connector { diff --git a/src/views/admin/scss/_collection-home-cards.scss b/src/views/admin/scss/_collection-home-cards.scss index 08a6adf74..fcccb7d87 100644 --- a/src/views/admin/scss/_collection-home-cards.scss +++ b/src/views/admin/scss/_collection-home-cards.scss @@ -10,24 +10,50 @@ animation-name: item-appear; animation-duration: 0.5s; - &>div { + &>ul { + --column-count: 5; + --column-gap: 25px; + width: calc(100% + var(--tainacan-container-padding)) !important; + display: flex; + flex-wrap: wrap; + margin-top: 0.75em; + margin-bottom: 1.6em; + row-gap: 25px; + column-gap: var(--column-gap,25px); - &>div>.tainacan-card:not(.always-visible-collections):nth-child(3), - &>div>.tainacan-card:not(.always-visible-collections):nth-child(4), - &>div>.tainacan-card:not(.always-visible-collections):nth-child(5), - &>div>.tainacan-card:not(.always-visible-collections):nth-child(6), - &>div>.tainacan-card:not(.always-visible-collections):nth-child(7), - &>div>.tainacan-card:not(.always-visible-collections):nth-child(8), - &>div>.tainacan-card:not(.always-visible-collections):nth-child(9), - &>div>.tainacan-card:not(.always-visible-collections):nth-child(10) { - display: none; - } + &>li { + flex-basis: calc((100%/var(--column-count, 5)) - var(--column-gap,25px)); + min-width: calc((100%/var(--column-count, 5)) - var(--column-gap,25px)); + flex-shrink: 0; + flex-grow: 1; - @media screen and (max-width: 768px) { - &>div>.tainacan-card:nth-child(3), - &>div>.tainacan-card:nth-child(4) { - display: block; + @media screen and (max-width: 1600px) { + --column-count: 4; + + &:not(.always-visible-collections):nth-child(9), + &:not(.always-visible-collections):nth-child(10) { + display: none; + } + } + @media screen and (max-width: 1360px) { + --column-count: 3; + + &:not(.always-visible-collections):nth-child(7), + &:not(.always-visible-collections):nth-child(8) { + display: none; + } + } + @media screen and (max-width: 1024px) { + --column-count: 2; + + &:not(.always-visible-collections):nth-child(5), + &:not(.always-visible-collections):nth-child(6) { + display: none; + } + } + @media screen and (max-width: 768px) { + --column-count: 1; } } } @@ -35,20 +61,12 @@ .tainacan-card { background-color: var(--tainacan-gray1); padding: 0px; - margin-top: 0.75em; - margin-bottom: 1.6em; - flex-basis: 0; min-height: 135px; cursor: pointer; text-decoration: none !important; display: flex; flex-wrap: wrap; - @media screen and (max-width: 768px) { - max-width: 100%; - min-width: 100%; - } - &:hover .menu-list { background-color: var(--tainacan-gray2); a { background-color: var(--tainacan-gray2); } diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js index cac803a67..3ac733876 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js @@ -23,7 +23,6 @@ import { Numberinput } from 'buefy'; import VTooltip from 'floating-vue'; -import VueMasonry from 'vue-masonry-css'; import cssVars from 'css-vars-ponyfill'; import qs from 'qs'; import VueBlurHash from 'vue-blurhash'; @@ -120,7 +119,6 @@ export default (element) => { } } }); - Vue.use(VueMasonry); Vue.use(VueBlurHash); Vue.use(I18NPlugin); Vue.use(UserPrefsPlugin);