mobile review queue navigation system (bug 839545)

media/css/devreg/menupicker.less

@@ -0,0 +1,72 @@
+@import '../devreg/lib';
+
+#menupicker {
+    position: absolute;
+    display: none;
+    // Paper covers rock.
+    z-index: 1010;
+    background: rgba(0,0,0,.7);
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    * {
+        .border-box;
+    }
+    .menucontent {
+        position: absolute;
+        bottom: 70px;
+        padding: 10px 25px;
+        overflow-y: auto;
+        max-height: 338px;
+        li {
+            width: 270px;
+            margin-bottom: 10px;
+            a {
+                display: block;
+                background-color: #4e4e4e;
+                line-height: 38px;
+                color: #fff;
+                border: 1px solid #2f2e2f;
+                padding: 0 15px;
+                font-weight: bold;
+                border-radius: 2px;
+                &:active {
+                    background-color: #0ac;
+                    color: #333;
+                }
+            }
+        }
+    }
+    h1 {
+        color: #fff;
+        line-height: 38px;
+        border-bottom: 1px solid #6f6f6f;
+        padding: 33px 30px 0;
+        box-shadow: 0 1px 1px #242424;
+        font-weight: bold;
+        font-size: 13px;
+    }
+    footer {
+        position: absolute;
+        bottom: 0;
+        border-top: 1px solid #2d2d2d;
+        padding: 14px;
+        width: 100%;
+        a {
+            border-radius: 2px;
+            display: block;
+            line-height: 40px;
+            font-size: 14px;
+            font-weight: 600;
+            text-align: center;
+            color: #333;
+            .gradient-two-color(#fbfbfb, #ccc);
+        }
+    }
+}
+
+// When the body is overlayed it shouldn't stretch. Giggity.
+.pickerized {
+    overflow: hidden;
+}

media/css/mkt/data-grid.less

@@ -175,15 +175,22 @@ table.data-grid {
 @media (max-width: @mobile-max) {
     .data-grid {
         &.two-col {
+            tbody tr:last-child td {
+                border-bottom: 1px solid #999;
+            }
+            tbody:last-child tr:last-child td {
+                border: 0;
+            }
+            th {
+                font-weight: bold;
+            }
             th, td {
                 text-align: left;
+                padding: 5px 6px;
             }
             th:last-child {
                 width: 30%;
             }
-            th:last-child, td:last-child {
-                padding-left: 6px;
-            }
             td:last-child {
                 text-align: center;
                 vertical-align: middle;
@@ -192,12 +199,9 @@ table.data-grid {
                 height: 24px;
                 line-height: 23px;
             }
+            .sprite-reviewer {
+                top: 0;
+            }
         }
     }
-    // No mobile man is an island.
-    .island {
-        padding: 0;
-        border: 0;
-        .border-radius(0);
-    }
 }

media/css/mkt/reviewers.less

@@ -1391,6 +1391,14 @@ iframe#manifest-contents {
             }
         }
     }
+    #page h1 {
+        background: #d7d2c4;
+        color: #686868;
+        line-height: 38px;
+        margin: 0;
+        padding: 0 8px;
+        border-radius: 3px 3px 0 0;
+    }
     .review-actions .action_nav li {
         display: block;
     }
@@ -1400,5 +1408,15 @@ iframe#manifest-contents {
         overflow-x: auto;
         overflow-y: hidden;
     }
+    // No mobile man is an island.
+    .island {
+        padding: 0;
+        border: 0;
+        .border-radius(0);
+    }
+    .island > p {
+        padding: 5px 6px;
+        line-height: 22px;
+    }
 }
 

media/js/devreg/menupicker.js

@@ -0,0 +1,41 @@
+/*
+ * .menutrigger triggers this overlay.
+ * .menucontent is the ul containing the menu items. This node should have
+ *              a data-title="Title of Menu".
+ *
+ * TODO: Extend this to iterate over all menufiable DOM elms.
+*/
+(function() {
+    var $body = $('body'),
+        $overlay = $('<section id="menupicker"></section>');
+
+    // This JS is only relevant to mobile.
+    if (!$body.hasClass('mobile')) return;
+
+    function dismiss(e) {
+        $overlay.hide();
+        $body.removeClass('pickerized');
+        e.preventDefault();
+    }
+
+    function show(e) {
+        $body.addClass('pickerized');
+        $overlay.show();
+        e.preventDefault();
+    }
+
+    (function() {
+        var $oldmenu = $('.menucontent').detach(),
+            $title = $('<h1>' + $oldmenu.data('title') + '</h1>'),
+            $footer = $('<footer><a href="#">' + gettext('Cancel') + '</a></footer>');
+        $overlay.append($title);
+        $overlay.append($oldmenu);
+        $footer.find('a').click(dismiss);
+        $overlay.append($footer);
+        $body.append($overlay);
+    })();
+
+    // Change click to touch.
+    $('.menutrigger').click(show);
+
+})();

mkt/asset_bundles.py

@@ -82,6 +82,7 @@ CSS = {
         'css/mkt/themes_review.less',
         'css/mkt/legacy-paginator.less',
         'css/mkt/files.less',
+        'css/devreg/menupicker.less',
     ),
     'mkt/splash': (
         'css/mkt/splash.less',
@@ -322,6 +323,7 @@ JS = {
         'js/mkt/install.js',
         'js/mkt/buttons.js',
         'js/mkt/reviewers.js',
+        'js/devreg/menupicker.js',
         'js/devreg/reviewers_init.js',
     ),
     'mkt/stats': (

mkt/reviewers/templates/reviewers/apps_reviewing.html

@@ -9,7 +9,7 @@
 {% block content %}
 
 <header class="c">
-  <h1>{{ pagetitle }}</h1>
+  <h1 class="menutrigger">{{ pagetitle }}</h1>
 </header>
 
 <section class="island">
@@ -67,9 +67,9 @@
             <th>{{ _('Flags') }}</th>
           </tr>
         </thead>
-        <tbody>
-          {% for app in apps %}
-            {% set this_app = app.app %}
+        {% for app in apps %}
+          {% set this_app = app.app %}
+          <tbody>
             <tr data-addon="{{ app.id }}" class="addon-row" id="addon-{{ app.id }}">
               <td class="app-name">{{ app.app.name }}</td>
               <td class="flags">{# Flags #}
@@ -98,8 +98,8 @@
                 </div>
               </td>
             </tr>
-          {% endfor %}
-        </tbody>
+          </tbody>
+        {% endfor %}
       </table>
     {% endif %}
   {% endif %}

mkt/reviewers/templates/reviewers/base.html

@@ -24,8 +24,8 @@
       <nav class="menu-nav app-nav no-img" role="navigation">
         <ul class="c">
           <li>
-            <a href="#" class="controller">{{ _('Queues') }}</a>
-            <ul>
+            <a href="#" class="controller menutrigger">{{ _('Queues') }}</a>
+            <ul class="menucontent" data-title="{{ _('Queues') }}">
               {% for prefix, this, loc, text in queue_tabnav() %}
                 <li>
                   <a href="{{ url('reviewers.%s.%s' % (prefix, loc)) }}">{{ text }}</a>