TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00
Code Issues Projects Releases Wiki Activity

Fix mobile sidebar menu

Browse Source 
Closes #3110
- Created `ApplicationView`
- Added `js-close-sidebar` classes to navbar navigation links
- Clicking on a navigation link in the sidebar will close it
This commit is contained in:
Matt Enlow 2014-07-07 08:55:22 -06:00
parent 906634ab68
commit 77941275ed
4 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
core/client/routes/application.js
View File

@ -1,23 +1,10 @@
import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
import mobileUtils from 'ghost/utils/mobile-utils';
var ApplicationRoute = Ember.Route.extend(Ember.SimpleAuth.ApplicationRouteMixin, ShortcutsRoute, {
shortcuts: {
'esc': 'closePopups'
},
mobileInteractions: function () {
var responsiveAction = mobileUtils.responsiveAction;
Ember.run.scheduleOnce('afterRender', document, function () {
// ### Toggle the sidebar menu
$('[data-off-canvas]').on('click', function (event) {
responsiveAction(event, '(max-width: 650px)', function () {
$('body').toggleClass('off-canvas');
});
});
});
}.on('init'),
setupController: function () {
Ember.run.next(this, function () {

6
core/client/templates/-navbar.hbs
View File

@ -4,9 +4,9 @@
</a>
<nav id="global-nav" role="navigation">
<ul id="main-menu" >
{{gh-activating-list-item route="posts" title="Content" classNames="content"}}
{{gh-activating-list-item route="editor.new" title="New Post" classNames="editor"}}
{{gh-activating-list-item route="settings" title="Settings" classNames="settings"}}
{{gh-activating-list-item route="posts" title="Content" classNames="content js-close-sidebar"}}
{{gh-activating-list-item route="editor.new" title="New Post" classNames="editor js-close-sidebar"}}
{{gh-activating-list-item route="settings" title="Settings" classNames="settings js-close-sidebar"}}
<li id="usermenu" class="usermenu subnav">
{{#gh-popover-button popoverName="user-menu" tagName="a" href="#" classNames="dropdown"}}

2
core/client/utils/mobile-utils.js
View File

@ -39,7 +39,7 @@ responsiveAction = function responsiveAction(event, mediaCondition, cb) {
cb();
};
export { hasTouchScreen, smallScreen };
export { hasTouchScreen, smallScreen, responsiveAction };
export default {
hasTouchScreen: hasTouchScreen,
smallScreen: smallScreen,

20
core/client/views/application.js Normal file
View File

@ -0,0 +1,20 @@
import {responsiveAction} from 'ghost/utils/mobile-utils';
var ApplicationView = Ember.View.extend({
mobileInteractions: function () {
var body = $('body');
// ### Toggle the mobile sidebar menu
$('[data-off-canvas]').on('click', function (event) {
responsiveAction(event, '(max-width: 650px)', function () {
body.toggleClass('off-canvas');
});
});
// #### Navigating within the sidebar closes it.
$('.js-close-sidebar').on('click', function () {
body.removeClass('off-canvas');
});
}.on('didInsertElement')
});
export default ApplicationView;