From bf8f153655d105702667bacd28391959e8fb7c46 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 2 May 2018 16:30:53 -0300
Subject: [PATCH] Definitive style settings for header, primary menu and
 subheader(except for shrinked version onscroll).

---
 .../components/navigation/primary-menu.vue    | 10 +++-----
 .../components/navigation/tainacan-header.vue | 25 +++++++++++--------
 .../navigation/tainacan-subheader.vue         | 10 +++++---
 src/admin/pages/lists/items-page.vue          |  4 +--
 src/admin/scss/_variables.scss                |  8 +++---
 5 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/admin/components/navigation/primary-menu.vue b/src/admin/components/navigation/primary-menu.vue
index 25fc2d555..1fe970300 100644
--- a/src/admin/components/navigation/primary-menu.vue
+++ b/src/admin/components/navigation/primary-menu.vue
@@ -31,7 +31,7 @@
                         :class="activeRoute == 'FieldsPage' ? 'is-active':''">
                     <b-icon 
                             size="is-small" 
-                            icon="format-list-checks"/> <span class="menu-text">{{ $i18n.getFrom('fields', 'name') }}</span>
+                            icon="format-list-bulleted-type"/> <span class="menu-text">{{ $i18n.getFrom('fields', 'name') }}</span>
                 </router-link></li>
                 <li><router-link 
                         tag="a" 
@@ -55,7 +55,7 @@
                         :class="activeRoute == 'EventsPage' ? 'is-active':''">
                     <b-icon 
                             size="is-small" 
-                            icon="calendar"/> <span class="menu-text">{{ $i18n.get('events') }}</span>
+                            icon="calendar-range"/> <span class="menu-text">{{ $i18n.get('events') }}</span>
                 </router-link></li>
             </ul>
         </aside>
@@ -82,6 +82,7 @@ export default {
         -webkit-transition: max-width 0.2s linear; /* Safari */
         transition: max-width 0.2s linear; 
         max-width: $side-menu-width;
+        box-shadow: -3px 0px 8px #111;
         z-index: 99;
         
         .separator {
@@ -118,8 +119,7 @@ export default {
         }
 
         &.is-compressed {
-            max-width: 44px;
-
+            max-width: 45px;
             a { 
                 padding-left: 0.8em;
                 padding-right: 0.8em;
@@ -128,8 +128,6 @@ export default {
                 visibility: hidden; 
                 opacity: 0;
             }
-            box-shadow: -3px 0px 10px #111;
-            z-index: 10;
         }
 
         @media screen and (max-width: 769px) {
diff --git a/src/admin/components/navigation/tainacan-header.vue b/src/admin/components/navigation/tainacan-header.vue
index 194a3dbfc..e49069195 100644
--- a/src/admin/components/navigation/tainacan-header.vue
+++ b/src/admin/components/navigation/tainacan-header.vue
@@ -80,10 +80,9 @@ export default {
 
             .level-item{
                 height: $header-height;
-                width: 180px;
-                transition: margin 0.15s linear;
-                -webkit-transition: margin 0.15s linear;
-                margin-left: 0px;
+                width: 184px;
+                transition: width 0.15s;
+                -webkit-transition: width linear 0.15s;   
                 cursor: pointer;
 
                 &:hover{
@@ -94,7 +93,9 @@ export default {
                 }
                 .tainacan-logo {
                     max-height: 22px;
-                    padding: 0px 28px;   
+                    padding: 0px 28px;
+                    transition: padding 0.15s;
+                    -webkit-transition: padding linear 0.15s;   
                 }
             }   
         }
@@ -116,10 +117,17 @@ export default {
                         height: 27px;
                         font-size: 11px;
                         color: $gray-light;
+                        transition: width linear 0.15s;
+                        -webkit-transition: width linear 0.15s;
+                        width: 160px;
+                    }
+                    input:focus, input:active {
+                        width: 220px !important;
                     }
                     .icon {
                         color: $tertiary;
                         height: 27px;
+                        font-size: 18px;
                     }
                 }
                
@@ -131,12 +139,9 @@ export default {
         }
         &.menu-compressed {
             .level-left .level-item {
-                margin-left: 44px;
-                width: 160px;
-
+                width: 220px;
                 .tainacan-logo {
-                    max-height: 22px;
-                    padding: 0px 16px;   
+                    padding: 0px 42px;   
                 }
             }
             
diff --git a/src/admin/components/navigation/tainacan-subheader.vue b/src/admin/components/navigation/tainacan-subheader.vue
index 5b08520b3..6105df728 100644
--- a/src/admin/components/navigation/tainacan-subheader.vue
+++ b/src/admin/components/navigation/tainacan-subheader.vue
@@ -12,11 +12,13 @@
                     <span 
                             v-for="(pathItem, index) in arrayRealPath" 
                             :key="index">
-                        <router-link 
+                        <router-link
+                                v-if="index < arrayRealPath.length - 1" 
                                 tag="a" 
                                 :to="'/' + arrayRealPath.slice(0, index + 1).join('/')">
                             {{ arrayViewPath[index] }}
                         </router-link>
+                        <span v-if="index == arrayRealPath.length - 1">{{ arrayViewPath[index] }}</span>
                         <span v-if="index != arrayRealPath.length - 1"> > </span>
                     </span>   
                 </nav>
@@ -52,7 +54,7 @@
                     :aria-label="$i18n.get('label_collection_fields')">
                 <b-icon 
                     size="is-small" 
-                    icon="format-list-checks"/>
+                    icon="format-list-bulleted-type"/>
                 <br>
                 <span class="menu-text">{{ $i18n.getFrom('fields', 'name') }}</span>
             </router-link></li>
@@ -74,7 +76,7 @@
                     :aria-label="$i18n.get('label_collection_events')">
                 <b-icon 
                         size="is-small" 
-                        icon="calendar"/>
+                        icon="calendar-range"/>
                 <br>
                 <span class="menu-text">{{ $i18n.get('events') }}</span>
             </router-link></li>
@@ -217,6 +219,7 @@ export default {
         .breadcrumbs {
             font-size: 12px;
             line-height: 12px;
+            color: #1d1d1d;
         }
 
         .level-left {
@@ -267,6 +270,7 @@ export default {
                 padding: 0;
             }
             .menu-text {
+                font-size: 14px;
                 opacity: 1;
                 visibility: visible;
                 transition: opacity 0.3s linear, visibility 0.3s linear;
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index a40750809..7a75a9d2f 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -337,7 +337,7 @@
         overflow-y: auto;
         visibility: visible;
         display: block;
-        transition: visibility 0.5s ease, display 0.5s ease;
+        transition: visibility ease 0.5s, display ease 0.5s;
 
         .label {
             font-size: 12px;
@@ -348,7 +348,7 @@
 
     .items-list-area {
         margin-left: 0;
-        transition: margin-left 0.5s ease;
+        transition: margin-left ease 0.5s ;
     }
     .spaced-to-right {
         margin-left: $filter-menu-width;
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index 94c0561d2..e950f1adc 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -3,7 +3,7 @@
 @import "../../../node_modules/bulma/sass/utilities/functions";
 
 // Tainacan custom colors
-$primary: #2cb4c1;// #25a189;
+$primary: #2cb4c1;
 $primary-invert: findColorInvert($primary);
 $secondary: #298596;
 $secondary-invert: findColorInvert($secondary);
@@ -69,9 +69,9 @@ $page-mobile-side-padding: 1em;
 $page-mobile-top-padding: 0.5em;
 
 // Links
-$link: $primary;
-$link-invert: $primary-invert;
-$link-focus-border: $primary; 
+$link: $secondary;
+$link-invert: $secondary-invert;
+$link-focus-border: $secondary; 
 
 // Table
 $table-head-cell-color: $gray-light;