mirror of
https://github.com/TryGhost/Ghost.git
synced 2023-12-13 21:00:40 +01:00
Merge pull request #710 from matthojo/Mobile-Tags
Improved Post tagging on Mobile devices
This commit is contained in:
Hannah Wolfe
commit
cb38bb961a
2 changed files with 144 additions and 7 deletions
|
|
@ -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,14 +441,91 @@ body.zen {
|
|||
}
|
||||
}
|
||||
|
||||
.extended-tags { // When the tag bar is exapanded
|
||||
position: static;
|
||||
min-height: 100%;
|
||||
|
||||
#entry-tags {
|
||||
&:after {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
width: 281px;
|
||||
}
|
||||
|
||||
.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;
|
||||
left: 0;
|
||||
right: 165px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-transform: none;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
&:after, &:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 270px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
@include linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
|
||||
@include breakpoint($mobile) {
|
||||
right: 176px;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: auto;
|
||||
left: 29px;
|
||||
@include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
max-width: 80%;
|
||||
max-width: calc(100% - 320px);
|
||||
height: 26px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 20px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
@include transition(width 0.2s linear);
|
||||
|
||||
@include breakpoint($mobile) {
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
width: 115px;
|
||||
max-width: inherit;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-label {
|
||||
|
|
@ -461,10 +539,15 @@ body.zen {
|
|||
cursor: pointer;
|
||||
color: $lightgrey;
|
||||
}
|
||||
|
||||
&.touch {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-input {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: $lightgrey;
|
||||
font-weight: 300;
|
||||
background: transparent;
|
||||
|
|
@ -480,11 +563,11 @@ body.zen {
|
|||
text-shadow: rgba(255,255,255,0.15) 0 1px 0;
|
||||
@include transition;
|
||||
}
|
||||
display: block;
|
||||
float: left;
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
padding: 0 5px;
|
||||
color: $lightgrey;
|
||||
white-space: nowrap;
|
||||
background: lighten($grey, 15%);
|
||||
border-radius: $rounded;
|
||||
box-shadow:
|
||||
|
|
@ -498,6 +581,7 @@ body.zen {
|
|||
@include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// The Tag UI area associated with a post
|
||||
|
||||
/*global window, document, $, _, Backbone, Ghost */
|
||||
/*global window, document, setTimeout, $, _, Backbone, Ghost */
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
|
@ -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: {
|
||||
|
|
@ -37,7 +38,8 @@
|
|||
render: function () {
|
||||
var tags = this.model.get('tags'),
|
||||
$tags = $('.tags'),
|
||||
tagOffset;
|
||||
tagOffset,
|
||||
self = this;
|
||||
|
||||
$tags.empty();
|
||||
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
_.forEach(tags, function (tag) {
|
||||
var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>');
|
||||
$tags.append($tag);
|
||||
$("[data-tag-id=" + tag.id + "]")[0].scrollIntoView(true);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -55,9 +58,48 @@
|
|||
$('.tag-blocks').css({'left': tagOffset + 'px'});
|
||||
}
|
||||
|
||||
$(window).on('resize', self.resize).trigger('resize');
|
||||
|
||||
$('.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 (e) {
|
||||
|
||||
if (publishBar.hasClass("extended-tags") && !$(':hover').last().hasClass("tag")) {
|
||||
publishBar.css("top", "auto").animate({"height": "40px"}, 300, "swing", function () {
|
||||
$(this).removeClass("extended-tags");
|
||||
$(document.activeElement).blur();
|
||||
document.documentElement.style.display = "none";
|
||||
setTimeout(function () { document.documentElement.style.display = 'block'; }, 0);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.scrollTo(0, 1);
|
||||
}
|
||||
},
|
||||
|
||||
showSuggestions: function ($target, _searchTerm) {
|
||||
this.$suggestions.show();
|
||||
var searchTerm = _searchTerm.toLowerCase(),
|
||||
|
|
@ -186,10 +228,19 @@
|
|||
var $tag = $(e.currentTarget),
|
||||
tag = {id: $tag.data('tag-id'), name: $tag.text()};
|
||||
$tag.remove();
|
||||
|
||||
window.scrollTo(0, 1);
|
||||
this.model.removeTag(tag);
|
||||
},
|
||||
|
||||
resize: _.throttle(function () {
|
||||
var $tags = $('.tags');
|
||||
if ($(window).width() > 400) {
|
||||
$tags.css("max-width", $("#entry-tags").width() - 320);
|
||||
} else {
|
||||
$tags.css("max-width", "inherit");
|
||||
}
|
||||
}, 50),
|
||||
|
||||
findMatchingTags: function (searchTerm) {
|
||||
var matchingTagModels,
|
||||
self = this;
|
||||
|
|
@ -217,6 +268,8 @@
|
|||
addTag: function (tag) {
|
||||
var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>');
|
||||
this.$('.tags').append($tag);
|
||||
$(".tag").last()[0].scrollIntoView(true);
|
||||
window.scrollTo(0, 1);
|
||||
this.model.addTag(tag);
|
||||
|
||||
this.$('.tag-input').val('').focus();
|
||||
|
|
|
|||
Loading…
Reference in a new issue