introducing, category confirm actions dialog

media/css/mkt/filters.less

@@ -28,6 +28,8 @@
             display: block;
             color: @white;
             text-align: center;
+            position: absolute;
+            width: 100%;
         }
     }
 }
@@ -46,22 +48,9 @@
         .box-shadow(0 1px 0 0 #f2f4f5);
         height: 35px;
         a {
-            line-height: 33px;
-            border: 1px solid #cdcbcb;
-            display: inline-block;
-            width: 100%;
-            text-align: center;
-            .gradient-two-color(#f7f7f7, @faint-gray);
-            font-weight: 600;
-            color: @text;
-            .ellipsis();
             &:hover {
                 text-decoration: none;
             }
-            &.sel, &:active {
-                background: rgba(68,82,91,.08);
-                border-top: 1px solid #a5b0b6;
-            }
         }
         &:first-child, &:first-child a, &:nth-child(3n+1), &:nth-child(3n+1) a {
             .border-radius(5px 0 0 5px);
@@ -71,3 +60,84 @@
         }
     }
 }
+.toggles li a, .picker {
+    line-height: 33px;
+    border: 1px solid #cdcbcb;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    .gradient-two-color(#f7f7f7, @faint-gray);
+    font-weight: 600;
+    color: @text;
+    .ellipsis();
+    &.sel, &:active {
+        background: rgba(68,82,91,.08);
+        border-top: 1px solid #a5b0b6;
+    }
+}
+.picker {
+    margin: 0;
+    .border-radius(5px);
+    cursor: pointer;
+    font-size: 14px;
+    width: auto;
+    padding: 0 15px;
+}
+.confirm-action {
+    display: none;
+    position: fixed;
+    z-index: 99;
+    bottom: 0;
+    left: 0;
+    padding: 21px 19px;
+    .gradient-two-color(#fff, #888);
+    list-style-type: none;
+    width: 100%;
+    margin: 0;
+    .border-radius(5px 5px 0 0);
+    .box-shadow(0 0 5px 2px rgba(0,0,0,0.5));
+    li {
+        a {
+            .border-radius(5px);
+            width: 100%;
+            margin-bottom: 6px;
+            &.cancel {
+                margin-top: 13px;
+            }
+        }
+    }
+    &.two-col {
+        li {
+            float: left;
+            width: 50%;
+            text-align: left;
+            a {
+                width: 138px;
+            }
+            &:nth-child(2n) {
+                text-align: right;
+            }
+            &:last-child {
+                float: none;
+                width: 100%;
+                a {
+                    width: 100%;
+                }
+            }
+        }
+    }
+    &.show {
+        display: block;
+    }
+}
+.footer-action {
+    top: auto;
+    bottom: 0;
+    text-align: center;
+    a {
+        padding: 0 30px;
+        &:hover {
+            line-height: 31px;
+        }
+    }
+}

media/css/mkt/header.less

@@ -47,7 +47,7 @@
     display: none;
 }
 
-#site-header, .classic-header {
+#site-header, .classic-header, .footer-action {
     > section {
         position: relative;
     }

media/js/mkt/init.js

@@ -10,7 +10,9 @@ var z = {
         return '-' + z.prefix + '-' + property;
     },
     canInstallApps: true,
-    allowAnonInstalls: !!$('body').data('allow-anon-installs')
+    allowAnonInstalls: !!$('body').data('allow-anon-installs'),
+    // if ($('#myDialog li').length > z.confirmBreakNum) add class 'two-col'.
+    confirmBreakNum: 6
 };
 
 z.prefixUpper = z.prefix[0].toUpperCase() + z.prefix.substr(1);

media/js/mkt/search.js

@@ -13,30 +13,51 @@
     z.page.on('click', '#filters .toggles a', function() {
         selectMe($(this));
         return false;
+    }).on('click', '#filters .confirm-action a', function() {
+        var $this = $(this);
+        selectMe($this);
+        $this.closest('.confirm-action').removeClass('show');
+        $('.picker').toggleClass('sel');
+        return false;
     });
 
 
     function selectMe($elm) {
-        var $myUL = $elm.closest('.toggles'),
+        var $myUL = $elm.closest('ul'),
             val = '',
             vars = z.getVars($elm[0].search);
 
+        if ($elm.hasClass('cancel')) {
+            return;
+        }
         $myUL.find('a').removeClass('sel');
 
+
         if ($myUL[0].id == 'filter-prices') {
             val = vars.price || '';
         } else if ($myUL[0].id == 'filter-categories') {
             val = vars.cat || '';
+            $('.picker').text($elm.text());
         } else if ($myUL[0].id == 'filter-sort') {
             val = vars.sort || '';
         }
-        $myUL.find('input[type=hidden]').val(val);
+        $myUL.find('+ input[type=hidden]').val(val);
         $elm.addClass('sel');
     }
 
     // Apply filters button.
-    z.page.on('click', '#filters .header-button.apply', _pd(function() {
+    z.page.on('click', '#filters .button.apply', _pd(function() {
         $('#filters form').submit();
+    })).on('click', '#filters .picker', _pd(function() {
+        $('#filter-categories').addClass('show');
+        if ($('#filter-categories li').length > z.confirmBreakNum) {
+            $('#filter-categories').addClass('two-col');
+        } else {
+            $('#filter-categories').removeClass('two-col');
+        }
+        $(this).toggleClass('sel');
+    })).on('click', '.confirm-action .cancel', _pd(function(e) {
+        $(e.target).closest('.confirm-action').removeClass('show');
     }));
 
     var expandListings = false;

mkt/search/templates/search/results.html

@@ -2,6 +2,11 @@
 
 {% set query_term = query.q %}
 {% set search_url = request.get_full_path() %}
+{% if active['categories'] %}
+  {% set active_cat = active['categories'].text %}
+{% else %}
+  {% set active_cat = None %}
+{% endif %}
 
 {% block title %}{{ mkt_page_title(_('Search Results')) }}{% endblock %}
 
@@ -21,7 +26,6 @@
   <section id="filters">
     <header class="classic-header">
       <a href="#" class="header-button icon back left dismiss"><b></b></a>
-      <a href="#" class="header-button apply right">{{ _('Apply') }}</a>
       <h1>{{ _('Filter') }}</h1>
     </header>
 
@@ -39,24 +43,26 @@
                 </a>
               </li>
             {% endfor %}
-            <input type="hidden" name="price" value="">
           </ul>
+          <input type="hidden" name="price" value="">
         {% endif %}
 
         {% if categories %}
           <h2>{{ _('Filter by category') }}</h2>
-          <ul class="toggles c" id="filter-categories">
+          <p class="picker">{{ active_cat or _('Any') }}</p>
+          <ul class="confirm-action c" id="filter-categories">
             {% for category in categories %}
               <li>
-                <a {% if category.selected %} class="sel"{% endif %}
+                <a class="button{% if category.selected %} sel{% endif %}"
                    href="{{ search_url|urlparams(page=None,
                                                  **category.urlparams) }}">
                   {{ category.text }}
                 </a>
               </li>
             {% endfor %}
-            <input type="hidden" name="cat" value="">
+            <li><a href="#" class="button cancel">{{ _('Cancel') }}</a></li>
           </ul>
+          <input type="hidden" name="cat" value="">
         {% endif %}
 
         {# We're not iterating over all the sort options on purpose. #}
@@ -66,8 +72,12 @@
           <li><a href="#">{{ _('Relevancy') }}</a></li>
           <li><a href="{{ search_url|urlparams(page=None, sort='rating') }}"
                  class="sel">{{ _('Rating') }}</a></li>
-          <input type="hidden" name="sort" value="">
         </ul>
+        <input type="hidden" name="sort" value="">
+
+        <div class="footer-action">
+          <a href="#" class="button apply">{{ _('Apply') }}</a>
+        </div>
       </div>
     </form>
   </section>