TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #318 from matthojo/mobile-interactions

Browse Source 
Improved mobile interactions
This commit is contained in:
Hannah Wolfe 2013-08-01 00:12:25 -07:00
commit f18c7f22c3
6 changed files with 86 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
core/client/assets/lib/jquery-utils.js vendored
View File

@ -5,7 +5,7 @@
(function () {
"use strict";
// UTILS
// ## UTILS
/**
* Allows to check contents of each element exactly
@ -80,6 +80,66 @@
return this;
};
$('.overlay').hideAway(); // TODO: Move to a more sensible global file.
// ## GLOBALS
/**
* Hammer.js
*/
var Hammer = $(document).hammer({stop_browser_behavior: { touchAction: true }});
Hammer.on("swiperight", "#global-header", function (event) {
if (window.matchMedia('(max-width: 400px)').matches) {
event.gesture.preventDefault();
$('body').addClass('off-canvas');
}
});
Hammer.on("swipeleft", "#main-menu", function (event) {
if (window.matchMedia('(max-width: 400px)').matches) {
event.gesture.preventDefault();
$('body').removeClass('off-canvas');
}
});
Hammer.on("tap swipeleft", ".manage .content-list ol li", function (event) {
if (window.matchMedia('(max-width: 800px)').matches) {
event.gesture.preventDefault();
$(".content-list").animate({right: "100%", left: "-100%", 'margin-right': "15px"}, 300);
$(".content-preview").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
}
});
Hammer.on("swiperight", ".content-preview", function (event) {
if (window.matchMedia('(max-width: 800px)').matches) {
event.gesture.preventDefault();
$(".content-list").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
$(".content-preview").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300);
}
});
Hammer.on("tap swipeleft", ".settings .settings-menu li", function (event) {
if (window.matchMedia('(max-width: 800px)').matches) {
event.gesture.preventDefault();
$(".settings-sidebar").animate({right: "100%", left: "-102%", 'margin-right': "15px"}, 300);
$(".settings-content").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
}
});
Hammer.on("swiperight", ".settings-content", function (event) {
if (window.matchMedia('(max-width: 800px)').matches) {
event.gesture.preventDefault();
$(".settings-sidebar").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
$(".settings-content").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300);
}
});
$('[data-off-canvas]').on('click', function (e) {
if (window.matchMedia('(max-width: 650px)').matches) {
e.preventDefault();
$('body').toggleClass('off-canvas');
}
});
$('.overlay').hideAway();
}());

9
core/client/assets/sass/layouts/manage.scss
View File

@ -32,9 +32,6 @@
background: #fff;
box-shadow: $shadow;
@include breakpoint(900px) {
width:300px;
}
@include breakpoint($tablet) {
width:auto;
right:0;
@ -182,9 +179,11 @@
border-left:$lightbrown 2px solid;
background: #fff;
box-shadow: $shadow;
@include breakpoint(900px) {
@include breakpoint($tablet) {
width: auto;
left: 300px;
left: 100%;
right: -100%;
margin-left: 15px;
}
.unfeatured {

11
core/client/assets/sass/layouts/settings.scss
View File

@ -48,6 +48,7 @@
left:0;
bottom:0;
z-index: 700;
background: #FFFFFF;
box-shadow: $lightbrown 1px 0 0;
@include breakpoint($tablet) {
width:100%;
@ -157,7 +158,15 @@
right:0;
left:20%;
bottom:0;
@include breakpoint($tablet) { display: none; }
background: #FFFFFF;
@include breakpoint($tablet) {
display: none;
width: 100%;
left: 100%;
right: -100%;
margin-left: 15px;
}
display: none;
&.active {display:block;}

7
core/client/assets/vendor/jquery.hammer.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
core/client/tagui.js
View File

@ -162,13 +162,6 @@
$(e.currentTarget).remove();
}
function handleClickOff(e) {
if (window.matchMedia('(max-width: 650px)').matches) {
e.preventDefault();
$('body').toggleClass('off-canvas');
}
}
$(document).ready(function () {
suggestions = $("ul.suggestions").hide(); // Initnialise suggestions overlay
@ -182,7 +175,7 @@
.on('keydown', handleTagKeyDown);
$('ul.suggestions').on('click', "li", handleSuggestionClick);
$('.categories').on('click', ".category", handleCategoryClick);
$('[data-off-canvas]').on('click', handleClickOff);
});
}());

3
core/server/views/default.hbs
View File

@ -11,7 +11,7 @@
<meta name="author" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" href="/favicon.ico">
@ -53,6 +53,7 @@
<script src="/public/vendor/countable.js"></script>
<script src="/public/vendor/to-title-case.js"></script>
<script src="/public/vendor/packery.pkgd.min.js"></script>
<script src="/public/vendor/jquery.hammer.min.js"></script>
<script src="/public/lib/jquery-utils.js"></script>
<script src="/public/init.js"></script>