First adjustments on implementing new home page for plugin.
This commit is contained in:
Mateus Machado Luna
parent
72b909f5ed
commit
1687556ddd
|
|
@ -2,6 +2,11 @@
|
|||
<div
|
||||
id="tainacan-admin-app"
|
||||
class="columns is-fullheight">
|
||||
<template v-if="activeRoute == 'HomePage'">
|
||||
<tainacan-header />
|
||||
<router-view />
|
||||
</template>
|
||||
<template v-else>
|
||||
<primary-menu
|
||||
:active-route="activeRoute"
|
||||
:is-menu-compressed="isMenuCompressed"/>
|
||||
|
|
@ -20,6 +25,7 @@
|
|||
class="column is-main-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</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';
|
||||
|
||||
// Main Pages
|
||||
import HomePage from '../pages/singles/home-page.vue'
|
||||
import CollectionsPage from '../pages/lists/collections-page.vue'
|
||||
import CollectionPage from '../pages/singles/collection-page.vue'
|
||||
import ItemsPage from '../pages/lists/items-page.vue'
|
||||
|
|
@ -35,7 +36,8 @@ const i18nGet = function (key) {
|
|||
};
|
||||
|
||||
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/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