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",

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

@ -2,82 +2,79 @@
<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')"
<li> class="new-collection-menu">
<router-link <li>
tag="a" <router-link
:to="$routerHelper.getNewCollectionPath()" tag="a"
class="first-card"> :to="$routerHelper.getNewCollectionPath()"
<div class="list-metadata"> class="first-card">
<span class="icon is-large"> <div class="list-metadata">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/> <span class="icon is-large">
</span> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
<div>{{ $i18n.get('label_create_collection') }}</div>
</div>
</router-link>
</li>
<li>
<router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_items')">
<span
v-tooltip="{
content: $i18n.get('label_collection_items'),
autoHide: true,
placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon is-medium">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/>
</span> </span>
<span class="menu-text">{{ $i18n.get('items') }}</span> <div>{{ $i18n.get('label_create_collection') }}</div>
</router-link> </div>
</li> </router-link>
<li> </li>
<router-link <li>
tag="a" <router-link
:to="{ path: $routerHelper.getNewCollectionPath() }" tag="a"
:aria-label="$i18n.get('label_collection_metadata')"> :to="{ path: $routerHelper.getNewCollectionPath() }"
<span :aria-label="$i18n.get('label_collection_items')">
v-tooltip="{ <span
content: $i18n.get('label_collection_metadata'), v-tooltip="{
autoHide: true, content: $i18n.get('label_collection_items'),
placement: 'auto', autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'] placement: 'auto',
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon is-medium"> }"
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/> class="icon is-medium">
</span> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/>
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> </span>
</router-link> <span class="menu-text">{{ $i18n.get('items') }}</span>
</li> </router-link>
<li> </li>
<router-link <li>
tag="a" <router-link
:to="{ path: $routerHelper.getNewCollectionPath() }" tag="a"
:aria-label="$i18n.get('label_collection_filters')"> :to="{ path: $routerHelper.getNewCollectionPath() }"
<span :aria-label="$i18n.get('label_collection_metadata')">
v-tooltip="{ <span
content: $i18n.get('label_collection_filters'), v-tooltip="{
autoHide: true, content: $i18n.get('label_collection_metadata'),
placement: 'auto', autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'] placement: 'auto',
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon is-medium"> }"
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/> class="icon is-medium">
</span> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
<span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> </span>
</router-link> <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
</li> </router-link>
</ul> </li>
</template> <li>
<template v-if="collections.length > 0 && !isLoading"> <router-link
<masonry tag="a"
:cols="{ default: 5, 1919: 4, 1407: 3, 1215: 2, 1023: 2, 767: 1 }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:gutter="25" :aria-label="$i18n.get('label_collection_filters')">
style="width:100%;"> <span
v-tooltip="{
content: $i18n.get('label_collection_filters'),
autoHide: true,
placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon is-medium">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/>
</span>
<span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
</router-link>
</li>
</ul>
<ul v-if="collections.length > 0 && !isLoading">
<li>
<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,149 +140,149 @@
</li> </li>
</ul> </ul>
</router-link> </router-link>
<div </li>
v-if="collections.length > 0 && !isLoading" <li
:key="index" v-if="collections.length > 0 && !isLoading"
v-for="(collection, index) of collections" :key="index"
class="tainacan-card" v-for="(collection, index) of collections"
:class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }"> class="tainacan-card"
<ul class="menu-list"> :class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }">
<li v-if="!$adminOptions.hideHomeCollectionItemsButton"> <ul class="menu-list">
<router-link <li v-if="!$adminOptions.hideHomeCollectionItemsButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }" tag="a"
:aria-label="$i18n.get('label_collection_items')"> :to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
<span :aria-label="$i18n.get('label_collection_items')">
v-tooltip.bottom="{ <span
content: $i18n.get('items'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('items'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/>
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton"> </li>
<router-link <li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton">
tag="a" <router-link
:to="{ path: $routerHelper.getNewItemPath(collection.id) }" tag="a"
:aria-label="$i18n.get('add_one_item')"> :to="{ path: $routerHelper.getNewItemPath(collection.id) }"
<span :aria-label="$i18n.get('add_one_item')">
v-tooltip.bottom="{ <span
content: $i18n.get('add_one_item'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('add_one_item'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/>
<!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton"> </li>
<router-link <li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_settings')"> :to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
<span :aria-label="$i18n.get('label_settings')">
v-tooltip.bottom="{ <span
content: $i18n.get('label_settings'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('label_settings'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/>
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton"> </li>
<router-link <li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_collection_metadata')"> :to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
<span :aria-label="$i18n.get('label_collection_metadata')">
v-tooltip.bottom="{ <span
content: $i18n.getFrom('metadata', 'name'), v-tooltip.bottom="{
autoHide: true, content: $i18n.getFrom('metadata', 'name'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/>
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton"> </li>
<router-link <li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_collection_filters')"> :to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
<span :aria-label="$i18n.get('label_collection_filters')">
v-tooltip.bottom="{ <span
content: $i18n.getFrom('filters', 'name'), v-tooltip.bottom="{
autoHide: true, content: $i18n.getFrom('filters', 'name'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/>
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
</li> </router-link>
<li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton"> </li>
<router-link <li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_collection_activities')"> :to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }"
<span :aria-label="$i18n.get('label_collection_activities')">
v-tooltip.bottom="{ <span
content: $i18n.get('activities'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('activities'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/>
<!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> -->
</li> </router-link>
<li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton"> </li>
<a <li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton">
:href="collection.url" <a
target="_blank" :href="collection.url"
:aria-label="$i18n.get('label_view_collection_on_website')"> target="_blank"
<span :aria-label="$i18n.get('label_view_collection_on_website')">
v-tooltip.bottom="{ <span
content: $i18n.get('label_view_collection_on_website'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('label_view_collection_on_website'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
</a> </span>
</li> </a>
</ul> </li>
<router-link </ul>
tag="a" <router-link
:to="$routerHelper.getCollectionPath(collection.id)" tag="a"
class="card-body"> :to="$routerHelper.getCollectionPath(collection.id)"
<img class="card-body">
:alt="$i18n.get('label_thumbnail')" <img
v-if="collection.thumbnail != undefined" :alt="$i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')"> v-if="collection.thumbnail != undefined"
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
<!-- Name -->
<div class="metadata-title"> <!-- Name -->
<p>{{ collection.name != undefined ? collection.name : '' }}</p> <div class="metadata-title">
</div> <p>{{ collection.name != undefined ? collection.name : '' }}</p>
</router-link> </div>
</div> </router-link>
</masonry> </li>
</template> </ul>
</div> </div>
</template> </template>

14
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();
this.masonry = new Masonry( '.tainacan-' + this.viewMode + '-container', { if (this.viewMode == 'masonry' || this.viewMode == 'records') {
itemSelector: 'li', this.masonry = new Masonry( '.tainacan-' + this.viewMode + '-container', {
columnWidth: '.tainacan-' + this.viewMode + '-grid-sizer', itemSelector: 'li',
gutter: this.viewMode == 'masonry' ? 25 : 30, columnWidth: '.tainacan-' + this.viewMode + '-grid-sizer',
percentPosition: true gutter: this.viewMode == 'masonry' ? 25 : 30,
}); 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);

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

@ -250,6 +250,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;
@ -260,7 +264,11 @@ export default {
&.home-section-collection { &.home-section-collection {
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 {

64
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 {
--column-count: 5;
--column-gap: 25px;
width: calc(100% + var(--tainacan-container-padding)) !important; 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), &>li {
&>div>.tainacan-card:not(.always-visible-collections):nth-child(4), flex-basis: calc((100%/var(--column-count, 5)) - var(--column-gap,25px));
&>div>.tainacan-card:not(.always-visible-collections):nth-child(5), min-width: calc((100%/var(--column-count, 5)) - var(--column-gap,25px));
&>div>.tainacan-card:not(.always-visible-collections):nth-child(6), flex-shrink: 0;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(7), flex-grow: 1;
&>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;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 1600px) {
&>div>.tainacan-card:nth-child(3), --column-count: 4;
&>div>.tainacan-card:nth-child(4) {
display: block; &: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 { .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);