More layout adjustments and special buttons when colection list is empty.
This commit is contained in:
Mateus Machado Luna
parent
d720fbc41e
commit
c7752d07b8
|
|
@ -1,29 +1,29 @@
|
|||
<template>
|
||||
<div class="tainacan-cards-container">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getNewCollectionPath()"
|
||||
class="tainacan-card new-card">
|
||||
<div class="list-metadata">
|
||||
<b-icon
|
||||
size="is-large"
|
||||
icon="folder-plus" />
|
||||
<div>{{ $i18n.get('label_create_collection') }}</div>
|
||||
</div>
|
||||
<ul class="menu-list">
|
||||
<template v-if="collections.length <= 0 && !isLoading">
|
||||
<ul class="new-collection-menu">
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getNewCollectionPath()"
|
||||
class="first-card">
|
||||
<div class="list-metadata">
|
||||
<b-icon
|
||||
size="is-large"
|
||||
icon="folder-plus" />
|
||||
<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')">
|
||||
<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> -->
|
||||
<span class="icon is-medium">
|
||||
<i class="mdi mdi-36px mdi-file-multiple"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.get('items') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -31,14 +31,10 @@
|
|||
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> -->
|
||||
<span class="icon is-medium">
|
||||
<i class="mdi mdi-36px mdi-format-list-bulleted-type"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -46,134 +42,203 @@
|
|||
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> -->
|
||||
<span class="icon is-medium">
|
||||
<i class="mdi mdi-36px mdi-filter"/>
|
||||
</span>
|
||||
<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
|
||||
v-if="collection.thumbnail != undefined"
|
||||
:src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)">
|
||||
</template>
|
||||
<template v-else>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getNewCollectionPath()"
|
||||
class="tainacan-card new-card">
|
||||
<div class="list-metadata">
|
||||
<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
|
||||
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">
|
||||
<!-- Name -->
|
||||
<div class="metadata-title">
|
||||
<div class="list-metadata">
|
||||
<!-- 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>
|
||||
<!-- Description -->
|
||||
<p
|
||||
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,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
{{ collection.name != undefined ? collection.name : '' }}
|
||||
</p>
|
||||
}"
|
||||
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>
|
||||
<!-- 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">
|
||||
<li>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<ul class="menu-list">
|
||||
<li style="width: 100%;">
|
||||
<a
|
||||
:href="collection.url"
|
||||
:aria-label="$i18n.get('label_view_collection')">
|
||||
<b-tooltip
|
||||
:label="$i18n.get('label_view_collection')"
|
||||
position="is-bottom">
|
||||
<span class="icon">
|
||||
<i class="mdi mdi-eye"/>
|
||||
</span>
|
||||
</b-tooltip>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -203,6 +268,46 @@ export default {
|
|||
@import "../../scss/_variables.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>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="home-section-icon">
|
||||
<b-icon icon="archive"/>
|
||||
</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
|
||||
target="_blank"
|
||||
:href="baseURL + '/collections'">
|
||||
|
|
@ -130,7 +130,8 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
collections() {
|
||||
return this.getCollections();
|
||||
//return this.getCollections();
|
||||
return [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -168,11 +169,13 @@ export default {
|
|||
background-color: white;
|
||||
height: calc(100% - 52px);
|
||||
padding: 25px 8.333333333% !important;
|
||||
width: 100vw;
|
||||
|
||||
.home-section {
|
||||
.home-section-header {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
|
|
@ -191,12 +194,18 @@ export default {
|
|||
font-weight: normal;
|
||||
padding: 0.75rem 1.375rem;
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
margin-right: 2rem;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.menu-text { margin-left: 0.5rem;}
|
||||
}
|
||||
|
|
@ -223,18 +232,16 @@ export default {
|
|||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -0.75rem;
|
||||
|
||||
li {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
background-color: $gray1;
|
||||
height: 90px;
|
||||
flex-grow: 1;
|
||||
margin: 1rem;
|
||||
margin: 0.75rem;
|
||||
height: 120px;
|
||||
|
||||
&:first-of-type { margin-left: 0px; }
|
||||
&:last-of-type { margin-right: 0px; }
|
||||
min-width: 140px;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
justify-content: space-between;
|
||||
align-content: baseline;
|
||||
animation-name: item-appear;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
|
|
@ -19,7 +20,8 @@
|
|||
.tainacan-card {
|
||||
background-color: $gray1;
|
||||
padding: 0px;
|
||||
margin: 1rem 0;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-basis: 0;
|
||||
min-width: 48%;
|
||||
min-height: 120px;
|
||||
|
|
@ -28,16 +30,9 @@
|
|||
text-decoration: none !important;
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 171px;
|
||||
max-height: 171px;
|
||||
|
||||
img {
|
||||
width: 130px !important;
|
||||
height: 130px !important;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -51,6 +46,10 @@
|
|||
text-align: center;
|
||||
color: $turquoise5;
|
||||
max-width: calc(100% - 46px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.menu-list {
|
||||
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 {
|
||||
padding: 0.75rem 1.375rem;
|
||||
flex: 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue