Attempts on making shrink header work for all the necessary pages

src/admin/components/edition/item-edition-form.vue

@@ -637,6 +637,11 @@ export default {
             this.fetchAttachments(this.itemId);
         }
     },
+    mounted() {
+        document.getElementById('collection-page-container').addEventListener('scroll', ($event) => {
+            this.$shouldShrink = ($event.originalTarget.scrollTop > 5); 
+        });
+    },
     beforeRouteLeave ( to, from, next ) {
         if (this.item.status == 'auto-draft') {
             this.$dialog.confirm({

src/admin/components/navigation/tainacan-subheader.vue

@@ -208,6 +208,7 @@ export default {
         height: $subheader-height;
         max-height: $subheader-height;
         width: 100%;
+        overflow-y: hidden;
         padding-top: 18px;
         padding-bottom: 18px;
         padding-right: $page-side-padding;
@@ -228,12 +229,14 @@ export default {
             h1 { margin-bottom: 4px;  }
             li a {
                 line-height: 20px;
-                br { display: none; }
                 .menu-text { 
-                    visibility: 
+                    visibility: hidden; 
-                    hidden; opacity: 0; 
+                    opacity: 0; 
                     font-size: 0;
                     line-height: 0;
+                    display: block;
+                    width: 0;
+                    height: 0;
                 }
             }
         }
@@ -267,6 +270,9 @@ export default {
 
         li{
             margin-right: 0px;
+            transition: height 0.5s linear, padding 0.5s linear;
+            -webkit-transition: height 0.5s linear, padding 0.5s linear;
+
             a {
                 color: $tertiary;
                 text-align: center;
@@ -307,8 +313,8 @@ export default {
                 font-size: 14px;
                 opacity: 1;
                 visibility: visible;
-                transition: opacity 0.5s linear, visibility 0.5s linear;
+                transition: opacity 0.5s linear, visibility 0.5s linear, height 0.5s linear;
-                -webkit-transition: opacity 0.5s linear, visibility 0.5s linear;
+                -webkit-transition: opacity 0.5s linear, visibility 0.5s linear, height 0.5s linear;
             }
         }
 

src/admin/js/main.js

@@ -40,7 +40,7 @@ import draggable from 'vuedraggable'
 import store from '../../js/store/store'
 import router from './router'
 import eventBusSearch from '../../js/event-bus-search';
-import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from './utilities';
+import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin, SubheaderShrinkPlugin } from './utilities';
 import VueMask from 'v-mask';
 
 // Configure and Register Plugins
@@ -48,6 +48,7 @@ Vue.use(Buefy);
 Vue.use(I18NPlugin);
 Vue.use(UserPrefsPlugin);
 Vue.use(RouterHelperPlugin);
+Vue.use(SubheaderShrinkPlugin);
 Vue.use(ConsolePlugin, {visual: false});
 Vue.use(VueMask);
 

src/admin/js/utilities.js

@@ -259,3 +259,24 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
     }
 
 }
+
+// USER PREFERENCES - Used to save key-value information for user settings of plugin
+export const SubheaderShrinkPlugin = {};
+SubheaderShrinkPlugin.install = function (Vue, options = {}) {
+
+    Vue.ShouldShrink = false;
+
+    Object.defineProperties(Vue.prototype, {
+        "$shouldShrink": {
+            "get": function () {
+                return vm.ShouldShrink;
+            },
+
+            "set": function (value) {
+                vm.ShouldShrink = value
+
+                return this;
+            }
+        }
+    })
+}

src/admin/pages/lists/items-page.vue

@@ -1,5 +1,6 @@
 <template>
-    <div :class="{'primary-page': isRepositoryLevel, 'page-container': isRepositoryLevel, 'page-container-small' :!isRepositoryLevel }">
+    <div 
+            :class="{'primary-page': isRepositoryLevel}">
 
         <!-- SEARCH AND FILTERS --------------------- -->
         <button 
@@ -344,6 +345,7 @@
             this.$eventBusSearch.updateStoreFromURL();
             this.$eventBusSearch.loadItems();
         }
+
     }
 </script>
 

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

@@ -2,11 +2,10 @@
     <div class="columns is-fullheight">
         <section class="column is-secondary-content">
             <tainacan-subheader 
-                    :class="{ 'is-shrink': hasScrolled }"
+                    :class="{ 'is-shrink': headerShouldShrink }"
                     :id="collectionId"/>
             <router-view
-                    id="collecion-page-container"
+                    id="collection-page-container"
-                    ref="collection-page-container" 
                     :collection-id="collectionId" 
                     class="page-container page-container-small"/>
         </section>
@@ -20,25 +19,22 @@ export default {
     name: 'CollectionPage',
     data(){
         return {
-            collectionId: Number,
+            collectionId: Number
-            hasScrolled: false
+        }
+    },
+    computed: {
+        headerShouldShrink() {
+            return this.$shouldShrink;
         }
     },
     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);
     }
 
 }

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

@@ -194,14 +194,14 @@
 
     @import '../../scss/_variables.scss';
 
-    .page-container {
-        height: calc(100% - 82px);
-    }
-
     .columns > .column {
         padding: 0;
     }
 
+    .page-container{
+        height: calc(100% - 82px);
+    }
+
     .field {
         border-bottom: 1px solid $draggable-border-color;
         padding: 10px 25px;