First adjustments on implementing new home page for plugin.

This commit is contained in:
Mateus Machado Luna 2018-09-17 18:11:05 -03:00
parent 72b909f5ed
commit 1687556ddd
5 changed files with 541 additions and 18 deletions

View File

@ -2,24 +2,30 @@
<div <div
id="tainacan-admin-app" id="tainacan-admin-app"
class="columns is-fullheight"> class="columns is-fullheight">
<primary-menu <template v-if="activeRoute == 'HomePage'">
:active-route="activeRoute" <tainacan-header />
:is-menu-compressed="isMenuCompressed"/>
<button
class="is-hidden-mobile"
id="menu-compress-button"
@click="isMenuCompressed = !isMenuCompressed">
<b-icon :icon="isMenuCompressed ? 'menu-right' : 'menu-left'" />
</button>
<tainacan-header />
<tainacan-repository-subheader
:is-repository-level="isRepositoryLevel"
:is-menu-compressed="isMenuCompressed"/>
<div
id="repository-container"
class="column is-main-content">
<router-view /> <router-view />
</div> </template>
<template v-else>
<primary-menu
:active-route="activeRoute"
:is-menu-compressed="isMenuCompressed"/>
<button
class="is-hidden-mobile"
id="menu-compress-button"
@click="isMenuCompressed = !isMenuCompressed">
<b-icon :icon="isMenuCompressed ? 'menu-right' : 'menu-left'" />
</button>
<tainacan-header />
<tainacan-repository-subheader
:is-repository-level="isRepositoryLevel"
:is-menu-compressed="isMenuCompressed"/>
<div
id="repository-container"
class="column is-main-content">
<router-view />
</div>
</template>
</div> </div>
</template> </template>

View File

@ -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>

View File

@ -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'} },

View File

@ -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>

View File

@ -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;
}
}
}
}
}