Merge branch 'develop' into feature-mass_upload-rework

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/ajax_spinner.coffee

@@ -1,7 +1,6 @@
 $ ->
-  $(document).ajaxStart ->
-    $('.l-ajax-spinner').fadeIn 200
-
-  $(document).ajaxStop ->
-    $('.l-ajax-spinner').fadeOut 200
-
+  $(document).on
+    'ajaxStart': ->
+      $('.l-ajax-spinner').fadeIn 200
+    'ajaxStop': ->
+      $('.l-ajax-spinner').fadeOut 200

app/assets/javascripts/visual/touchhover.coffee

@@ -0,0 +1,25 @@
+$ ->
+  $('body')
+    .on('touchstart', (e) ->
+      $touchedElement = $(e.target).closest('.TouchHover')
+      $('.TouchHover')
+        .not($touchedElement)
+        .removeClass('touched')
+    )
+    .on('touchstart', '.TouchHover', (e) ->
+      $el = $(@)
+
+      if $el.hasClass('touched')
+        return true
+      else
+        e.preventDefault()
+        $el
+          .addClass('touched')
+          .children('.TouchHover--hidden')
+          .fitIntoViewport()
+    )
+    .on('mouseenter', '.TouchHover', (e) ->
+      $(@)
+        .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/billboards/_billboard-valentines.scss

@@ -0,0 +1,113 @@
+/**
+ * Valentines billboard
+ */
+
+
+// General stuff
+#billboard-valentines > article > ul > li p {
+  text-indent: -1000em;
+}
+
+#billboard-valentines li p,
+#billboard-valentines li div {
+  padding: 0;
+}
+
+
+// Responsive code: small version
+@include till-breakpoint($bp-tablet) {
+  #billboard-valentines {
+    background-image: image-url('welcome/billboard_valentines_small.jpg');
+  }
+
+  #billboard-valentines li#billboard-valentines-link1 p {
+    @include static-position($top: 22px, $left: 0, $height: 28px,
+      $width: 208px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link2 p {
+    @include static-position($top: 193px, $left: 70px, $height: 31px,
+      $width: 101px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link3 p {
+    @include static-position($top: 365px, $left: 68px, $height: 31px,
+      $width: 103px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link2 div {
+    @include static-position($top: 65px, $left: 42px, $bottom: 229px,
+      $right: 35px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link3 div {
+    @include static-position($top: 238px, $left: 42px, $bottom: 56px,
+      $right: 35px);
+  }
+}
+
+
+// Responsive code: medium version
+@include between-breakpoints($bp-tablet, $bp-tablet-horizontal) {
+  #billboard-valentines {
+    background-image: image-url('welcome/billboard_valentines_medium.jpg');
+  }
+
+  #billboard-valentines li#billboard-valentines-link1 p {
+    @include static-position($top: 25px, $left: 159px, $height: 32px,
+      $width: 290px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link2 p {
+    @include static-position($top: 360px, $left: 210px, $height: 31px,
+      $width: 101px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link3 p {
+    @include static-position($top: 360px, $left: 346px, $height: 32px,
+      $width: 103px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link2 div {
+    @include static-position($top: 92px, $left: 180px, $bottom: 77px,
+      $right: 138px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link3 div {
+    @include static-position($top: 92px, $left: 319px, $bottom: 77px,
+      $right: 0);
+  }
+}
+
+
+// Responsive code: big version
+@include at-breakpoint($bp-tablet-horizontal) {
+  #billboard-valentines {
+    background-image: image-url('welcome/billboard_valentines_big.jpg');
+  }
+
+  #billboard-valentines li#billboard-valentines-link1 p {
+    @include static-position($top: 360px, $left: 1px, $height: 32px,
+      $width: 290px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link2 p {
+    @include static-position($top: 360px, $left: 397px, $height: 32px,
+      $width: 101px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link3 p {
+    @include static-position($top: 360px, $left: 595px, $height: 32px,
+      $width: 103px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link2 div {
+    @include static-position($top: 11px, $left: 315px, $bottom: 70px,
+      $right: 201px);
+  }
+
+  #billboard-valentines li#billboard-valentines-link3 div {
+    @include static-position($top: 11px, $left: 517px, $bottom: 70px,
+      $right: 0);
+  }
+}

app/assets/stylesheets/controller/articles.scss

@@ -418,7 +418,7 @@ ul.category-selected-list {
 }
 
 // the sidebar box for books claim
-
+/*
 .books {
   padding: 0;
   margin-top: 1em;
@@ -429,6 +429,19 @@ ul.category-selected-list {
     margin: 0;
   }
 }
+*/
+
+// the sidebar box for subscriptions
+.subscription {
+  padding: 0;
+  margin-bottom: 1em;
+
+  img {
+    display: block;
+    width: 100%;
+    margin: 0;
+  }
+}
 
 // activation links
 

app/assets/stylesheets/controller/carts.scss

@@ -143,8 +143,9 @@ form.change_quantity > .inputs >  ol > li.action {
 }
 
 // styles for send_via_email popup
-#send_via_cart {
+.send_via_cart {
   text-align: right;
+  margin-bottom: 0.5em;
 }
 
 .popup-text {