Removes dependency of vue-masonry-css. #498.
This commit is contained in:
mateuswetah
parent
72c2a9c001
commit
635bf19546
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -2,82 +2,79 @@
|
|||
<div
|
||||
style="min-height: initial; position: relative"
|
||||
class="tainacan-cards-container">
|
||||
<template v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')">
|
||||
<ul class="new-collection-menu">
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getNewCollectionPath()"
|
||||
class="first-card">
|
||||
<div class="list-metadata">
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
|
||||
</span>
|
||||
<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"/>
|
||||
<ul
|
||||
v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')"
|
||||
class="new-collection-menu">
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getNewCollectionPath()"
|
||||
class="first-card">
|
||||
<div class="list-metadata">
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.get('items') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_metadata'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<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>
|
||||
</template>
|
||||
<template v-if="collections.length > 0 && !isLoading">
|
||||
<masonry
|
||||
:cols="{ default: 5, 1919: 4, 1407: 3, 1215: 2, 1023: 2, 767: 1 }"
|
||||
:gutter="25"
|
||||
style="width:100%;">
|
||||
<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 class="menu-text">{{ $i18n.get('items') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_metadata'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<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
|
||||
v-if="$userCaps.hasCapability('tnc_rep_edit_collections')"
|
||||
tag="a"
|
||||
|
|
@ -143,149 +140,149 @@
|
|||
</li>
|
||||
</ul>
|
||||
</router-link>
|
||||
<div
|
||||
v-if="collections.length > 0 && !isLoading"
|
||||
:key="index"
|
||||
v-for="(collection, index) of collections"
|
||||
class="tainacan-card"
|
||||
:class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }">
|
||||
<ul class="menu-list">
|
||||
<li v-if="!$adminOptions.hideHomeCollectionItemsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
|
||||
:aria-label="$i18n.get('label_collection_items')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('items'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collection.id) }"
|
||||
:aria-label="$i18n.get('add_one_item')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('add_one_item'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_settings')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_settings'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('metadata', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('filters', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_activities')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('activities'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton">
|
||||
<a
|
||||
:href="collection.url"
|
||||
target="_blank"
|
||||
:aria-label="$i18n.get('label_view_collection_on_website')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_view_collection_on_website'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getCollectionPath(collection.id)"
|
||||
class="card-body">
|
||||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
v-if="collection.thumbnail != undefined"
|
||||
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
|
||||
</li>
|
||||
<li
|
||||
v-if="collections.length > 0 && !isLoading"
|
||||
:key="index"
|
||||
v-for="(collection, index) of collections"
|
||||
class="tainacan-card"
|
||||
:class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }">
|
||||
<ul class="menu-list">
|
||||
<li v-if="!$adminOptions.hideHomeCollectionItemsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
|
||||
:aria-label="$i18n.get('label_collection_items')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('items'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collection.id) }"
|
||||
:aria-label="$i18n.get('add_one_item')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('add_one_item'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_settings')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_settings'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('metadata', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('filters', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_activities')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('activities'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton">
|
||||
<a
|
||||
:href="collection.url"
|
||||
target="_blank"
|
||||
:aria-label="$i18n.get('label_view_collection_on_website')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_view_collection_on_website'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getCollectionPath(collection.id)"
|
||||
class="card-body">
|
||||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
v-if="collection.thumbnail != undefined"
|
||||
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
|
||||
|
||||
<!-- Name -->
|
||||
<div class="metadata-title">
|
||||
<p>{{ collection.name != undefined ? collection.name : '' }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</masonry>
|
||||
</template>
|
||||
<!-- Name -->
|
||||
<div class="metadata-title">
|
||||
<p>{{ collection.name != undefined ? collection.name : '' }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -251,6 +251,10 @@ export default {
|
|||
|
||||
.home-section {
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
&.home-section-repository{
|
||||
position: relative;
|
||||
&>nav {
|
||||
|
|
@ -261,6 +265,10 @@ export default {
|
|||
position: relative;
|
||||
margin-left: 52px;
|
||||
margin-bottom: 80px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.section-connector {
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue