Fixes #1247, implement hovermenus for navigation and filters

app/assets/javascripts/application.js.coffee

@@ -60,6 +60,7 @@
 #= require vendor/jquery.caret
 #= require vendor/jquery.details
 ## require vendor/jquery.history
+#= require vendor/jquery.fitintoviewport
 
 #= require models/article/categories
 #= require models/article/search_input
@@ -74,24 +75,23 @@
 #= require models/cart/courier
 
 #= require visual/accordion
-#= require visual/tooltip
+#= require visual/active_toggle
+#= require visual/ajax_spinner
 #= require visual/button
+#= require visual/colorbox
+#= require visual/details
+#= require visual/iframe
+#= require visual/input_enforcement
+#= require visual/news_header_close
 #= require visual/notice_close
 #= require visual/notice_scroll
-#= require visual/news_header_close
-#= require visual/colorbox
+#= require visual/remote_validation
 #= require visual/selectbox
+#= require visual/slides
+#= require visual/tooltip
+#= require visual/touchhover
 #= require visual/truncator
 #= require visual/wait_for_submit
-#= require visual/slides
-#= require visual/iframe
-#= require visual/active_toggle
-#= require visual/touch_hover
-#= require visual/ajax_spinner
-#= require visual/category_dropdown_max_right
-#= require visual/remote_validation
-#= require visual/input_enforcement
-#= require visual/details
 
 #= require inputs/password_complexify
 #= require inputs/socialshareprivacy

app/assets/javascripts/vendor/jquery.fitintoviewport.js

@@ -0,0 +1,55 @@
+/*
+ * jQuery plugin fitIntoViewport
+ * ---------------------------
+ * Repositions element(s) horizontally if some parts of them are not in the
+ * viewport.
+ * If element
+ *  - is bigger than window -> center
+ *  - reaches over left edge -> push right
+ *  - reaches over right edge -> push left
+ *
+ */
+
+(function( $ ) {
+  $.fn.fitIntoViewport = function() {
+    var window_width = $(window).width();
+
+    return this.each(function() {
+      var $this = $(this),
+        left_offset, outer_width, offset_parent,
+        absolute_x, relative_x;
+
+      // clear target css 'left' and 'right' before calculating
+      $this.css({
+        left  : '',
+        right : ''
+      });
+
+      left_offset = $this.offset().left;
+      outer_width = $this.outerWidth();
+
+      // recalculate x position
+      if (outer_width > window_width) {
+        absolute_x = Math.floor((window_width - outer_width) / 2);
+      }
+      else if (left_offset < 0) {
+        absolute_x = 0;
+      }
+      else if (left_offset + outer_width > window_width) {
+        absolute_x = window_width - outer_width;
+      }
+      else {
+        return false;
+      }
+
+      // calculate x relative to offset parent
+      offset_parent = left_offset - $this.position().left;
+      relative_x = absolute_x - offset_parent;
+
+      $this.css({
+        left  : relative_x,
+        right : 'auto'
+      });
+    });
+  };
+}( jQuery ));

app/assets/javascripts/visual/active_toggle.coffee

@@ -9,8 +9,9 @@ $ ->
     container.find(".JS-active-toggle--target").each (i, element) ->
       $el = $(element)
       if $el.closest('.JS-active-toggle--container')[0] == container[0]
-        $el.toggleClass('is-active')
-        document.Fairmondo.push_left_if_necessary $el # Attention: We assume that users don't resize browsers. push_left is not yet reset here.
+        $el
+          .toggleClass('is-active')
+          .fitIntoViewport()
 
     #negative scope
     exclusiveContainer = $(@).closest '.JS-active-toggle--exclusive-container'

app/assets/javascripts/visual/touchhover.coffee

@@ -0,0 +1,20 @@
+$ ->
+  $('body')
+    .on('touchstart', (e) ->
+      $touchedElement = $(e.target).closest('.TouchHover')
+      $('.TouchHover')
+        .not($touchedElement)
+        .removeClass('touched')
+    )
+    .on('touchstart', '.TouchHover', (e) ->
+      $el = $(e.target).closest('.TouchHover')
+
+      if $el.hasClass('touched')
+        return true
+      else
+        e.preventDefault()
+        $el.addClass('touched')
+        $el
+          .children('.TouchHover--hidden')
+          .fitIntoViewport()
+    )

app/assets/stylesheets/application.scss

@@ -80,6 +80,7 @@
 @import "modules/search";           // search result, filters, categories
 @import "modules/tabs";             // tab navigation
 @import "modules/tag";              // small eco/fair/s&p tags
+@import "modules/touchhover";       // hover dropdowns
 @import "modules/user";             // user profile tile
 
 

app/assets/stylesheets/layout/_header.scss

@@ -17,14 +17,10 @@ $header-nav-link-color-hover: $blue;
 }
 
 // Temporary rename message
-p.l-header-rename {
+.l-header-rename {
   float: left;
   margin-top: 0.8em;
   font-weight: 300;
-
-  @include till-breakpoint($bp-mobile-horizontal-big) {
-    display: none;
-  }
 }
 
 
@@ -49,6 +45,22 @@ p.l-header-rename {
   height : 43px;
 }
 
+
+// Reduced layout
+
+.l-reduced .l-header {
+  padding: 0.7em 0 1em;
+  background-color: $header-highlight-color;
+
+  .l-header-logo span {
+    margin: 0;
+  }
+}
+
+
+
+// Nav
+
 .l-header-nav {
   margin-top: 0.2em;
   float: right;
@@ -69,23 +81,25 @@ p.l-header-rename {
   }
 }
 
-.l-header-nav > ul > li > a {
-  @include till-breakpoint($bp-mobile) {
-    font-size: 0.9em;
-  }
+.l-header-nav > ul > li > a,
+.l-header-nav > ul > li > span {
   color: $black;
   padding: 0.5em;
   border-radius: 0.5em;
-  &:hover, &.is-active {
-    background: $lighter-gray;
-  }
-  &.is-active {
-    border-radius: 0.5em 0.5em 0 0;
-  }
 }
 
+.l-header-nav > ul > li:hover > a,
+.l-header-nav > ul > li:hover > span {
+  background: $lighter-gray;
+}
+
+.l-header-nav > ul > li.TouchHover:hover > a,
+.l-header-nav > ul > li.TouchHover:hover > span {
+  border-radius: 0.5em 0.5em 0 0;
+}
+
+
 .l-header-nav-dropdown {
-  display: none;
   @include color-links($black, $header-nav-link-color-hover);
   position: absolute;
   background: white;
@@ -125,57 +139,17 @@ ul.l-header-nav-dropdown > li, ul#devise_links > li {
 }
 
 
-.l-header-nav-dropdown.is-active {
-  display: block;
-}
-
-
-.l-header-cart {
-  padding: 0.4em 0.5em;
-  width: 180px;
-  text-align: center;
-}
-.l-header-cart-list {
-  list-style: none;
-  padding: 0;
-}
-.l-header-cart-item {
-  font-size: 11px;
-  line-height: 14px;
-  float: right;
-
-  img {
-    max-height: 40px;
-    max-width: 58px;
-    margin: 0 6px 6px 0;
-    float: left;
-  }
-
-  .l-header-cart-item-title, .l-header-cart-item-quantity {
-    display: inline-block;
-    width: 116px;
-    text-align: left;
-    overflow: hidden;
-  }
+/********************************* Breakpoints ********************************/
 
-  .l-header-cart-item-title {
-    height: 28px;
-  }
-
-  &:hover .l-header-cart-item-quantity, .l-header-cart-item-quantity {
-    color: $gray;
-    position: relative;
-    top: -3px;
+@include till-breakpoint($bp-mobile) {
+  .l-header-nav > ul > li > a,
+  .l-header-nav > ul > li > span {
+    font-size: 0.9em;
   }
 }
 
-
-// Reduced layout
-.l-reduced .l-header {
-  padding: 0.7em 0 1em;
-  background-color: $header-highlight-color;
-
-  .l-header-logo span {
-    margin: 0;
+@include till-breakpoint($bp-mobile-horizontal-big) {
+  .l-header-rename {
+    display: none;
   }
 }

app/assets/stylesheets/layout/_header_categories.scss

@@ -2,9 +2,6 @@
 .l-header-categories {
   @include container($screen-width);
   padding: 0 $screen-padding;
-  @include till-breakpoint($bp-tablet-horizontal) {
-    display: none;
-  }
   margin-top: 0.5em;
   text-align: center;
 }
@@ -25,21 +22,20 @@
   font-size: 1em;
   line-height: 1em;
   color: $blue;
-  &:hover, &.touch-hover {
+  &:hover {
     background: white;
     text-decoration: underline;
     cursor: pointer;
   }
   border-radius: 5px;
 }
 
-
-
 .l-header-categories-children {
   padding:0;
   list-style:none;
   position:absolute;
-  left:-999em; /* Hides the drop down */
+  left: 0; /* Hides the drop down */
+  top: 1.8em;
   z-index: 12;  /* z-index should be higher than 10 because of SlideJS billboards */
   display:table;
   background: white;
@@ -61,13 +57,17 @@
     padding: 1em;
     min-width: 6em;
     display: table-cell;
-    &:hover, &.touch-hover {
+    &:hover {
       color:$black;
     }
   }
 }
 
-.l-header-categories > ul > li:hover .l-header-categories-children, .l-header-categories > ul > li.touch-hover .l-header-categories-children{
-  left:0;
-  top:1.8em;
+
+/********************************* Breakpoints ********************************/
+
+@include till-breakpoint($bp-tablet-horizontal) {
+  .l-header-categories {
+    display: none;
+  }
 }