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

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

@ -1,5 +1,56 @@
<template>
<div class="tainacan-cards-container">
<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')">
<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>
<router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_metadata')">
<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>
<router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_filters')">
<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>
</template>
<template v-else>
<router-link
tag="a"
:to="$routerHelper.getNewCollectionPath()"
@ -98,6 +149,19 @@
</div>
<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"
@ -174,6 +238,7 @@
</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>

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

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

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

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