From 15f1b60c0c295bb4a0112e768eee840eff10940c Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 14 Nov 2018 13:01:49 -0200
Subject: [PATCH] Css adjustments to metadata and filter list.

---
 src/admin/admin.vue                           |  2 +-
 .../lists/collections-home-list.vue           | 27 ++++++-----
 src/admin/components/lists/filters-list.vue   | 10 ++--
 src/admin/components/lists/metadata-list.vue  |  8 ++--
 src/admin/pages/lists/items-page.vue          |  4 +-
 src/admin/scss/_collection-home-cards.scss    | 47 ++++++++++---------
 src/admin/scss/_view-mode-grid.scss           |  2 +-
 7 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/src/admin/admin.vue b/src/admin/admin.vue
index e5b7fdf1e..95a8aaad0 100644
--- a/src/admin/admin.vue
+++ b/src/admin/admin.vue
@@ -16,7 +16,7 @@
                     @click="isMenuCompressed = !isMenuCompressed">
                 <span class="icon">
                     <i 
-                            :class="{ 'tainacan-icon-arrowleft' : isMenuCompressed, 'tainacan-icon-arrowright' : !isMenuCompressed }"
+                            :class="{ 'tainacan-icon-arrowleft' : !isMenuCompressed, 'tainacan-icon-arrowright' : isMenuCompressed }"
                             class="tainacan-icon tainacan-icon-20px"/>
                 </span>
             </button>
diff --git a/src/admin/components/lists/collections-home-list.vue b/src/admin/components/lists/collections-home-list.vue
index 75d2791fe..91256ab07 100644
--- a/src/admin/components/lists/collections-home-list.vue
+++ b/src/admin/components/lists/collections-home-list.vue
@@ -114,9 +114,7 @@
                         </li>
                     </ul>
                 </router-link>
-                <router-link
-                        tag="a"
-                        :to="$routerHelper.getCollectionPath(collection.id)"
+                <div
                         v-if="collections.length > 0 && !isLoading" 
                         :key="index"
                         v-for="(collection, index) of collections"
@@ -124,7 +122,8 @@
                     <ul class="menu-list">
                         <li>
                             <a 
-                                    :href="collection.url" 
+                                    :href="collection.url"
+                                    target="_blank" 
                                     :aria-label="$i18n.get('label_view_collection')">
                                 <b-tooltip 
                                         :label="$i18n.get('label_view_collection')"
@@ -212,16 +211,20 @@
                             </router-link> 
                         </li>
                     </ul>
-                          
-                    <img 
+                    <router-link
+                            tag="a"
+                            :to="$routerHelper.getCollectionPath(collection.id)"
+                            class="card-body">
+                        <img 
                             v-if="collection.thumbnail != undefined"
                             :src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)">  
-                    
-                    <!-- Name -->
-                    <div class="metadata-title">
-                        <p>{{ collection.name != undefined ? collection.name : '' }}</p>                            
-                    </div>
-                </router-link>
+                        
+                        <!-- Name -->
+                        <div class="metadata-title">
+                            <p>{{ collection.name != undefined ? collection.name : '' }}</p>                            
+                        </div>
+                    </router-link>      
+                </div>
             </masonry>
         </template>
     </div>
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index 1080f3f0e..c514f386e 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -48,7 +48,7 @@
                             </span>
                             <span class="icon icon-level-identifier">
                                 <i 
-                                    :class="{ 'tainacan-icon-collection has-text-turquoise5': filter.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': filter.collection_id != collectionId }"
+                                    :class="{ 'tainacan-icon-collections has-text-turquoise5': filter.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': filter.collection_id != collectionId }"
                                     class="tainacan-icon" />
                             </span> 
                             <span 
@@ -166,7 +166,7 @@
                             </span>
                             <span class="icon icon-level-identifier">
                                 <i 
-                                    :class="{ 'tainacan-icon-collection has-text-turquoise5': metadatum.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': metadatum.collection_id != collectionId }"
+                                    :class="{ 'tainacan-icon-collections has-text-turquoise5': metadatum.collection_id == collectionId, 'tainacan-icon-repository has-text-blue5': metadatum.collection_id != collectionId }"
                                     class="tainacan-icon" />
                             </span>  
                             <span class="metadatum-name">{{ metadatum.name }}</span>
