Use JavaScript for hover dropdowns (fixes #1316)

fairmondo · Feb 7, 2015 · 777e8a1 · 777e8a1
1 parent 4b173fe
commit 777e8a1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git a/app/assets/javascripts/visual/touchhover.coffee b/app/assets/javascripts/visual/touchhover.coffee
@@ -6,20 +6,30 @@ $ ->
         .not($touchedElement)
         .removeClass('touched')
     )
-    .on('touchstart', '.TouchHover', (e) ->
-      $el = $(@)
+    .on(
+      touchstart: (e) ->
+        $el = $(@)
 
-      if $el.hasClass('touched')
-        return true
-      else
-        e.preventDefault()
-        $el
+        if $el.hasClass('touched')
+          return true
+        else
+          e.preventDefault()
+          $el
+            .addClass('touched')
+            .children('.TouchHover--hidden')
+            .fitIntoViewport()
+
+      mouseenter: (e) ->
+        $(@)
           .addClass('touched')
           .children('.TouchHover--hidden')
           .fitIntoViewport()
-    )
-    .on('mouseenter', '.TouchHover', (e) ->
-      $(@)
-        .children('.TouchHover--hidden')
-        .fitIntoViewport()
-    )
+
+      mouseleave: (e) ->
+        # If related target is Browser UI, don't remove class
+        # This is vital if the dropdown includes input elements with
+        # autocorrection
+        unless e.relatedTarget is null
+          $(@).removeClass('touched')
+
+    , '.TouchHover')
diff --git a/app/assets/stylesheets/layout/_header.scss b/app/assets/stylesheets/layout/_header.scss
@@ -107,7 +107,7 @@ $header-nav-link-color-hover: $blue;
   z-index: 101;
   min-width: 11em;
   top: 2.3em;
-  right: 0;
+  left: 0;
   padding: 0.4em 1.4em;
   border-radius: 0 0.4em 0.4em;
   line-height: 1.5em;

diff --git a/app/assets/stylesheets/modules/_touchhover.scss b/app/assets/stylesheets/modules/_touchhover.scss
@@ -6,7 +6,6 @@ TouchHover module
   display: none;
 }
 
-.TouchHover:hover > .TouchHover--hidden,
 .TouchHover.touched > .TouchHover--hidden {
   display: block;
 }

diff --git a/app/views/devise/sessions/_shared.html.slim b/app/views/devise/sessions/_shared.html.slim
@@ -1,7 +1,7 @@
 = semantic_form_for(User.new, as: :user, url: session_path(:user)) do |f|
   = f.semantic_errors
   = f.inputs do
-    = f.input :email, required: false, tooltip: false, input_html: { autocomplete: "off", autofocus: true }
+    = f.input :email, required: false, tooltip: false, input_html: { autofocus: true }
     = f.input :password, required: false, tooltip: false
     - if devise_mapping.rememberable?
       = f.input :remember_me, as: :boolean , label: false