From 79781c8c3ebb3bd4dfa084db415011a4fa963760 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 7 Aug 2018 09:35:31 -0300
Subject: [PATCH] Deregisters event listener from ItemsPage to avoid access to
 undefined refs.

---
 src/admin/admin.vue                           |  1 +
 .../tainacan-collection-subheader.vue         | 52 +++++++++++++------
 .../components/navigation/tainacan-header.vue | 11 +++-
 src/admin/pages/lists/items-page.vue          | 19 ++++---
 src/admin/scss/tainacan-admin.scss            |  2 +-
 5 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/src/admin/admin.vue b/src/admin/admin.vue
index 985645876..fd90f3290 100644
--- a/src/admin/admin.vue
+++ b/src/admin/admin.vue
@@ -6,6 +6,7 @@
                 :active-route="activeRoute"
                 :is-menu-compressed="isMenuCompressed"/>
         <button 
+                class="is-hidden-mobile"
                 id="menu-compress-button"
                 @click="isMenuCompressed = !isMenuCompressed">
             <b-icon :icon="isMenuCompressed ? 'menu-right' : 'menu-left'" />
diff --git a/src/admin/components/navigation/tainacan-collection-subheader.vue b/src/admin/components/navigation/tainacan-collection-subheader.vue
index 7647402bc..6af87d231 100644
--- a/src/admin/components/navigation/tainacan-collection-subheader.vue
+++ b/src/admin/components/navigation/tainacan-collection-subheader.vue
@@ -3,7 +3,7 @@
             id="tainacan-subheader" 
             class="secondary-page">
            
-        <div class="back-button">
+        <div class="back-button is-hidden-mobile">
             <button     
                     @click="$router.go(-1)"
                     class="button is-turquoise4">
@@ -14,6 +14,15 @@
         </div>
         <div class="level">      
             <div class="level-left">
+                <div class="back-button is-hidden-tablet level-item">
+                    <button     
+                            @click="$router.go(-1)"
+                            class="button is-turquoise4">
+                        <span class="icon">
+                            <i class="mdi mdi-chevron-left"/>
+                        </span>
+                    </button>
+                </div>
                 <div class="level-item">
                     <nav class="breadcrumbs">
                         <router-link 
@@ -371,30 +380,39 @@ export default {
         @media screen and (max-width: 769px) {
             width: 100% !important;
             max-width: 100% !important;
-            height: 143px;
-            max-height: 143px;
+            height: 85px;
+            max-height: 85px;
+            padding: 0;
+            top: 206px;
+            margin-bottom: 0px !important;
             
-            ul { 
-                margin-top: 12px;
+            .level-left {
+                margin-left: 0px !important;
+                display: flex;
+                padding: 0 1rem;
+                .level-item {
+                    display: inline-flex;
+                }
+            }
+
+            .level-right { 
+                margin-top: 0px;
                 flex-flow: wrap;
                 display: flex;
                 align-items: baseline;
                 justify-content: space-between;
 
-                a { 
-                    padding: 0.5em 0.7em !important; 
-                    text-align: center;
-                }
-                .menu-text {
-                    padding-left: 0.3em !important;
+                .level-item {
+                    margin-bottom: 0;
+                    a { 
+                        padding: 0.5em 0.7em !important; 
+                        text-align: center;
+                    }
+                    .menu-text {
+                        display: none;
+                    }
                 }
             }
-      
-            .level-left {
-                margin-left: 0px !important;
-            }
-            top: 206px;
-            margin-bottom: 0px !important;
         }
 
     }
diff --git a/src/admin/components/navigation/tainacan-header.vue b/src/admin/components/navigation/tainacan-header.vue
index 7c3d422bf..4ca50091a 100644
--- a/src/admin/components/navigation/tainacan-header.vue
+++ b/src/admin/components/navigation/tainacan-header.vue
@@ -15,7 +15,16 @@
             </div>
         </div>
         <div class="level-right">
-            <div class="search-area">
+            <div class="is-hidden-tablet">
+                <button
+                    @click="$router.push($routerHelper.getItemsPath())"
+                    class="button is-small is-white level-item">
+                    <span class="icon is-right">
+                        <i class="mdi mdi-24px mdi-magnify"/>
+                    </span>
+                </button>
+            </div>
+            <div class="search-area is-hidden-mobile">
                 <div class="control has-icons-right is-small is-clearfix">
                     <input
                             autocomplete="on"
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index d48aa2af0..7262720d4 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -1022,6 +1022,12 @@
                     .catch(() => {
                         this.isLoadingMetadata = false;
                     });
+            },
+            adjustSearchControlHeight() {
+                this.$nextTick(() => {
+                    this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight : 0;
+                    this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
+                });
             }
         },
         created() {
@@ -1087,14 +1093,11 @@
             }
 
             // Watches window resize to adjust filter's top position and compression on mobile 
-            this.$nextTick(() => {
-                this.searchControlHeight = this.$refs['search-control'].clientHeight;
-                this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
-                window.addEventListener('resize', () => {
-                    this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
-                    this.searchControlHeight = this.$refs['search-control'].clientHeight;
-                });
-            })
+            window.addEventListener('resize', this.adjustSearchControlHeight());
+        },
+        beforeDestroy() {
+            this.$off();
+            window.removeEventListener('resize', this.adjustSearchControlHeight());
         }
     }
 </script>
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 92e98e9a5..6ab79d441 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -71,7 +71,7 @@ a:hover {
     height: $page-height !important;
 
     @media screen and (max-width: 769px) {
-        margin-top: 0; 
+        margin-top: 42px;
     }
 
     .is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus {