tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Removes dependency of vue-masonry-css. #498.

This commit is contained in:
mateuswetah 2022-06-19 19:22:14 -03:00
parent 72c2a9c001
commit 635bf19546
8 changed files with 273 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -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": { "vue-resize": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz", "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",

1
package.json
View File

@ -30,7 +30,6 @@
"vue-apexcharts": "^1.6.2", "vue-apexcharts": "^1.6.2",
"vue-blurhash": "^0.1.4", "vue-blurhash": "^0.1.4",
"vue-countup-v2": "^4.0.0", "vue-countup-v2": "^4.0.0",
"vue-masonry-css": "^1.0.3",
"vue-router": "^3.1.6", "vue-router": "^3.1.6",
"vue-the-mask": "^0.11.1", "vue-the-mask": "^0.11.1",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",

21
src/views/admin/components/lists/collections-home-list.vue
View File

@ -2,8 +2,9 @@
<div <div
style="min-height: initial; position: relative" style="min-height: initial; position: relative"
class="tainacan-cards-container"> class="tainacan-cards-container">
<template v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')"> <ul
<ul class="new-collection-menu"> v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')"
class="new-collection-menu">
<li> <li>
<router-link <router-link
tag="a" tag="a"
@ -72,12 +73,8 @@
</router-link> </router-link>
</li> </li>
</ul> </ul>
</template> <ul v-if="collections.length > 0 && !isLoading">
<template v-if="collections.length > 0 && !isLoading"> <li>
<masonry
:cols="{ default: 5, 1919: 4, 1407: 3, 1215: 2, 1023: 2, 767: 1 }"
:gutter="25"
style="width:100%;">
<router-link <router-link
v-if="$userCaps.hasCapability('tnc_rep_edit_collections')" v-if="$userCaps.hasCapability('tnc_rep_edit_collections')"
tag="a" tag="a"
@ -143,7 +140,8 @@
</li> </li>
</ul> </ul>
</router-link> </router-link>
<div </li>
<li
v-if="collections.length > 0 && !isLoading" v-if="collections.length > 0 && !isLoading"
:key="index" :key="index"
v-for="(collection, index) of collections" v-for="(collection, index) of collections"
@ -283,9 +281,8 @@
<p>{{ collection.name != undefined ? collection.name : '' }}</p> <p>{{ collection.name != undefined ? collection.name : '' }}</p>
</div> </div>
</router-link> </router-link>
</div> </li>
</masonry> </ul>
</template>
</div> </div>
</template> </template>

2
src/views/admin/components/lists/items-list.vue
View File

@ -1445,12 +1445,14 @@ export default {
if (this.masonry !== false) if (this.masonry !== false)
this.masonry.destroy(); this.masonry.destroy();
if (this.viewMode == 'masonry' || this.viewMode == 'records') {
this.masonry = new Masonry( '.tainacan-' + this.viewMode + '-container', { this.masonry = new Masonry( '.tainacan-' + this.viewMode + '-container', {
itemSelector: 'li', itemSelector: 'li',
columnWidth: '.tainacan-' + this.viewMode + '-grid-sizer', columnWidth: '.tainacan-' + this.viewMode + '-grid-sizer',
gutter: this.viewMode == 'masonry' ? 25 : 30, gutter: this.viewMode == 'masonry' ? 25 : 30,
percentPosition: true percentPosition: true
}); });
}
}); });
} }
}, },

2
src/views/admin/js/admin-main.js
View File

@ -30,7 +30,6 @@ import {
Numberinput Numberinput
} from 'buefy'; } from 'buefy';
import VTooltip from 'floating-vue'; import VTooltip from 'floating-vue';
import VueMasonry from 'vue-masonry-css';
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import VueTheMask from 'vue-the-mask'; import VueTheMask from 'vue-the-mask';
import cssVars from 'css-vars-ponyfill'; import cssVars from 'css-vars-ponyfill';
@ -181,7 +180,6 @@ export default (element) => {
} }
} }
}); });
Vue.use(VueMasonry);
Vue.use(VueBlurHash); Vue.use(VueBlurHash);
Vue.use(I18NPlugin); Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin); Vue.use(UserPrefsPlugin);

8
src/views/admin/pages/home-page.vue
View File

@ -251,6 +251,10 @@ export default {
.home-section { .home-section {
@media screen and (max-width: 768px) {
margin-right: 25px;
}
&.home-section-repository{ &.home-section-repository{
position: relative; position: relative;
&>nav { &>nav {
@ -261,6 +265,10 @@ export default {
position: relative; position: relative;
margin-left: 52px; margin-left: 52px;
margin-bottom: 80px; margin-bottom: 80px;
@media screen and (max-width: 768px) {
padding-right: 0.75em;
}
} }
.section-connector { .section-connector {

60
src/views/admin/scss/_collection-home-cards.scss
View File

@ -10,24 +10,50 @@
animation-name: item-appear; animation-name: item-appear;
animation-duration: 0.5s; animation-duration: 0.5s;
&>div { &>ul {
width: calc(100% + var(--tainacan-container-padding)) !important; --column-count: 5;
--column-gap: 25px;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(3), width: calc(100% + var(--tainacan-container-padding)) !important;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(4), display: flex;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(5), flex-wrap: wrap;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(6), margin-top: 0.75em;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(7), margin-bottom: 1.6em;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(8), row-gap: 25px;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(9), column-gap: var(--column-gap,25px);
&>div>.tainacan-card:not(.always-visible-collections):nth-child(10) {
&>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: 1600px) {
--column-count: 4;
&:not(.always-visible-collections):nth-child(9),
&:not(.always-visible-collections):nth-child(10) {
display: none; 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) { @media screen and (max-width: 768px) {
&>div>.tainacan-card:nth-child(3), --column-count: 1;
&>div>.tainacan-card:nth-child(4) {
display: block;
} }
} }
} }
@ -35,20 +61,12 @@
.tainacan-card { .tainacan-card {
background-color: var(--tainacan-gray1); background-color: var(--tainacan-gray1);
padding: 0px; padding: 0px;
margin-top: 0.75em;
margin-bottom: 1.6em;
flex-basis: 0;
min-height: 135px; min-height: 135px;
cursor: pointer; cursor: pointer;
text-decoration: none !important; text-decoration: none !important;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@media screen and (max-width: 768px) {
max-width: 100%;
min-width: 100%;
}
&:hover .menu-list { &:hover .menu-list {
background-color: var(--tainacan-gray2); background-color: var(--tainacan-gray2);
a { background-color: var(--tainacan-gray2); } a { background-color: var(--tainacan-gray2); }

2
src/views/gutenberg-blocks/blocks/faceted-search/theme.js
View File

@ -23,7 +23,6 @@ import {
Numberinput Numberinput
} from 'buefy'; } from 'buefy';
import VTooltip from 'floating-vue'; import VTooltip from 'floating-vue';
import VueMasonry from 'vue-masonry-css';
import cssVars from 'css-vars-ponyfill'; import cssVars from 'css-vars-ponyfill';
import qs from 'qs'; import qs from 'qs';
import VueBlurHash from 'vue-blurhash'; import VueBlurHash from 'vue-blurhash';
@ -120,7 +119,6 @@ export default (element) => {
} }
} }
}); });
Vue.use(VueMasonry);
Vue.use(VueBlurHash); Vue.use(VueBlurHash);
Vue.use(I18NPlugin); Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin); Vue.use(UserPrefsPlugin);