tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More layout adjustments and special buttons when colection list is empty.

This commit is contained in:
Mateus Machado Luna 2018-09-24 15:37:52 -03:00
parent d720fbc41e
commit c7752d07b8
3 changed files with 285 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,29 @@
<template> <template>
<div class="tainacan-cards-container"> <div class="tainacan-cards-container">
<router-link <template v-if="collections.length <= 0 && !isLoading">
tag="a" <ul class="new-collection-menu">
:to="$routerHelper.getNewCollectionPath()" <li>
class="tainacan-card new-card"> <router-link
<div class="list-metadata"> tag="a"
<b-icon :to="$routerHelper.getNewCollectionPath()"
size="is-large" class="first-card">
icon="folder-plus" /> <div class="list-metadata">
<div>{{ $i18n.get('label_create_collection') }}</div> <b-icon
</div> size="is-large"
<ul class="menu-list"> icon="folder-plus" />
<div>{{ $i18n.get('label_create_collection') }}</div>
</div>
</router-link>
</li>
<li> <li>
<router-link <router-link
tag="a" tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_items')"> :aria-label="$i18n.get('label_collection_items')">
<b-tooltip <span class="icon is-medium">
:label="$i18n.get('items')" <i class="mdi mdi-36px mdi-file-multiple"/>
position="is-bottom"> </span>
<span class="icon"> <span class="menu-text">{{ $i18n.get('items') }}</span>
<i class="mdi mdi-file-multiple"/>
</span>
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
</router-link> </router-link>
</li> </li>
<li> <li>
@ -31,14 +31,10 @@
tag="a" tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_metadata')"> :aria-label="$i18n.get('label_collection_metadata')">
<b-tooltip <span class="icon is-medium">
:label="$i18n.getFrom('metadata', 'name')" <i class="mdi mdi-36px mdi-format-list-bulleted-type"/>
position="is-bottom"> </span>
<span class="icon"> <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
<i class="mdi mdi-format-list-bulleted-type"/>
</span>
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
</router-link> </router-link>
</li> </li>
<li> <li>
@ -46,134 +42,203 @@
tag="a" tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_filters')"> :aria-label="$i18n.get('label_collection_filters')">
<b-tooltip <span class="icon is-medium">
animated <i class="mdi mdi-36px mdi-filter"/>
:label="$i18n.getFrom('filters', 'name')" </span>
position="is-bottom"> <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
<span class="icon">
<i class="mdi mdi-filter"/>
</span>
</b-tooltip>
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
</router-link> </router-link>
</li> </li>
</ul> </ul>
</router-link> </template>
<router-link <template v-else>
tag="a" <router-link
:to="$routerHelper.getCollectionPath(collection.id)" tag="a"
v-if="collections.length > 0 && !isLoading" :to="$routerHelper.getNewCollectionPath()"
:key="index" class="tainacan-card new-card">
v-for="(collection, index) of collections" <div class="list-metadata">
class="tainacan-card"> <b-icon
size="is-large"
icon="folder-plus" />
<div>{{ $i18n.get('label_create_collection') }}</div>
</div>
<ul class="menu-list">
<li>
<router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }"
: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>
<router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }"
: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>
<router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }"
: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>
</ul>
</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">
<img <img
v-if="collection.thumbnail != undefined" v-if="collection.thumbnail != undefined"
:src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)"> :src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)">
<div class="list-metadata"> <div class="list-metadata">
<!-- Name --> <!-- Name -->
<div class="metadata-title"> <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>
<!-- Description -->
<p <p
v-tooltip="{ v-tooltip="{
content: collection.name != undefined ? collection.name : '', content: collection.description != undefined && collection.description != '' ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_informed') + `</span>`,
html: true, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start' placement: 'auto-start'
}"> }"
{{ collection.name != undefined ? collection.name : '' }} class="metadata-description"
</p> 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>
<!-- 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>
<ul class="menu-list"> <ul class="menu-list">
<li> <li style="width: 100%;">
<router-link <a
tag="a" :href="collection.url"
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }" :aria-label="$i18n.get('label_view_collection')">
:aria-label="$i18n.get('label_collection_items')"> <b-tooltip
<b-tooltip :label="$i18n.get('label_view_collection')"
:label="$i18n.get('items')" position="is-bottom">
position="is-bottom"> <span class="icon">
<span class="icon"> <i class="mdi mdi-eye"/>
<i class="mdi mdi-file-multiple"/> </span>
</span> </b-tooltip>
</b-tooltip> </a>
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> --> </li>
</router-link> <li>
</li> <router-link
<li> tag="a"
<router-link :to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
tag="a" :aria-label="$i18n.get('label_collection_items')">
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }" <b-tooltip
:aria-label="$i18n.get('label_settings')"> :label="$i18n.get('items')"
<b-tooltip position="is-bottom">
:label="$i18n.get('label_settings')" <span class="icon">
position="is-bottom"> <i class="mdi mdi-file-multiple"/>
<span class="icon"> </span>
<i class="mdi mdi-settings"/> </b-tooltip>
</span> <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
</b-tooltip> </router-link>
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> --> </li>
</router-link> <li>
</li> <router-link
<li> tag="a"
<router-link :to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
tag="a" :aria-label="$i18n.get('label_settings')">
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }" <b-tooltip
:aria-label="$i18n.get('label_collection_metadata')"> :label="$i18n.get('label_settings')"
<b-tooltip position="is-bottom">
:label="$i18n.getFrom('metadata', 'name')" <span class="icon">
position="is-bottom"> <i class="mdi mdi-settings"/>
<span class="icon"> </span>
<i class="mdi mdi-format-list-bulleted-type"/> </b-tooltip>
</span> <!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
</b-tooltip> </router-link>
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> --> </li>
</router-link> <li>
</li> <router-link
<li> tag="a"
<router-link :to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
tag="a" :aria-label="$i18n.get('label_collection_metadata')">
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }" <b-tooltip
:aria-label="$i18n.get('label_collection_filters')"> :label="$i18n.getFrom('metadata', 'name')"
<b-tooltip position="is-bottom">
animated <span class="icon">
:label="$i18n.getFrom('filters', 'name')" <i class="mdi mdi-format-list-bulleted-type"/>
position="is-bottom"> </span>
<span class="icon"> </b-tooltip>
<i class="mdi mdi-filter"/> <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
</span> </router-link>
</b-tooltip> </li>
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> --> <li>
</router-link> <router-link
</li> tag="a"
<li> :to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
<router-link :aria-label="$i18n.get('label_collection_filters')">
tag="a" <b-tooltip
:to="{ path: $routerHelper.getCollectionEventsPath(collection.id) }" animated
:aria-label="$i18n.get('label_collection_events')"> :label="$i18n.getFrom('filters', 'name')"
<b-tooltip position="is-bottom">
:label="$i18n.get('events')" <span class="icon">
position="is-bottom"> <i class="mdi mdi-filter"/>
<activities-icon /> </span>
</b-tooltip> </b-tooltip>
<!-- <span class="menu-text">{{ $i18n.get('events') }}</span> --> <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
</router-link> </router-link>
</li> </li>
</ul> <li>
</router-link> <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>
</template>
</div> </div>
</template> </template>
@ -203,6 +268,46 @@ export default {
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
@import "../../scss/_collection-home-cards.scss"; @import "../../scss/_collection-home-cards.scss";
.new-collection-menu {
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
li {
padding: 0.75rem;
display: flex;
background-color: $gray1;
flex-grow: 1;
margin: 0.75rem 0;
height: 120px;
max-width: 13%;
min-width: 140px;
text-align: center;
&:first-of-type {
width: 56.7%;
max-width: 56.7%;
}
a {
width: 100%;
color: $turquoise5;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
svg.taxonomies-icon,
svg.activities-icon {
fill: $turquoise5;
height: 34px;
width: 34px;
}
}
}
}
</style> </style>

23
src/admin/pages/singles/home-page.vue
View File

@ -6,7 +6,7 @@
<div class="home-section-icon"> <div class="home-section-icon">
<b-icon icon="archive"/> <b-icon icon="archive"/>
</div> </div>
<h1>{{ $i18n.get('repository') + ' ' }}<span class="has-text-bold">{{ repositoryName }}</span></h1> <h1>{{ $i18n.get('repository') + ' ' }}<span class="has-text-weight-semibold">{{ repositoryName }}</span></h1>
<a <a
target="_blank" target="_blank"
:href="baseURL + '/collections'"> :href="baseURL + '/collections'">
@ -130,7 +130,8 @@ export default {
}, },
computed: { computed: {
collections() { collections() {
return this.getCollections(); //return this.getCollections();
return [];
} }
}, },
methods: { methods: {
@ -168,11 +169,13 @@ export default {
background-color: white; background-color: white;
height: calc(100% - 52px); height: calc(100% - 52px);
padding: 25px 8.333333333% !important; padding: 25px 8.333333333% !important;
width: 100vw;
.home-section { .home-section {
.home-section-header { .home-section-header {
width: 100%; width: 100%;
margin: 1rem 0; margin-top: 1rem;
margin-bottom: 0.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
height: 52px; height: 52px;
@ -191,12 +194,18 @@ export default {
font-weight: normal; font-weight: normal;
padding: 0.75rem 1.375rem; padding: 0.75rem 1.375rem;
margin-right: auto; margin-right: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
a { a {
color: white; color: white;
margin-right: 2rem; margin-right: 2rem;
display: inline-flex; display: inline-flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.menu-text { margin-left: 0.5rem;} .menu-text { margin-left: 0.5rem;}
} }
@ -223,18 +232,16 @@ export default {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -0.75rem;
li { li {
padding: 0.75rem; padding: 0.75rem;
display: flex; display: flex;
background-color: $gray1; background-color: $gray1;
height: 90px;
flex-grow: 1; flex-grow: 1;
margin: 1rem; margin: 0.75rem;
height: 120px; height: 120px;
min-width: 140px;
&:first-of-type { margin-left: 0px; }
&:last-of-type { margin-right: 0px; }
a { a {
width: 100%; width: 100%;

29
src/admin/scss/_collection-home-cards.scss
View File

@ -6,6 +6,7 @@
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
justify-content: space-between; justify-content: space-between;
align-content: baseline;
animation-name: item-appear; animation-name: item-appear;
animation-duration: 0.5s; animation-duration: 0.5s;
@ -19,7 +20,8 @@
.tainacan-card { .tainacan-card {
background-color: $gray1; background-color: $gray1;
padding: 0px; padding: 0px;
margin: 1rem 0; margin-top: 0.75rem;
margin-bottom: 0.5rem;
flex-basis: 0; flex-basis: 0;
min-width: 48%; min-width: 48%;
min-height: 120px; min-height: 120px;
@ -28,16 +30,9 @@
text-decoration: none !important; text-decoration: none !important;
display: flex; display: flex;
@media screen and (max-width: 480px) { @media screen and (max-width: 768px) {
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;
min-height: 171px;
max-height: 171px;
img {
width: 130px !important;
height: 130px !important;
}
} }
img { img {
@ -51,6 +46,10 @@
text-align: center; text-align: center;
color: $turquoise5; color: $turquoise5;
max-width: calc(100% - 46px); max-width: calc(100% - 46px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
.menu-list { .menu-list {
flex-wrap: nowrap; flex-wrap: nowrap;
@ -59,6 +58,18 @@
} }
} }
&.first-card {
.list-metadata {
text-align: center;
color: $turquoise5;
max-width:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.list-metadata { .list-metadata {
padding: 0.75rem 1.375rem; padding: 0.75rem 1.375rem;
flex: 1; flex: 1;