From 0b4d7701d75a5e3da97cdffaa362fa66655ef960 Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Thu, 12 Sep 2013 16:09:39 +0100
Subject: [PATCH 1/4] Improved Post tagging on Mobile devices

---
 ghost/admin/assets/sass/layouts/editor.scss | 70 +++++++++++++++++++++
 ghost/admin/views/editor-tag-widget.js      | 36 ++++++++++-
 2 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/assets/sass/layouts/editor.scss b/ghost/admin/assets/sass/layouts/editor.scss
index 310a2669ff..93aabf2fd4 100644
--- a/ghost/admin/assets/sass/layouts/editor.scss
+++ b/ghost/admin/assets/sass/layouts/editor.scss
@@ -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 {
diff --git a/ghost/admin/views/editor-tag-widget.js b/ghost/admin/views/editor-tag-widget.js
index 0fe20d8155..d64a02fcfc 100644
--- a/ghost/admin/views/editor-tag-widget.js
+++ b/ghost/admin/views/editor-tag-widget.js
@@ -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();

From 40fa2c0b6872160861a172f81b4350638774c9d9 Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Sat, 14 Sep 2013 13:25:12 +0100
Subject: [PATCH 2/4] Improved Post tagging on non Mobile devices

---
 ghost/admin/assets/sass/layouts/editor.scss | 66 ++++++++++++---------
 ghost/admin/views/editor-tag-widget.js      | 16 ++++-
 2 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/ghost/admin/assets/sass/layouts/editor.scss b/ghost/admin/assets/sass/layouts/editor.scss
index 93aabf2fd4..9cad1b7d1e 100644
--- a/ghost/admin/assets/sass/layouts/editor.scss
+++ b/ghost/admin/assets/sass/layouts/editor.scss
@@ -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 {
diff --git a/ghost/admin/views/editor-tag-widget.js b/ghost/admin/views/editor-tag-widget.js
index d64a02fcfc..8b7e055e42 100644
--- a/ghost/admin/views/editor-tag-widget.js
+++ b/ghost/admin/views/editor-tag-widget.js
@@ -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();

From 8889be149b2ebed27550161196d391ec5680b5cc Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Sat, 14 Sep 2013 18:14:46 +0100
Subject: [PATCH 3/4] Bug Fixes: Tags no longer overlap 'settings' icon and
 scroll bars have been removed

---
 ghost/admin/assets/sass/layouts/editor.scss | 9 +++++----
 ghost/admin/views/editor-tag-widget.js      | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ghost/admin/assets/sass/layouts/editor.scss b/ghost/admin/assets/sass/layouts/editor.scss
index 9cad1b7d1e..29cc2182b0 100644
--- a/ghost/admin/assets/sass/layouts/editor.scss
+++ b/ghost/admin/assets/sass/layouts/editor.scss
@@ -489,7 +489,7 @@ body.zen {
         z-index: 9999;
 
         @include breakpoint($mobile) {
-            right: 128px;
+            right: 176px;
         }
     }
 
@@ -501,23 +501,24 @@ body.zen {
 }
 
 .tags {
-    @include box-sizing(border-box);
     position: relative;
     display: inline-block;
     vertical-align: middle;
     width: auto;
     max-width: 80%;
-    max-width: calc(100% - 300px);
+    max-width: calc(100% - 320px);
     height: 26px;
     padding-left: 20px;
+    padding-bottom: 20px;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
     @include transition(width 0.2s linear);
 
     @include breakpoint($mobile) {
+        @include box-sizing(border-box);
         display: block;
-        width: 166px;
+        width: 115px;
         max-width: inherit;
     }
 }
diff --git a/ghost/admin/views/editor-tag-widget.js b/ghost/admin/views/editor-tag-widget.js
index 8b7e055e42..73baaf1b67 100644
--- a/ghost/admin/views/editor-tag-widget.js
+++ b/ghost/admin/views/editor-tag-widget.js
@@ -231,7 +231,7 @@
         resize: _.throttle(function () {
             var $tags = $('.tags');
             if ($(window).width() > 400) {
-                $tags.css("max-width", $("#entry-tags").width() - 300);
+                $tags.css("max-width", $("#entry-tags").width() - 320);
             } else {
                 $tags.css("max-width", "inherit");
             }

From 12d9d273270baf67feb030b61f5a7900e1b652be Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Mon, 16 Sep 2013 08:59:10 +0100
Subject: [PATCH 4/4] Bug Fix: Clicking on a Tag on the Mobile Tag view screen
 will no longer shrink the view

---
 ghost/admin/assets/sass/layouts/editor.scss |  5 +++++
 ghost/admin/views/editor-tag-widget.js      | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/ghost/admin/assets/sass/layouts/editor.scss b/ghost/admin/assets/sass/layouts/editor.scss
index 29cc2182b0..57bcf8585c 100644
--- a/ghost/admin/assets/sass/layouts/editor.scss
+++ b/ghost/admin/assets/sass/layouts/editor.scss
@@ -443,6 +443,8 @@ body.zen {
 
 .extended-tags { // When the tag bar is exapanded
     position: static;
+    min-height: 100%;
+    
     #entry-tags {
         &:after {
             right: 10px;
@@ -487,6 +489,7 @@ body.zen {
         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;
@@ -512,6 +515,7 @@ body.zen {
     padding-bottom: 20px;
     overflow-x: auto;
     overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
     white-space: nowrap;
     @include transition(width 0.2s linear);
 
@@ -520,6 +524,7 @@ body.zen {
         display: block;
         width: 115px;
         max-width: inherit;
+        padding-bottom: 0;
     }
 }
 
diff --git a/ghost/admin/views/editor-tag-widget.js b/ghost/admin/views/editor-tag-widget.js
index 73baaf1b67..17e576ab5e 100644
--- a/ghost/admin/views/editor-tag-widget.js
+++ b/ghost/admin/views/editor-tag-widget.js
@@ -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";
@@ -84,14 +84,19 @@
                     });
                 }
 
-                $(".tag-input").one("blur", function () {
-                    if (publishBar.hasClass("extended-tags")) {
+                $(".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);
             }
         },
 
@@ -220,11 +225,10 @@
         },
 
         handleTagClick: function (e) {
-            if (e) { e.stopPropagation(); }
             var $tag = $(e.currentTarget),
                 tag = {id: $tag.data('tag-id'), name: $tag.text()};
             $tag.remove();
-
+            window.scrollTo(0, 1);
             this.model.removeTag(tag);
         },
 
@@ -265,6 +269,7 @@
             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();