Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Improved Post tagging on Mobile devices

Browse source
This commit is contained in:
Matthew Harrison-Jones 2013-09-12 16:09:39 +01:00
parent fa62f9024f
commit 0b4d7701d7
2 changed files with 105 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
ghost/admin/assets/sass/layouts/editor.scss
View file

@ -398,6 +398,7 @@ body.zen {
right: 0;
z-index: 900;
box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
@include transform(translateZ(0));
@include breakpoint($netbook) {font-weight: normal;}
@ -440,6 +441,34 @@ body.zen {
}
}
.extended-tags { // When the tag bar is exapanded
position: static;
#entry-tags {
&:after {
right: 10px;
}
}
.tags {
width: 261px;
}
.tag-label, .tag-label.touch {
color: #fff;
}
.tag-input {
width: 100%;
margin-top: 5px;
padding-top: 5px;
padding-left: 10px;
border-top: 1px solid $darkgrey;
}
.right {
display: none;
}
}
#entry-tags {
position: absolute;
top: 0;
@ -448,6 +477,38 @@ body.zen {
bottom: 0;
text-transform: none;
padding: 10px 0 0 0;
@include breakpoint($mobile) {
right: 0;
&:after, &:before {
content: "";
position: fixed;
top: 10px;
right: 128px;
width: 20px;
height: 26px;
@include linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
z-index: 9999;
}
&:before {
right: auto;
left: 29px;
@include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
}
}
}
.tags {
@include breakpoint($mobile) {
position: relative;
width: 156px;
height: 26px;
padding-left: 20px;
overflow-x: scroll;
@include transition(width 0.2s linear);
}
}
.tag-label {
@ -461,6 +522,10 @@ body.zen {
cursor: pointer;
color: $lightgrey;
}
&.touch {
color: inherit;
}
}
.tag-input {
@ -498,6 +563,11 @@ body.zen {
@include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
}
@include breakpoint($mobile) {
display: inline;
float: none;
}
}
.suggestions {

36
ghost/admin/views/editor-tag-widget.js
View file

@ -11,7 +11,8 @@
'keyup [data-input-behaviour="tag"]': 'handleKeyup',
'keydown [data-input-behaviour="tag"]': 'handleKeydown',
'click ul.suggestions li': 'handleSuggestionClick',
'click .tags .tag': 'handleTagClick'
'click .tags .tag': 'handleTagClick',
'click .tag-label': 'mobileTags'
},
keys: {
@ -55,9 +56,41 @@
$('.tag-blocks').css({'left': tagOffset + 'px'});
}
$('.tag-label').on('touchstart', function () {
$(this).addClass('touch');
});
return this;
},
mobileTags: function () {
var mq = window.matchMedia("(max-width: 400px)"),
publishBar = $("#publish-bar");
if (mq.matches) {
if (publishBar.hasClass("extended-tags")) {
publishBar.css("top", "auto").animate({"height": "40px"}, 300, "swing", function () {
$(this).removeClass("extended-tags");
$(".tag-input").blur();
});
} else {
publishBar.animate({"top": 0, "height": $(window).height()}, 300, "swing", function () {
$(this).addClass("extended-tags");
$(".tag-input").focus();
});
}
$(".tag-input").one("blur", function () {
if (publishBar.hasClass("extended-tags")) {
publishBar.css("top", "auto").animate({"height": "40px"}, 300, "swing", function () {
$(this).removeClass("extended-tags");
$(document.activeElement).blur();
});
}
});
}
},
showSuggestions: function ($target, _searchTerm) {
this.$suggestions.show();
var searchTerm = _searchTerm.toLowerCase(),
@ -183,6 +216,7 @@
},
handleTagClick: function (e) {
if (e) { e.stopPropagation(); }
var $tag = $(e.currentTarget),
tag = {id: $tag.data('tag-id'), name: $tag.text()};
$tag.remove();