First adjustments on implementing new home page for plugin.
This commit is contained in:
parent
72b909f5ed
commit
1687556ddd
|
@ -2,6 +2,11 @@
|
||||||
<div
|
<div
|
||||||
id="tainacan-admin-app"
|
id="tainacan-admin-app"
|
||||||
class="columns is-fullheight">
|
class="columns is-fullheight">
|
||||||
|
<template v-if="activeRoute == 'HomePage'">
|
||||||
|
<tainacan-header />
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
<primary-menu
|
<primary-menu
|
||||||
:active-route="activeRoute"
|
:active-route="activeRoute"
|
||||||
:is-menu-compressed="isMenuCompressed"/>
|
:is-menu-compressed="isMenuCompressed"/>
|
||||||
|
@ -20,6 +25,7 @@
|
||||||
class="column is-main-content">
|
class="column is-main-content">
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,161 @@
|
||||||
|
<template>
|
||||||
|
<div class="tainacan-cards-container">
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
:to="$routerHelper.getNewCollectionPath()"
|
||||||
|
class="tainacan-card">
|
||||||
|
<b-icon
|
||||||
|
size="is-large"
|
||||||
|
icon="folder-plus" />
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
:to="$routerHelper.getCollectionPath(collection.id)"
|
||||||
|
v-if="collections.length > 0 && !isLoading"
|
||||||
|
:key="index"
|
||||||
|
v-for="(collection, index) of collections"
|
||||||
|
class="tainacan-card">
|
||||||
|
<!-- Name -->
|
||||||
|
<div class="metadata-title">
|
||||||
|
<p
|
||||||
|
v-tooltip="{
|
||||||
|
content: collection.name != undefined ? collection.name : '',
|
||||||
|
html: true,
|
||||||
|
autoHide: false,
|
||||||
|
placement: 'auto-start'
|
||||||
|
}">
|
||||||
|
{{ collection.name != undefined ? collection.name : '' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- Remaining metadata -->
|
||||||
|
<div class="media">
|
||||||
|
|
||||||
|
<img
|
||||||
|
v-if="collection.thumbnail != undefined"
|
||||||
|
:src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)">
|
||||||
|
|
||||||
|
<div class="list-metadata media-body">
|
||||||
|
<!-- Description -->
|
||||||
|
<p
|
||||||
|
v-tooltip="{
|
||||||
|
content: collection.description != undefined && collection.description != '' ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_informed') + `</span>`,
|
||||||
|
html: true,
|
||||||
|
autoHide: false,
|
||||||
|
placement: 'auto-start'
|
||||||
|
}"
|
||||||
|
class="metadata-description"
|
||||||
|
v-html="collection.description != undefined && collection.description != '' ? getLimitedDescription(collection.description) : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_informed') + `</span>`" />
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="menu-list level-right">
|
||||||
|
<li class="level-item">
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
|
||||||
|
:aria-label="$i18n.get('label_collection_items')">
|
||||||
|
<b-tooltip
|
||||||
|
:label="$i18n.get('items')"
|
||||||
|
position="is-bottom">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="mdi mdi-file-multiple"/>
|
||||||
|
</span>
|
||||||
|
</b-tooltip>
|
||||||
|
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="level-item">
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
|
||||||
|
:aria-label="$i18n.get('label_settings')">
|
||||||
|
<b-tooltip
|
||||||
|
:label="$i18n.get('label_settings')"
|
||||||
|
position="is-bottom">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="mdi mdi-settings"/>
|
||||||
|
</span>
|
||||||
|
</b-tooltip>
|
||||||
|
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="level-item">
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
|
||||||
|
:aria-label="$i18n.get('label_collection_metadata')">
|
||||||
|
<b-tooltip
|
||||||
|
:label="$i18n.getFrom('metadata', 'name')"
|
||||||
|
position="is-bottom">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="mdi mdi-format-list-bulleted-type"/>
|
||||||
|
</span>
|
||||||
|
</b-tooltip>
|
||||||
|
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="level-item">
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
|
||||||
|
:aria-label="$i18n.get('label_collection_filters')">
|
||||||
|
<b-tooltip
|
||||||
|
animated
|
||||||
|
:label="$i18n.getFrom('filters', 'name')"
|
||||||
|
position="is-bottom">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="mdi mdi-filter"/>
|
||||||
|
</span>
|
||||||
|
</b-tooltip>
|
||||||
|
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="level-item">
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
:to="{ path: $routerHelper.getCollectionEventsPath(collection.id) }"
|
||||||
|
:aria-label="$i18n.get('label_collection_events')">
|
||||||
|
<b-tooltip
|
||||||
|
:label="$i18n.get('events')"
|
||||||
|
position="is-bottom">
|
||||||
|
<activities-icon />
|
||||||
|
</b-tooltip>
|
||||||
|
<!-- <span class="menu-text">{{ $i18n.get('events') }}</span> -->
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CollectionsHomeList',
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
isLoading: false,
|
||||||
|
collections: Array,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getLimitedDescription(description) {
|
||||||
|
let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 155 : 330;
|
||||||
|
return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
@import "../../scss/_variables.scss";
|
||||||
|
@import "../../scss/_collection-home-cards.scss";
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
|
||||||
import qs from 'qs';
|
import qs from 'qs';
|
||||||
|
|
||||||
// Main Pages
|
// Main Pages
|
||||||
|
import HomePage from '../pages/singles/home-page.vue'
|
||||||
import CollectionsPage from '../pages/lists/collections-page.vue'
|
import CollectionsPage from '../pages/lists/collections-page.vue'
|
||||||
import CollectionPage from '../pages/singles/collection-page.vue'
|
import CollectionPage from '../pages/singles/collection-page.vue'
|
||||||
import ItemsPage from '../pages/lists/items-page.vue'
|
import ItemsPage from '../pages/lists/items-page.vue'
|
||||||
|
@ -35,7 +36,8 @@ const i18nGet = function (key) {
|
||||||
};
|
};
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', redirect:'/collections' },
|
{ path: '/', redirect:'/home' },
|
||||||
|
{ path: '/home', name: 'HomePage', component: HomePage, meta: {title: 'Tainacan'} },
|
||||||
|
|
||||||
{ path: '/collections', name: 'CollectionsPage', component: CollectionsPage, meta: {title: i18nGet('title_repository_collections_page'), icon: 'folder-multiple'} },
|
{ path: '/collections', name: 'CollectionsPage', component: CollectionsPage, meta: {title: i18nGet('title_repository_collections_page'), icon: 'folder-multiple'} },
|
||||||
{ path: '/collections/new', name: 'CollectionCreationForm', component: CollectionEditionForm, meta: {title: i18nGet('title_create_collection'), icon: 'folder-multiple'} },
|
{ path: '/collections/new', name: 'CollectionCreationForm', component: CollectionEditionForm, meta: {title: i18nGet('title_create_collection'), icon: 'folder-multiple'} },
|
||||||
|
|
|
@ -0,0 +1,216 @@
|
||||||
|
<template>
|
||||||
|
<div class="home-page page-container">
|
||||||
|
<b-loading :active.sync="isLoadingCollections"/>
|
||||||
|
<section class="home-section">
|
||||||
|
<div class="home-section-header repository-section-header">
|
||||||
|
<div class="home-section-icon">
|
||||||
|
<b-icon icon="archive"/>
|
||||||
|
</div>
|
||||||
|
<h1>{{ $i18n.get('repository') }}</h1>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul class="repository-menu-list">
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
to="/collections">
|
||||||
|
<b-icon
|
||||||
|
size="is-small"
|
||||||
|
icon="folder-multiple"/>
|
||||||
|
<span class="menu-text">{{ $i18n.getFrom('collections', 'name') }}</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
to="/items">
|
||||||
|
<b-icon
|
||||||
|
size="is-small"
|
||||||
|
icon="file-multiple"/>
|
||||||
|
<span class="menu-text">{{ $i18n.getFrom('items', 'name') }}</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
to="/metadata">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="mdi mdi-format-list-bulleted-type"/>
|
||||||
|
</span>
|
||||||
|
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
to="/filters">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="mdi mdi-filter"/>
|
||||||
|
</span>
|
||||||
|
<span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
to="/taxonomies">
|
||||||
|
<taxonomies-icon />
|
||||||
|
<span class="menu-text">{{ $i18n.getFrom('taxonomies', 'name') }}</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
to="/events">
|
||||||
|
<activities-icon /><span class="menu-text">{{ $i18n.get('events') }}</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
tag="a"
|
||||||
|
to="/importers">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="mdi mdi-24px mdi-import"/>
|
||||||
|
</span>
|
||||||
|
<span class="menu-text menu-text-import">{{ $i18n.get('importers') }}</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="home-section">
|
||||||
|
<div class="home-section-header collections-section-header">
|
||||||
|
<div class="home-section-icon">
|
||||||
|
<b-icon icon="folder-multiple"/>
|
||||||
|
</div>
|
||||||
|
<h1>{{ $i18n.get('collections') }}</h1>
|
||||||
|
</div>
|
||||||
|
<collections-home-list
|
||||||
|
:is-loading="isLoading"
|
||||||
|
:collections="collections"/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CollectionsHomeList from '../../components/lists/collections-home-list.vue';
|
||||||
|
import ActivitiesIcon from '../../components/other/activities-icon.vue';
|
||||||
|
import TaxonomiesIcon from '../../components/other/taxonomies-icon.vue';
|
||||||
|
import { mapActions, mapGetters } from 'vuex';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HomePage',
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isLoadingCollections: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
CollectionsHomeList,
|
||||||
|
ActivitiesIcon,
|
||||||
|
TaxonomiesIcon
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
collections() {
|
||||||
|
return this.getCollections();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('collection', [
|
||||||
|
'fetchCollections',
|
||||||
|
'cleanCollections'
|
||||||
|
]),
|
||||||
|
...mapGetters('collection', [
|
||||||
|
'getCollections'
|
||||||
|
]),
|
||||||
|
loadCollections() {
|
||||||
|
this.cleanCollections();
|
||||||
|
this.isLoadingCollections = true;
|
||||||
|
this.fetchCollections({ 'page': 1, 'collectionsPerPage': 5, 'status': 'publish' })
|
||||||
|
.then(() => {
|
||||||
|
this.isLoadingCollections = false;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.isLoadingCollections = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.loadCollections();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
@import '../../scss/_variables.scss';
|
||||||
|
|
||||||
|
.home-page {
|
||||||
|
margin-top: $header-height;
|
||||||
|
background-color: $gray1;
|
||||||
|
|
||||||
|
.home-section {
|
||||||
|
.home-section-header {
|
||||||
|
width: 100%;
|
||||||
|
margin: 1rem 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 52px;
|
||||||
|
|
||||||
|
.home-section-icon {
|
||||||
|
background-color: white;
|
||||||
|
padding: 0.75rem;
|
||||||
|
height: 52px;
|
||||||
|
width: 52px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: 1.375rem;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.75rem 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.repository-section-header {
|
||||||
|
background-color: $blue5;
|
||||||
|
.home-section-icon {
|
||||||
|
color: $blue5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.collections-section-header {
|
||||||
|
background-color: $turquoise5;
|
||||||
|
.home-section-icon {
|
||||||
|
color: $turquoise5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.repository-menu-list {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
background-color: $blue5;
|
||||||
|
height: 90px;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 1rem;
|
||||||
|
|
||||||
|
&:first-of-type { margin-left: 0px; }
|
||||||
|
&:last-of-type { margin-right: 0px; }
|
||||||
|
|
||||||
|
a { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,138 @@
|
||||||
|
.tainacan-cards-container {
|
||||||
|
min-height: 50vh;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
animation-name: item-appear;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
|
||||||
|
.selected-card {
|
||||||
|
background-color: $turquoise1;
|
||||||
|
.metadata-title {
|
||||||
|
background-color: $turquoise2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tainacan-card {
|
||||||
|
background-color: white;
|
||||||
|
padding: 0px;
|
||||||
|
flex-basis: 0;
|
||||||
|
margin: 15px;
|
||||||
|
max-width: 425px;
|
||||||
|
min-width: 425px;
|
||||||
|
min-height: 210px;
|
||||||
|
max-height: 210px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none !important;
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 171px;
|
||||||
|
max-height: 171px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 130px !important;
|
||||||
|
height: 130px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $gray1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 1.0rem;
|
||||||
|
margin-top: 7px;
|
||||||
|
}
|
||||||
|
.actions-area {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
top: -5px;
|
||||||
|
padding-right: 12px;
|
||||||
|
//width: 80px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: visibility 0.2s, opacity 0.2s;
|
||||||
|
}
|
||||||
|
&:hover .actions-area {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-line {
|
||||||
|
height: 1px;
|
||||||
|
background-color: $gray2;
|
||||||
|
margin-left: -44px;
|
||||||
|
margin-right: -44px;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
.metadata-title {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 0.6rem 4.75rem 0.5rem 2.75rem;
|
||||||
|
margin-bottom: -27px;
|
||||||
|
min-height: 40px;
|
||||||
|
font-size: 0.875rem !important;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
color: black !important;
|
||||||
|
p {
|
||||||
|
color: black !important;
|
||||||
|
font-size: 0.875rem !important;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover .metadata-title {
|
||||||
|
background-color: $gray2 !important;
|
||||||
|
p { text-decoration: none !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.media {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.list-metadata {
|
||||||
|
padding: 0.75rem 1.375rem;
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 170px;
|
||||||
|
color: $gray4;
|
||||||
|
|
||||||
|
p.metadata-description {
|
||||||
|
font-size: 0.6875rem !important;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
max-height: 152px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-author-creation {
|
||||||
|
font-size: 0.6875rem !important;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue