mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Merge pull request #3055 from darvelo/mobile-interactions
Mobile Interactions
This commit is contained in:
Hannah Wolfe
commit
aabf853f88
5 changed files with 133 additions and 61 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -1,37 +1,35 @@
|
|||
<section class="content-view-container">
|
||||
<section class="content-list js-content-list">
|
||||
<header class="floatingheader">
|
||||
<section class="content-filter">
|
||||
<small>All Posts</small>
|
||||
</section>
|
||||
{{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
|
||||
</header>
|
||||
{{#view "content-list-content-view" tagName="section"}}
|
||||
<ol class="posts-list">
|
||||
{{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
|
||||
{{#link-to "posts.post" this class="permalink" title="Edit this post"}}
|
||||
<h3 class="entry-title">{{title}}</h3>
|
||||
<section class="entry-meta">
|
||||
<span class="status">
|
||||
{{#if isPublished}}
|
||||
{{#if page}}
|
||||
<span class="page">Page</span>
|
||||
{{else}}
|
||||
<time datetime="{{unbound published_at}}" class="date published">
|
||||
Published {{gh-format-timeago published_at}}
|
||||
</time>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<span class="draft">Draft</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
</section>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/view}}
|
||||
</section>
|
||||
<section class="content-preview js-content-preview">
|
||||
{{outlet}}
|
||||
</section>
|
||||
<section class="content-list js-content-list">
|
||||
<header class="floatingheader">
|
||||
<section class="content-filter">
|
||||
<small>All Posts</small>
|
||||
</section>
|
||||
{{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
|
||||
</header>
|
||||
{{#view "content-list-content-view" tagName="section"}}
|
||||
<ol class="posts-list">
|
||||
{{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
|
||||
{{#link-to "posts.post" this class="permalink" title="Edit this post"}}
|
||||
<h3 class="entry-title">{{title}}</h3>
|
||||
<section class="entry-meta">
|
||||
<span class="status">
|
||||
{{#if isPublished}}
|
||||
{{#if page}}
|
||||
<span class="page">Page</span>
|
||||
{{else}}
|
||||
<time datetime="{{unbound published_at}}" class="date published">
|
||||
Published {{gh-format-timeago published_at}}
|
||||
</time>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<span class="draft">Draft</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
</section>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/view}}
|
||||
</section>
|
||||
<section class="content-preview js-content-preview">
|
||||
{{outlet}}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
<div class="wrapper">
|
||||
<aside class="settings-sidebar" role="complementary">
|
||||
<header>
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
<nav class="settings-menu">
|
||||
<ul>
|
||||
{{#view "item-view" tagName="li" class="general"}}
|
||||
{{#link-to "settings.general"}}General{{/link-to}}
|
||||
{{/view}}
|
||||
<aside class="settings-sidebar" role="complementary">
|
||||
<header>
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
<nav class="settings-menu">
|
||||
<ul>
|
||||
{{#view "item-view" tagName="li" class="general"}}
|
||||
{{#link-to "settings.general"}}General{{/link-to}}
|
||||
{{/view}}
|
||||
|
||||
{{#view "item-view" tagName="li" class="users"}}
|
||||
{{#link-to "settings.user"}}User{{/link-to}}
|
||||
{{/view}}
|
||||
{{#view "item-view" tagName="li" class="users"}}
|
||||
{{#link-to "settings.user"}}User{{/link-to}}
|
||||
{{/view}}
|
||||
|
||||
{{#if showApps}}
|
||||
{{#view "item-view" tagName="li" class="apps"}}
|
||||
{{#link-to "settings.apps"}}Apps{{/link-to}}
|
||||
{{/view}}
|
||||
{{/if}}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
{{#if showApps}}
|
||||
{{#view "item-view" tagName="li" class="apps"}}
|
||||
{{#link-to "settings.apps"}}Apps{{/link-to}}
|
||||
{{/view}}
|
||||
{{/if}}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<section class="settings-content active">
|
||||
{{outlet}}
|
||||
</section>
|
||||
</div>
|
||||
<section class="settings-content active">
|
||||
{{outlet}}
|
||||
</section>
|
||||
|
|
|
|||
30
core/client/views/posts.js
Normal file
30
core/client/views/posts.js
Normal 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
31
core/client/views/settings.js
Normal 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;
|
||||
Loading…
Reference in a new issue