FIX: make it possible to close popup-input-tips on touch devices, and position them a bit better

app/assets/javascripts/discourse/templates/popup_input_tip.js.handlebars

@@ -1,2 +1,2 @@
-<a href="#" class="close" {{action hide target="view"}}><i class="icon icon-remove-sign"></i></a>
+<span class="close"><i class="icon icon-remove-sign"></i></span>
 {{view.validation.reason}}

app/assets/javascripts/discourse/views/popup_input_tip_view.js

@@ -17,6 +17,10 @@ Discourse.PopupInputTipView = Discourse.View.extend({
   bouncePixels: 6,
   bounceDelay: 100,
 
+  click: function(e) {
+    this.set('shownAt', false);
+  },
+
   good: function() {
     return !this.get('validation.failed');
   }.property('validation'),
@@ -25,10 +29,6 @@ Discourse.PopupInputTipView = Discourse.View.extend({
     return this.get('validation.failed');
   }.property('validation'),
 
-  hide: function() {
-    this.set('shownAt', false);
-  },
-
   bounce: function() {
     if( this.get('shownAt') ) {
       var $elem = this.$();

app/assets/stylesheets/common/input_tip.scss

@@ -1,5 +1,5 @@
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
+@import "foundation/variables";
+@import "foundation/mixins";
 
 .popup-tip {
   position: absolute;
@@ -16,14 +16,15 @@
   &.hide, &.good {
     display: none;
   }
-  a.close {
+  .close {
     float: right;
     color: $black;
     opacity: 0.5;
     font-size: 15px;
     margin-left: 4px;
+    cursor: pointer;
   }
-  a.close:hover {
+  .close:hover {
     opacity: 1.0;
   }
 }

app/assets/stylesheets/mobile/compose.scss

@@ -279,14 +279,15 @@ display: none;
     display: inline;
   }
   .title-input .popup-tip {
-    width: 300px;
-    left: -8px;
-    margin-top: 8px;
+    width: 240px;
+    right: 5px;
   }
   .category-input .popup-tip {
     width: 240px;
-    left: 432px;
-    top: -7px;
+    right: 5px;
+  }
+  .textarea-wrapper .popup-tip {
+    top: 28px;
   }
   button.btn.no-text {
     margin: 7px 0 0 5px;

app/assets/stylesheets/mobile/input_tip.scss

@@ -1,29 +0,0 @@
-@import "../common/foundation/variables";
-@import "../common/foundation/mixins";
-
-.popup-tip {
-  position: absolute;
-  display: block;
-  padding: 5px 10px;
-  z-index: 101;
-  @include border-radius-all(2px);
-  border: solid 1px #955;
-  &.bad {
-    background-color: #b66;
-    color: white;
-    box-shadow: 1px 1px 5px #777, inset 0 0 9px #b55;
-  }
-  &.hide, &.good {
-    display: none;
-  }
-  a.close {
-    float: right;
-    color: $black;
-    opacity: 0.5;
-    font-size: 15px;
-    margin-left: 4px;
-  }
-  a.close:hover {
-    opacity: 1.0;
-  }
-}