Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -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 c34c7ebee9
5 changed files with 133 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ghost/admin/routes/application.js
View file

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

70
ghost/admin/templates/posts.hbs
View file

@ -1,37 +1,35 @@
<section class="content-view-container"> <section class="content-list js-content-list">
<section class="content-list js-content-list"> <header class="floatingheader">
<header class="floatingheader"> <section class="content-filter">
<section class="content-filter"> <small>All Posts</small>
<small>All Posts</small> </section>
</section> {{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
{{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}} </header>
</header> {{#view "content-list-content-view" tagName="section"}}
{{#view "content-list-content-view" tagName="section"}} <ol class="posts-list">
<ol class="posts-list"> {{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
{{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}} {{#link-to "posts.post" this class="permalink" title="Edit this post"}}
{{#link-to "posts.post" this class="permalink" title="Edit this post"}} <h3 class="entry-title">{{title}}</h3>
<h3 class="entry-title">{{title}}</h3> <section class="entry-meta">
<section class="entry-meta"> <span class="status">
<span class="status"> {{#if isPublished}}
{{#if isPublished}} {{#if page}}
{{#if page}} <span class="page">Page</span>
<span class="page">Page</span> {{else}}
{{else}} <time datetime="{{unbound published_at}}" class="date published">
<time datetime="{{unbound published_at}}" class="date published"> Published {{gh-format-timeago published_at}}
Published {{gh-format-timeago published_at}} </time>
</time> {{/if}}
{{/if}} {{else}}
{{else}} <span class="draft">Draft</span>
<span class="draft">Draft</span> {{/if}}
{{/if}} </span>
</span> </section>
</section> {{/link-to}}
{{/link-to}} {{/each}}
{{/each}} </ol>
</ol> {{/view}}
{{/view}} </section>
</section> <section class="content-preview js-content-preview">
<section class="content-preview js-content-preview"> {{outlet}}
{{outlet}}
</section>
</section> </section>

48
ghost/admin/templates/settings.hbs
View file

@ -1,28 +1,26 @@
<div class="wrapper"> <aside class="settings-sidebar" role="complementary">
<aside class="settings-sidebar" role="complementary"> <header>
<header> <h1 class="title">Settings</h1>
<h1 class="title">Settings</h1> </header>
</header> <nav class="settings-menu">
<nav class="settings-menu"> <ul>
<ul> {{#view "item-view" tagName="li" class="general"}}
{{#view "item-view" tagName="li" class="general"}} {{#link-to "settings.general"}}General{{/link-to}}
{{#link-to "settings.general"}}General{{/link-to}} {{/view}}
{{/view}}
{{#view "item-view" tagName="li" class="users"}} {{#view "item-view" tagName="li" class="users"}}
{{#link-to "settings.user"}}User{{/link-to}} {{#link-to "settings.user"}}User{{/link-to}}
{{/view}} {{/view}}
{{#if showApps}} {{#if showApps}}
{{#view "item-view" tagName="li" class="apps"}} {{#view "item-view" tagName="li" class="apps"}}
{{#link-to "settings.apps"}}Apps{{/link-to}} {{#link-to "settings.apps"}}Apps{{/link-to}}
{{/view}} {{/view}}
{{/if}} {{/if}}
</ul> </ul>
</nav> </nav>
</aside> </aside>
<section class="settings-content active"> <section class="settings-content active">
{{outlet}} {{outlet}}
</section> </section>
</div>

30
ghost/admin/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
ghost/admin/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;