TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 14:43:08 +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 { .tags {
width: 261px; width: 281px;
} }
.tag-label, .tag-label.touch { .tag-label, .tag-label.touch {
@ -473,41 +473,52 @@ body.zen {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 165px; right: 0;
bottom: 0; bottom: 0;
text-transform: none; text-transform: none;
padding: 10px 0 0 0; padding: 10px 0 0 0;
@include breakpoint($mobile) { &:after, &:before {
right: 0; 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 { @include breakpoint($mobile) {
content: "";
position: fixed;
top: 10px;
right: 128px; 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 { &:before {
right: auto; right: auto;
left: 29px; left: 29px;
@include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00)); @include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
}
} }
} }
.tags { .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) { @include breakpoint($mobile) {
position: relative; display: block;
width: 156px; width: 166px;
height: 26px; max-width: inherit;
padding-left: 20px;
overflow-x: scroll;
@include transition(width 0.2s linear);
} }
} }
@ -530,6 +541,7 @@ body.zen {
.tag-input { .tag-input {
display: inline-block; display: inline-block;
vertical-align: top;
color: $lightgrey; color: $lightgrey;
font-weight: 300; font-weight: 300;
background: transparent; background: transparent;
@ -545,11 +557,11 @@ body.zen {
text-shadow: rgba(255,255,255,0.15) 0 1px 0; text-shadow: rgba(255,255,255,0.15) 0 1px 0;
@include transition; @include transition;
} }
display: block; display: inline;
float: left;
margin-right: 5px; margin-right: 5px;
padding: 0 5px; padding: 0 5px;
color: $lightgrey; color: $lightgrey;
white-space: nowrap;
background: lighten($grey, 15%); background: lighten($grey, 15%);
border-radius: $rounded; border-radius: $rounded;
box-shadow: box-shadow:
@ -564,10 +576,6 @@ body.zen {
} }
@include breakpoint($mobile) {
display: inline;
float: none;
}
} }
.suggestions { .suggestions {

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

@ -38,7 +38,8 @@
render: function () { render: function () {
var tags = this.model.get('tags'), var tags = this.model.get('tags'),
$tags = $('.tags'), $tags = $('.tags'),
tagOffset; tagOffset,
self = this;
$tags.empty(); $tags.empty();
@ -46,6 +47,7 @@
_.forEach(tags, function (tag) { _.forEach(tags, function (tag) {
var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>'); var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>');
$tags.append($tag); $tags.append($tag);
$("[data-tag-id=" + tag.id + "]")[0].scrollIntoView(true);
}); });
} }
@ -56,6 +58,8 @@
$('.tag-blocks').css({'left': tagOffset + 'px'}); $('.tag-blocks').css({'left': tagOffset + 'px'});
} }
$(window).on('resize', self.resize).trigger('resize');
$('.tag-label').on('touchstart', function () { $('.tag-label').on('touchstart', function () {
$(this).addClass('touch'); $(this).addClass('touch');
}); });
@ -224,6 +228,15 @@
this.model.removeTag(tag); 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) { findMatchingTags: function (searchTerm) {
var matchingTagModels, var matchingTagModels,
self = this; self = this;
@ -251,6 +264,7 @@
addTag: function (tag) { addTag: function (tag) {
var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>'); var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>');
this.$('.tags').append($tag); this.$('.tags').append($tag);
$(".tag").last()[0].scrollIntoView(true);
this.model.addTag(tag); this.model.addTag(tag);
this.$('.tag-input').val('').focus(); this.$('.tag-input').val('').focus();