TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 04:13:30 +03:00
Code Issues Projects Releases Wiki Activity

Improved Post tagging on non Mobile devices

Browse Source
This commit is contained in:
Matthew Harrison-Jones 2013-09-14 13:25:12 +01:00
parent 0c8f787186
commit 9cfa053dd1
2 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
core/client/assets/sass/layouts/editor.scss
View File

@ -449,7 +449,7 @@ body.zen {
}
}
.tags {
width: 261px;
width: 281px;
}
.tag-label, .tag-label.touch {
@ -473,41 +473,52 @@ body.zen {
position: absolute;
top: 0;
left: 0;
right: 165px;
right: 0;
bottom: 0;
text-transform: none;
padding: 10px 0 0 0;
@include breakpoint($mobile) {
right: 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;
&:after, &:before {
content: "";
position: fixed;
top: 10px;
@include breakpoint($mobile) {
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));
}
&:before {
right: auto;
left: 29px;
@include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
}
}
.tags {
@include box-sizing(border-box);
position: relative;
display: inline-block;
vertical-align: middle;
width: auto;
max-width: 80%;
max-width: calc(100% - 300px);
height: 26px;
padding-left: 20px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
@include transition(width 0.2s linear);
@include breakpoint($mobile) {
position: relative;
width: 156px;
height: 26px;
padding-left: 20px;
overflow-x: scroll;
@include transition(width 0.2s linear);
display: block;
width: 166px;
max-width: inherit;
}
}
@ -530,6 +541,7 @@ body.zen {
.tag-input {
display: inline-block;
vertical-align: top;
color: $lightgrey;
font-weight: 300;
background: transparent;
@ -545,11 +557,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:
@ -564,10 +576,6 @@ body.zen {
}
@include breakpoint($mobile) {
display: inline;
float: none;
}
}
.suggestions {

16
core/client/views/editor-tag-widget.js
View File

@ -38,7 +38,8 @@
render: function () {
var tags = this.model.get('tags'),
$tags = $('.tags'),
tagOffset;
tagOffset,
self = this;
$tags.empty();
@ -46,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);
});
}
@ -56,6 +58,8 @@
$('.tag-blocks').css({'left': tagOffset + 'px'});
}
$(window).on('resize', self.resize).trigger('resize');
$('.tag-label').on('touchstart', function () {
$(this).addClass('touch');
});
@ -224,6 +228,15 @@
this.model.removeTag(tag);
},
resize: _.throttle(function () {
var $tags = $('.tags');
if ($(window).width() > 400) {
$tags.css("max-width", $("#entry-tags").width() - 300);
} else {
$tags.css("max-width", "inherit");
}
}, 50),
findMatchingTags: function (searchTerm) {
var matchingTagModels,
self = this;
@ -251,6 +264,7 @@
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);
this.model.addTag(tag);
this.$('.tag-input').val('').focus();