From 600ab5ad51a6b253900367092f3d4ae8f919e878 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Wed, 26 Aug 2015 13:44:48 +1000
Subject: [PATCH] improve hamburger rendering fix test cases
---
.../components/hamburger-menu.js.es6 | 9 +-
.../templates/components/hamburger-menu.hbs | 127 +++++++++---------
.../stylesheets/common/base/hamburger.scss | 19 ++-
3 files changed, 89 insertions(+), 66 deletions(-)
diff --git a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6 b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
index 9dc957ed8..32e7d194a 100644
--- a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
+++ b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
@@ -7,14 +7,21 @@ export default Ember.Component.extend({
visibilityChanged: function(){
if(this.get("visible")) {
$('html').on('click.close-humburger', (e) => {
+
+ if (this.get('isDestroyed')) {
+ $('html').off('click.close-humburger');
+ return true;
+ }
+
const $target = $(e.target);
if ($target.closest('.dropdown.categories').length > 0) {
return;
}
- console.log(e.toElement || e.relatedTarget || e.target);
+
this.set("visible", false);
$('html').off('click.close-humburger');
return true;
+
});
} else {
$('html').off('click.close-humburger');
diff --git a/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs b/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
index b85ffb0b9..7cef85af9 100644
--- a/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
+++ b/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
@@ -2,77 +2,78 @@
<div class='hamburger-header clearfix'>
<a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
</div>
- <ul class="location-links">
- {{#if currentUser.staff}}
+ <div class='hamburger-body'>
+ <ul class="location-links">
+ {{#if currentUser.staff}}
+ <li>
+ {{#link-to "admin" class="admin-link"}}
+ {{fa-icon "wrench"}} {{i18n 'admin_title'}}
+ {{/link-to}}
+ </li>
+ <li>
+ {{#link-to "adminFlags" class="flagged-posts-link"}}
+ {{fa-icon "flag"}} {{i18n 'flags_title'}}
+ {{#if currentUser.site_flagged_posts_count}}
+ <span title={{i18n 'notifications.total_flagged'}} class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</span>
+ {{/if}}
+ {{/link-to}}
+ </li>
+ {{/if}}
<li>
- {{#link-to "admin" class="admin-link"}}
- {{fa-icon "wrench"}} {{i18n 'admin_title'}}
+ {{#link-to "discovery.latest" class="latest-topics-link"}}
+ {{i18n 'filters.latest.title.zero'}}
{{/link-to}}
</li>
+ {{#if siteSettings.enable_badges}}
+ <li>
+ {{#link-to 'badges' class="badge-link"}}{{i18n 'badges.title'}}{{/link-to}}
+ </li>
+ {{/if}}
+
+ {{#if siteSettings.enable_user_directory}}
+ <li>{{#link-to 'users' class="user-directory-link"}}{{i18n "directory.title"}}{{/link-to}}</li>
+ {{/if}}
+
+ {{#if currentUser.show_queued_posts}}
+ <li>
+ {{#link-to 'queued-posts'}}
+ {{i18n "queue.title"}}
+ {{#if currentUser.post_queue_new_count}}
+ <span class='badge-notification flagged-posts'>{{currentUser.post_queue_new_count}}</span>
+ {{/if}}
+ {{/link-to}}
+ </li>
+ {{/if}}
+
+ {{plugin-outlet "site-map-links"}}
+
+ {{#if showKeyboardShortcuts}}
+ <li><a href {{action "keyboardShortcuts"}} class="keyboard-shortcuts-link">{{i18n 'keyboard_shortcuts_help.title'}}</a></li>
+ {{/if}}
<li>
- {{#link-to "adminFlags" class="flagged-posts-link"}}
- {{fa-icon "flag"}} {{i18n 'flags_title'}}
- {{#if currentUser.site_flagged_posts_count}}
- <span title={{i18n 'notifications.total_flagged'}} class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</span>
- {{/if}}
- {{/link-to}}
+ <a href={{faqUrl}} class="faq-link">{{i18n 'faq'}}</a>
</li>
- {{/if}}
- <li>
- {{#link-to "discovery.latest" class="latest-topics-link"}}
- {{i18n 'filters.latest.title.zero'}}
- {{/link-to}}
- </li>
- {{#if siteSettings.enable_badges}}
<li>
- {{#link-to 'badges' class="badge-link"}}{{i18n 'badges.title'}}{{/link-to}}
+ {{#link-to 'about' class="about-link"}}{{i18n 'about.simple_title'}}{{/link-to}}
</li>
- {{/if}}
+ {{#if showMobileToggle}}
+ <li><a href class="mobile-toggle-link" {{action "toggleMobileView"}}>{{boundI18n mobileViewLinkTextKey}}</a></li>
+ {{/if}}
- {{#if siteSettings.enable_user_directory}}
- <li>{{#link-to 'users' class="user-directory-link"}}{{i18n "directory.title"}}{{/link-to}}</li>
- {{/if}}
-
- {{#if currentUser.show_queued_posts}}
- <li>
- {{#link-to 'queued-posts'}}
- {{i18n "queue.title"}}
- {{#if currentUser.post_queue_new_count}}
- <span class='badge-notification flagged-posts'>{{currentUser.post_queue_new_count}}</span>
- {{/if}}
- {{/link-to}}
- </li>
- {{/if}}
-
- {{plugin-outlet "site-map-links"}}
-
- {{#if showKeyboardShortcuts}}
- <li><a href {{action "keyboardShortcuts"}} class="keyboard-shortcuts-link">{{i18n 'keyboard_shortcuts_help.title'}}</a></li>
- {{/if}}
- <li>
- <a href={{faqUrl}} class="faq-link">{{i18n 'faq'}}</a>
- </li>
- <li>
- {{#link-to 'about' class="about-link"}}{{i18n 'about.simple_title'}}{{/link-to}}
- </li>
- {{#if showMobileToggle}}
- <li><a href class="mobile-toggle-link" {{action "toggleMobileView"}}>{{boundI18n mobileViewLinkTextKey}}</a></li>
- {{/if}}
-
- {{plugin-outlet "site-map-links-last"}}
- </ul>
-
- {{#if categories}}
- <ul class="category-links">
- <li class="heading" title={{i18n 'filters.categories.help'}}>
- {{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}}
- </li>
-
- {{#each categories as |c|}}
- {{hamburger-category category=c}}
- {{/each}}
+ {{plugin-outlet "site-map-links-last"}}
</ul>
- {{/if}}
- <br>
+ {{#if categories}}
+ <ul class="category-links clearfix">
+ <li class="heading" title={{i18n 'filters.categories.help'}}>
+ {{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}}
+ </li>
+
+ {{#each categories as |c|}}
+ {{hamburger-category category=c}}
+ {{/each}}
+ </ul>
+ {{/if}}
+ </div>
+
{{/if}}
diff --git a/app/assets/stylesheets/common/base/hamburger.scss b/app/assets/stylesheets/common/base/hamburger.scss
index ca61474f7..e3ffe1278 100644
--- a/app/assets/stylesheets/common/base/hamburger.scss
+++ b/app/assets/stylesheets/common/base/hamburger.scss
@@ -5,7 +5,7 @@
background-color: $secondary;
z-index: 1002;
height: 100%;
- overflow: auto;
+ overflow: none;
transition: 0.3s ease-in-out;
@include transform(translateX(0));
@@ -17,8 +17,23 @@
float: right;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
font-size: 1.5em;
- margin-right: 0.5em;
+ margin-right: -10px;
margin-top: 0.1em;
+ padding: 0 4 4 4px;
+ z-index: 9999;
+ }
+
+ .hamburger-header {
+ position: absolute;
+ right: 20px;
+ }
+
+ .hamburger-body {
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: absolute;
+ top: 40px;
+ bottom: 100px;
}