From 56565ee7cb9be2f663ab6ab6e4dbfc0268935bed Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 18 May 2018 16:10:56 -0300
Subject: [PATCH] Begin shrinckable subheader implementation.

---
 src/admin/components/lists/items-list.vue     |  3 +-
 .../navigation/tainacan-subheader.vue         | 30 +++++++++++++++----
 src/admin/pages/lists/items-page.vue          |  3 +-
 src/admin/pages/singles/collection-page.vue   | 20 +++++++++++--
 src/admin/scss/tainacan-admin.scss            |  8 +++--
 src/admin/theme-items-list.vue                |  1 +
 6 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 5e3f40c0e..d5082790c 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -290,8 +290,7 @@ export default {
 
     .selection-control {
         
-        padding: 6px 14px 0px 14px;
-        position: relative;
+        padding: 6px 0px 0px 18px;
         background: white;
         height: 40px;
 
diff --git a/src/admin/components/navigation/tainacan-subheader.vue b/src/admin/components/navigation/tainacan-subheader.vue
index 22f6b2438..049c86bef 100644
--- a/src/admin/components/navigation/tainacan-subheader.vue
+++ b/src/admin/components/navigation/tainacan-subheader.vue
@@ -110,7 +110,7 @@ export default {
         }
     },
     props: {
-        id: Number
+        id: Number,
     },
     watch: {
         '$route' (to) {
@@ -217,6 +217,26 @@ export default {
         left: 0;
         right: 0;
         z-index: 9;
+        transition: padding 0.3s, height 0.3s;
+
+        &.is-shrink {
+            height: $header-height;
+            max-height: $header-height;
+            padding-top: 12px;
+            padding-bottom: 12px;
+
+            h1 { margin-bottom: 4px;  }
+            li a {
+                line-height: 20px;
+                br { display: none; }
+                .menu-text { 
+                    visibility: 
+                    hidden; opacity: 0; 
+                    font-size: 0;
+                    line-height: 0;
+                }
+            }
+        }
 
         h1 {
             font-size: 18px;
@@ -228,6 +248,8 @@ export default {
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;  
+            -webkit-transition: margin-bottom 0.2s linear; /* Safari */
+            transition: margin-bottom 0.2s linear; 
         }
 
         .breadcrumbs {
@@ -254,8 +276,6 @@ export default {
                 min-width: 75px;
                 line-height: 1.5em;
                 border-radius: 0px;
-                -webkit-transition: padding 0.3s linear; /* Safari */
-                transition: padding 0.3s linear; 
                 position: relative;
                 overflow: inherit;
             }
@@ -287,8 +307,8 @@ export default {
                 font-size: 14px;
                 opacity: 1;
                 visibility: visible;
-                transition: opacity 0.3s linear, visibility 0.3s linear;
-                -webkit-transition: opacity 0.3s linear, visibility 0.3s linear;
+                transition: opacity 0.5s linear, visibility 0.5s linear;
+                -webkit-transition: opacity 0.5s linear, visibility 0.5s linear;
             }
         }
 
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 1daae9603..83aa17750 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -380,7 +380,8 @@
     }
 
     .tabs {
-        padding-top: $page-small-top-padding;
+        padding-top: 20px;
+        margin-bottom: 20px;
         padding-left: $page-side-padding;
         padding-right: $page-side-padding;
     }
diff --git a/src/admin/pages/singles/collection-page.vue b/src/admin/pages/singles/collection-page.vue
index 8ad2ed669..accfadd13 100644
--- a/src/admin/pages/singles/collection-page.vue
+++ b/src/admin/pages/singles/collection-page.vue
@@ -1,8 +1,12 @@
 <template>
     <div class="columns is-fullheight">
         <section class="column is-secondary-content">
-            <tainacan-subheader :id="collectionId"/>
-            <router-view 
+            <tainacan-subheader 
+                    :class="{ 'is-shrink': hasScrolled }"
+                    :id="collectionId"/>
+            <router-view
+                    id="collecion-page-container"
+                    ref="collection-page-container" 
                     :collection-id="collectionId" 
                     class="page-container page-container-small"/>
         </section>
@@ -16,15 +20,25 @@ export default {
     name: 'CollectionPage',
     data(){
         return {
-            collectionId: Number
+            collectionId: Number,
+            hasScrolled: false
         }
     },
     components: {
         TainacanSubheader
     },
+    methods:{
+        handleScroll() {
+            this.hasScrolled = (this.$refs['collection-page-container'].$el.scrollTop > 5);
+            console.log(this.$refs['collection-page-container'].$el.scrollTop);
+        }
+    },
     created(){
         this.collectionId = parseInt(this.$route.params.collectionId);
         this.$eventBusSearch.setCollectionId(this.collectionId);
+    },
+    mounted() {
+        document.getElementById('collecion-page-container').addEventListener('scroll', this.handleScroll);
     }
 
 }
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index b381c265f..6e47c7a86 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -537,6 +537,7 @@ a:hover {
 .table-container {
     padding: 0 $table-side-padding;
     position: relative;
+    margin-bottom: 40px;
 
     .table-wrapper {
         width: 100%;
@@ -561,7 +562,10 @@ a:hover {
     font-size: 0.85em !important;
     font-weight: normal !important;
     border-top: 1px solid $gray;
-    padding: 0em 1.0em;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: $page-side-padding;
+    padding-right: $page-side-padding;
     color: $gray-light;
 
     .shown-items { 
@@ -569,7 +573,7 @@ a:hover {
     }
 
     .items-per-page { 
-        flex-grow: 3;
+        flex-grow: 5;
         margin-top: 0.35em;
         .field-label {
             flex-grow: 5;
diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue
index 9a99f406c..80e97f0c6 100644
--- a/src/admin/theme-items-list.vue
+++ b/src/admin/theme-items-list.vue
@@ -386,6 +386,7 @@ export default {
         // Tables
         .table-wrapper {
             .table {
+                border-collapse: collapse;
                 tbody {
                     td { border-bottom: 0px solid $gray-light !important; }
                 }