IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Make hamburger shadow more subtle, don't use active when in full

Browse Source
This commit is contained in:
Robin Ward 2015-08-26 14:50:15 -04:00
parent e66f111348
commit 3998f729da
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,9 @@ export default Ember.Component.extend({
const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - myWidth); const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - myWidth);
return `left: ${posLeft}px; top: ${posTop}px`.htmlSafe(); return `left: ${posLeft}px; top: ${posTop}px`.htmlSafe();
} else {
const headerHeight = parseInt($('header.d-header').height() + 3);
return `top: ${headerHeight}px`.htmlSafe();
} }
}, },
@ -34,8 +37,12 @@ export default Ember.Component.extend({
@observes('visible') @observes('visible')
_visibleChanged() { _visibleChanged() {
const isDropdown = (this.get('viewMode') === 'drop-down');
if (this.get('visible')) { if (this.get('visible')) {
$('.hamburger-dropdown').addClass('active');
if (isDropdown) {
$('.hamburger-dropdown').addClass('active');
}
if ($(window).width() < 1024) { if ($(window).width() < 1024) {
this.set('viewMode', 'slide-in'); this.set('viewMode', 'slide-in');

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

@ -3,8 +3,6 @@
right: 0; right: 0;
top: 0; top: 0;
height: 100%; height: 100%;
box-shadow: 0 4px 4px 4px rgba(0,0,0, .25);
.hamburger-body { .hamburger-body {
position: absolute; position: absolute;
top: 40px; top: 40px;
@ -13,12 +11,12 @@
} }
#hamburger-menu.drop-down { #hamburger-menu.drop-down {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
box-shadow: 0 2px 2px rgba(0,0,0, .25);
position: absolute; position: absolute;
} }
#hamburger-menu { #hamburger-menu {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
box-shadow: 0 2px 2px rgba(0,0,0, .25);
background-color: $secondary; background-color: $secondary;
z-index: 1100; z-index: 1100;
overflow: none; overflow: none;