Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-13 22:41:32 -05:00
Code Issues Activity

Merge pull request #3055 from darvelo/mobile-interactions

Browse source 
Mobile Interactions
This commit is contained in:
Hannah Wolfe 2014-06-24 23:52:14 +01:00
commit aabf853f88
5 changed files with 133 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
core/client/routes/application.js
View file

@ -1,9 +1,24 @@
import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
import mobileUtils from 'ghost/utils/mobile-utils';
var ApplicationRoute = Ember.Route.extend(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'),
actions: {
closePopups: function () {
this.get('popover').closePopovers();

10
core/client/templates/posts.hbs
View file

@ -1,5 +1,4 @@
<section class="content-view-container">
<section class="content-list js-content-list">
<section class="content-list js-content-list">
<header class="floatingheader">
<section class="content-filter">
<small>All Posts</small>
@ -30,8 +29,7 @@
{{/each}}
</ol>
{{/view}}
</section>
<section class="content-preview js-content-preview">
{{outlet}}
</section>
</section>
<section class="content-preview js-content-preview">
{{outlet}}
</section>

10
core/client/templates/settings.hbs
View file

@ -1,5 +1,4 @@
<div class="wrapper">
<aside class="settings-sidebar" role="complementary">
<aside class="settings-sidebar" role="complementary">
<header>
<h1 class="title">Settings</h1>
</header>
@ -20,9 +19,8 @@
{{/if}}
</ul>
</nav>
</aside>
</aside>
<section class="settings-content active">
<section class="settings-content active">
{{outlet}}
</section>
</div>
</section>

30
core/client/views/posts.js Normal file
View file

@ -0,0 +1,30 @@
import mobileUtils from 'ghost/utils/mobile-utils';
var PostsView = Ember.View.extend({
classNames: ['content-view-container'],
tagName: 'section',
mobileInteractions: function () {
var responsiveAction = mobileUtils.responsiveAction;
Ember.run.scheduleOnce('afterRender', this, function () {
// ### Show content preview when swiping left on content list
$('.manage').on('click', '.content-list ol li', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
$('.content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
$('.content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
});
});
// ### Hide content preview
$('.manage').on('click', '.content-preview .button-back', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
$('.content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
$('.content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
});
});
});
}.on('didInsertElement'),
});
export default PostsView;

31
core/client/views/settings.js Normal file
View file

@ -0,0 +1,31 @@
import mobileUtils from 'ghost/utils/mobile-utils';
var SettingsView = Ember.View.extend({
classNames: ['wrapper'],
mobileInteractions: function () {
var responsiveAction = mobileUtils.responsiveAction;
Ember.run.scheduleOnce('afterRender', this, function () {
// ### Show settings options page when swiping left on settings menu link
$('.settings').on('click', '.settings-menu li', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
$('.settings-sidebar').animate({right: '100%', left: '-102%', 'margin-right': '15px'}, 300);
$('.settings-content').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
$('.settings-content .button-back, .settings-content .button-save').css('display', 'inline-block');
});
});
// ### Hide settings options page
$('.settings').on('click', '.settings-content .button-back', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
$('.settings-sidebar').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
$('.settings-content').animate({right: '-100%', left: '100%', 'margin-left': '15'}, 300);
$('.settings-content .button-back, .settings-content .button-save').css('display', 'none');
});
});
});
}.on('didInsertElement')
});
export default SettingsView;