From 244f4c04bdf61d25d773d98d8a7e78b2e65ba724 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Mon, 17 Dec 2018 12:21:50 -0200
Subject: [PATCH] Fixes style and adds tooltip to exporter and see colleciton
 buttons.

---
 .../tainacan-repository-subheader.vue         | 105 ++++++++++--------
 1 file changed, 60 insertions(+), 45 deletions(-)

diff --git a/src/admin/components/navigation/tainacan-repository-subheader.vue b/src/admin/components/navigation/tainacan-repository-subheader.vue
index bf0d2a044..d0bd7ce87 100644
--- a/src/admin/components/navigation/tainacan-repository-subheader.vue
+++ b/src/admin/components/navigation/tainacan-repository-subheader.vue
@@ -6,28 +6,44 @@
         <h1 v-if="isRepositoryLevel">{{ repositoryName }}</h1>
         <h1 v-else>{{ $i18n.get('collection') + '' }} <span class="has-text-weight-bold">{{ collectionName }}</span></h1>
 
-        <div>
-            <a
-                    @click="openAvailableExportersModal"
-                    class="button"
-                    id="exporter-collection-button"
-                    v-if="!isRepositoryLevel">
-            <span class="icon">
-                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-export"/>
-            </span>
-            </a>
-            <a
-                    :href="collectionURL"
-                    target="_blank"
-                    v-if="!isRepositoryLevel"
-                    class="button"
-                    id="view-collection-button">
-            <span class="icon">
-                <i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
-            </span>
-                {{ $i18n.get('label_view_collection') }}
-            </a>
-        </div>
+        <ul class="repository-subheader-icons">
+            <li
+                    v-tooltip="{
+                            content: $i18n.get('exporters'),
+                            autoHide: false,
+                            placement: 'bottom-start',
+                            classes: ['header-tooltips']
+                        }">
+                <a
+                        @click="openAvailableExportersModal"
+                        class="button"
+                        id="exporter-collection-button"
+                        v-if="!isRepositoryLevel">
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-export"/>
+                    </span>
+                </a>
+            </li>
+            <li     
+                    v-tooltip="{
+                            content: $i18n.get('label_view_collection'),
+                            autoHide: false,
+                            placement: 'bottom-end',
+                            classes: ['header-tooltips']
+                        }">
+                <a
+                        :href="collectionURL"
+                        target="_blank"
+                        v-if="!isRepositoryLevel"
+                        class="button"
+                        id="view-collection-button">
+                <span class="icon">
+                    <i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
+                </span>
+                    <!-- {{ $i18n.get('label_view_collection') }} -->
+                </a>
+            </li>
+        </ul>
 
 
     </div>
@@ -86,17 +102,24 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
     @import "../../scss/_variables.scss";
     
+    .header-tooltips .tooltip-inner {
+        color: $turquoise5;
+        font-size: 0.75rem;
+        font-weight: 400;
+        padding: 0.75rem;
+    }
+
     // Tainacan Header
     #tainacan-repository-subheader {
         background-color: $turquoise5;
         height: 42px;
         max-height: 42px;
         width: 100%;
-        overflow-y: hidden;
+        // overflow-y: hidden;
         padding-top: 10px;
         padding-bottom: 10px;
         padding-right: 0;
@@ -131,28 +154,20 @@ export default {
             transition: all 0.2s linear;
         }
 
-        #view-collection-button {
-            border: none;
-            border-radius: 0px !important;
-            height: 42px !important;
-            right: 0;
-            position: relative;
-            background-color: $turquoise4;
-            color: white;
-            
-            .icon {
-                margin-right: 0.75rem;
-            }
-        }
+        .repository-subheader-icons {
+            display: flex;
+            flex-wrap: nowrap;
+            margin-right: calc(4.6666667% - 2.083333333px);
 
-        #exporter-collection-button {
-            border: none;
-            border-radius: 0px !important;
-            height: 42px !important;
-            right: 0;
-            position: relative;
-            background-color: $turquoise4;
-            color: white;
+            #view-collection-button,
+            #exporter-collection-button {
+                border: none;
+                border-radius: 0px !important;
+                height: 42px !important;
+                background-color: $turquoise5;
+                color: white;
+                width: 48px;
+            }
         }
 
         @media screen and (max-width: 769px) {