github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-25 00:32:52 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

improve hamburger rendering

Browse Source 
fix test cases
This commit is contained in:
Sam
2015-08-26 13:44:48 +10:00
parent 6c08bd4265
commit 600ab5ad51
3 changed files with 89 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/discourse/components/hamburger-menu.js.es6
View File

@ -7,14 +7,21 @@ export default Ember.Component.extend({
visibilityChanged: function(){ visibilityChanged: function(){
if(this.get("visible")) { if(this.get("visible")) {
$('html').on('click.close-humburger', (e) => { $('html').on('click.close-humburger', (e) => {
if (this.get('isDestroyed')) {
$('html').off('click.close-humburger');
return true;
}
const $target = $(e.target); const $target = $(e.target);
if ($target.closest('.dropdown.categories').length > 0) { if ($target.closest('.dropdown.categories').length > 0) {
return; return;
} }
console.log(e.toElement || e.relatedTarget || e.target);
this.set("visible", false); this.set("visible", false);
$('html').off('click.close-humburger'); $('html').off('click.close-humburger');
return true; return true;
}); });
} else { } else {
$('html').off('click.close-humburger'); $('html').off('click.close-humburger');

5
app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
View File

@ -2,6 +2,7 @@
<div class='hamburger-header clearfix'> <div class='hamburger-header clearfix'>
<a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a> <a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
</div> </div>
<div class='hamburger-body'>
<ul class="location-links"> <ul class="location-links">
{{#if currentUser.staff}} {{#if currentUser.staff}}
<li> <li>
@ -63,7 +64,7 @@
</ul> </ul>
{{#if categories}} {{#if categories}}
<ul class="category-links"> <ul class="category-links clearfix">
<li class="heading" title={{i18n 'filters.categories.help'}}> <li class="heading" title={{i18n 'filters.categories.help'}}>
{{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}} {{#link-to "discovery.categories" class="categories-link"}}{{i18n 'filters.categories.title'}}{{/link-to}}
</li> </li>
@ -73,6 +74,6 @@
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div>
<br>
{{/if}} {{/if}}

19
app/assets/stylesheets/common/base/hamburger.scss
View File

@ -5,7 +5,7 @@
background-color: $secondary; background-color: $secondary;
z-index: 1002; z-index: 1002;
height: 100%; height: 100%;
overflow: auto; overflow: none;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
@include transform(translateX(0)); @include transform(translateX(0));
@ -17,8 +17,23 @@
float: right; float: right;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary); color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
font-size: 1.5em; font-size: 1.5em;
margin-right: 0.5em; margin-right: -10px;
margin-top: 0.1em; 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;
} }