@@ -561,6 +561,7 @@ export default {
 
             .handle {
                 padding-right: 6em;
+                white-space: nowrap;
             }
             .grip-icon { 
                 color: $gray3;
@@ -677,7 +678,7 @@ export default {
     .available-metadata-area {
         padding: 10px 0px 10px 10px;
         margin: 0;
-        max-width: 280px;
+        max-width: 340px;
         font-size: 14px;
 
         @media screen and (max-width: 769px) {
@@ -718,7 +719,7 @@ export default {
             }
             .icon {
                 position: relative;
-                bottom: 3px;
+                bottom: 4px;
             }
             .metadatum-name {
                 text-overflow: ellipsis;
@@ -728,6 +729,7 @@ export default {
                 margin-left: 0.4em;
                 display: inline-block;
                 max-width: 180px;
+                width: 60%;
             }
             &:after,
             &:before {
diff --git a/src/admin/components/lists/metadata-list.vue b/src/admin/components/lists/metadata-list.vue
index f461eefef..01a172147 100644
--- a/src/admin/components/lists/metadata-list.vue
+++ b/src/admin/components/lists/metadata-list.vue
@@ -53,7 +53,7 @@
                                     <span class="icon icon-level-identifier">
                                         <i 
                                             :class="{ 
-                                                'tainacan-icon-collection has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                                'tainacan-icon-collections has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
                                                 'tainacan-icon-repository has-text-blue5': (metadatum.collection_id == 'default') || isRepositoryLevel
                                             }"
                                             class="tainacan-icon" />
@@ -863,6 +863,7 @@ export default {
             
             .handle {
                 padding-right: 6em;
+                white-space: nowrap;
             }
             .grip-icon { 
                 color: $gray3; 
@@ -977,7 +978,7 @@ export default {
     .available-metadata-area {
         padding: 10px 0px 10px 10px;
         margin: 0;
-        max-width: 280px;
+        max-width: 340px;
         font-size: 14px;
 
         @media screen and (max-width: 769px) {
@@ -1027,7 +1028,8 @@ export default {
                 font-weight: bold;
                 margin-left: 0.4em;
                 display: inline-block;
-                max-width: 200px;
+                max-width: 180px;
+                width: 60%;
             }
             &:after,
             &:before {
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 1cec6e132..ad8c33d47 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -26,7 +26,7 @@
                 @click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
             <span class="icon">
                 <i 
-                        :class="{ 'tainacan-icon-arrowleft' : isFiltersMenuCompressed, 'tainacan-icon-arrowright' : !isFiltersMenuCompressed }"
+                        :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
                         class="tainacan-icon tainacan-icon-20px"/>
             </span>
         </button>
@@ -39,7 +39,7 @@
                 @click="isFilterModalActive = !isFilterModalActive">
             <span class="icon">
                 <i 
-                        :class="{ 'tainacan-icon-arrowleft' : isFiltersMenuCompressed, 'tainacan-icon-arrowright' : !isFiltersMenuCompressed }"
+                        :class="{ 'tainacan-icon-arrowleft' : !isFiltersMenuCompressed, 'tainacan-icon-arrowright' : isFiltersMenuCompressed }"
                         class="tainacan-icon tainacan-icon-20px"/>
             </span>
             <span class="text">{{ $i18n.get('filters') }}</span>
diff --git a/src/admin/scss/_collection-home-cards.scss b/src/admin/scss/_collection-home-cards.scss
index 674a3abd8..26b07ab8b 100644
--- a/src/admin/scss/_collection-home-cards.scss
+++ b/src/admin/scss/_collection-home-cards.scss
@@ -32,12 +32,6 @@
             a { background-color: $gray2; }
         }
 
-        img {
-            width: 96px;
-            height: 96px;
-            border-radius: 0px;
-        }
-
         &.new-card {
             .list-metadata { 
                 text-align: center;
@@ -69,21 +63,6 @@
                 align-items: center;
             }
         }
-
-        .metadata-title {
-            overflow: hidden;
-            padding: 0.75rem 1rem;
-            flex-basis: calc(100% - 96px);
-            
-            p {
-                color: black !important;
-                font-size: 0.875rem !important; 
-                margin-bottom: 0;
-            }
-        }
-        &:hover .metadata-title {
-            p { text-decoration: none !important; }
-        }
         
         .menu-list {
             width: 100%;
@@ -102,7 +81,31 @@
                 }
             }
         }
-    
+
+        .card-body {
+            width: 100%;
+            display: flex;
+            
+            img {
+                width: 96px;
+                height: 96px;
+                border-radius: 0px;
+            }
+            .metadata-title {
+                overflow: hidden;
+                padding: 0.75rem 1rem;
+                flex-basis: calc(100% - 96px);
+                
+                p {
+                    color: black !important;
+                    font-size: 0.875rem !important; 
+                    margin-bottom: 0;
+                }
+            }
+            &:hover .metadata-title {
+                p { text-decoration: none !important; }
+            }
+        }    
     }
 }
 
diff --git a/src/admin/scss/_view-mode-grid.scss b/src/admin/scss/_view-mode-grid.scss
index b83e4bd16..be1384eba 100644
--- a/src/admin/scss/_view-mode-grid.scss
+++ b/src/admin/scss/_view-mode-grid.scss
@@ -53,8 +53,8 @@
         }
 
         img {
-            min-width: 255px;
             max-width: 255px;
+            max-height: 255px;
             height: auto;
             border-radius: 0px;
             margin-bottom: -5px;