app/Resources/themes/2013s1_mobile/CategoryBundle/Default/view.html.twig

@@ -20,8 +20,10 @@
     <div class="clearfix"></div>
 </div>
 
-<div class="grid_8 alpha omega row js-filters filters-selected">
-  <span class="last off"><a href="all" class="js-filter-clear-dropdown">{{ 'faceted.clear_all'|trans({}, 'category') }}</a></span>
+<div class="grid_8 alpha omega row js-filter-selected-values off">
+  <div class="grid_6 omega js-filters filter-text">
+    <span class="last"><a href="all" class="js-filter-clear">{{ 'faceted.clear_all'|trans({}, 'category') }}</a></span>
+  </div>
 </div>
 
 {% include 'CategoryBundle:Default:filters.html.twig' %}

web/fx/2013s1_mobile/sass/_filters.scss

@@ -13,9 +13,9 @@
 
         a {
             color: #000;
-            font-size: 0.6em;
             font-weight: bold;
             vertical-align: bottom;
+            text-decoration: none;
         }
 
         &.last {
@@ -28,9 +28,21 @@
     }
 }
 
-.main > .grid_6.filter-text {
-    margin-bottom: 12px;
-    margin-top: 0;
+.filter-show-products {
+    text-transform: uppercase;
+    margin-top: -2px;
+    font-size: 12px;
+    background-color: #969799;
+    padding: 2px 6px;
+    line-height: 1.8em;
+    text-align: center;
+
+    a {
+        color: #fff;
+        font-weight: 700;
+        vertical-align: bottom;
+        text-decoration: none;
+    }
 }
 
 
@@ -46,25 +58,22 @@ ul.filter-dropdown {
   > li.open {
     > a.filter-dropdown-toggle {
       background: url(/fx/images/icons/icons/arrow_down.png) center right no-repeat;
+      font-weight: 700;
     }
   }
 
   // List item (first layer)
   > li {
+      border-top: 1px solid #000;
 
     // Toggle
     > a.filter-dropdown-toggle {
       display: block;
-      text-transform: uppercase;
-      font-weight: 700;
+      font-size: 1.4em;
       margin-right: 5px;
+      padding: 6px 0 6px 5px;
       text-decoration: none;
       background: url(/fx/images/icons/icons/arrow_right.png) center right no-repeat;
-      /*
-       * margin-right: 5px;
-       * padding: 10px 10px 10px 5px;
-       * font-size: 13px;
-       */
 
       // Icon
       > .icon {
@@ -97,6 +106,7 @@ ul.filter-dropdown {
 
   // List item (first layer)
   > li {
+      @include clearfix;
 
     // Dropdown menu
     div.filter-dropdown-menu {
@@ -107,22 +117,18 @@ ul.filter-dropdown {
 
         // List item
         > li {
-          padding: 0;
+            width: 50%;
+            float: left;
+            border-bottom: 1px solid #000;
+            padding-bottom: 8px;
 
           // Label
           label {
             display: block;
-            /*
-             * font-size: 12px;
-             * line-height: 16px;
-             */
-            /* margin: 0; */
-            /* padding: 3px 0; */
-            /* @include clearfix; */
+            font-size: 1.4em;
 
             // Checkbox
-            input[type='checkbox'] {
-              float: left;
+            input {
               margin: 0;
               padding: 0;
               margin-right: 5px;
@@ -137,7 +143,6 @@ ul.filter-dropdown {
 
       // Dropdown menu
       div.filter-dropdown-menu {
-        /* right: 0; */
       }
     }
 
@@ -152,42 +157,6 @@ ul.filter-dropdown {
   }
 }
 
-// --------------------------------------------------
-// Button (clear and close)
-// --------------------------------------------------
-//
-
-// Dropdown list
-ul.filter-dropdown {
-
-  // List item (first layer)
-  > li {
-
-    // Dropdown menu
-    div.filter-dropdown-menu {
-
-      // Button container
-      div.filter-button-container {
-        /* height: 24px; */
-        /* line-height: 24px; */
-        /* padding: 0 10px; */
-
-        // Clear button
-        a.js-filter-clear {
-          /* font-size: 12px; */
-          line-height: inherit;
-        }
-
-        // Close button
-        a.js-filter-close {
-          line-height: inherit;
-
-          // Icon
-          .icon {
-            /* font-size: 16px; */
-          }
-        }
-      }
-    }
-  }
+.filter-button-container a {
+    display: none;
 }

web/fx/scripts/filters.js

@@ -26,11 +26,11 @@ var filters = (function ($) {
 
     setSavedValues();
     eventHandlersSetup();
-    nissenerenhest();
+    filterDropdownStateHandler();
     mobileSetup();
   };
 
-  function nissenerenhest() {
+  function filterDropdownStateHandler() {
     // Filter toggle click
     $('ul.filter-dropdown a.filter-dropdown-toggle').on('click', function(event) {