Deregisters event listener from ItemsPage to avoid access to undefined refs.

This commit is contained in:
Mateus Machado Luna 2018-08-07 09:35:31 -03:00
parent a1f8c2764a
commit 79781c8c3e
5 changed files with 58 additions and 27 deletions

View File

@ -6,6 +6,7 @@
:active-route="activeRoute" :active-route="activeRoute"
:is-menu-compressed="isMenuCompressed"/> :is-menu-compressed="isMenuCompressed"/>
<button <button
class="is-hidden-mobile"
id="menu-compress-button" id="menu-compress-button"
@click="isMenuCompressed = !isMenuCompressed"> @click="isMenuCompressed = !isMenuCompressed">
<b-icon :icon="isMenuCompressed ? 'menu-right' : 'menu-left'" /> <b-icon :icon="isMenuCompressed ? 'menu-right' : 'menu-left'" />

View File

@ -3,7 +3,7 @@
id="tainacan-subheader" id="tainacan-subheader"
class="secondary-page"> class="secondary-page">
<div class="back-button"> <div class="back-button is-hidden-mobile">
<button <button
@click="$router.go(-1)" @click="$router.go(-1)"
class="button is-turquoise4"> class="button is-turquoise4">
@ -14,6 +14,15 @@
</div> </div>
<div class="level"> <div class="level">
<div class="level-left"> <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"> <div class="level-item">
<nav class="breadcrumbs"> <nav class="breadcrumbs">
<router-link <router-link
@ -371,30 +380,39 @@ export default {
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
height: 143px; height: 85px;
max-height: 143px; max-height: 85px;
padding: 0;
top: 206px;
margin-bottom: 0px !important;
ul { .level-left {
margin-top: 12px; margin-left: 0px !important;
display: flex;
padding: 0 1rem;
.level-item {
display: inline-flex;
}
}
.level-right {
margin-top: 0px;
flex-flow: wrap; flex-flow: wrap;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
.level-item {
margin-bottom: 0;
a { a {
padding: 0.5em 0.7em !important; padding: 0.5em 0.7em !important;
text-align: center; text-align: center;
} }
.menu-text { .menu-text {
padding-left: 0.3em !important; display: none;
} }
} }
.level-left {
margin-left: 0px !important;
} }
top: 206px;
margin-bottom: 0px !important;
} }
} }

View File

@ -15,7 +15,16 @@
</div> </div>
</div> </div>
<div class="level-right"> <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"> <div class="control has-icons-right is-small is-clearfix">
<input <input
autocomplete="on" autocomplete="on"

View File

@ -1022,6 +1022,12 @@
.catch(() => { .catch(() => {
this.isLoadingMetadata = false; 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() { created() {
@ -1087,14 +1093,11 @@
} }
// Watches window resize to adjust filter's top position and compression on mobile // Watches window resize to adjust filter's top position and compression on mobile
this.$nextTick(() => { window.addEventListener('resize', this.adjustSearchControlHeight());
this.searchControlHeight = this.$refs['search-control'].clientHeight; },
this.isFiltersMenuCompressed = jQuery(window).width() <= 768; beforeDestroy() {
window.addEventListener('resize', () => { this.$off();
this.isFiltersMenuCompressed = jQuery(window).width() <= 768; window.removeEventListener('resize', this.adjustSearchControlHeight());
this.searchControlHeight = this.$refs['search-control'].clientHeight;
});
})
} }
} }
</script> </script>

View File

@ -71,7 +71,7 @@ a:hover {
height: $page-height !important; height: $page-height !important;
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
margin-top: 0; margin-top: 42px;
} }
.is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus { .is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus {