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

src/admin/components/lists/collections-home-list.vue

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

src/admin/pages/singles/home-page.vue

@@ -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;
-
+                min-width: 140px; 
-                &:first-of-type { margin-left: 0px; }
-                &:last-of-type { margin-right: 0px; }
 
                 a { 
                     width: 100%;

src/admin/scss/_collection-home-cards.scss

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