From ef505643aa220024bc8aae3b8af0d8f4b1ba1ca9 Mon Sep 17 00:00:00 2001 From: Davor Spasovski Date: Wed, 27 Feb 2013 17:25:06 -0800 Subject: [PATCH] mobile review queue navigation system (bug 839545) --- media/css/devreg/menupicker.less | 72 +++++++++++++++++++ media/css/mkt/data-grid.less | 22 +++--- media/css/mkt/reviewers.less | 18 +++++ media/js/devreg/menupicker.js | 41 +++++++++++ mkt/asset_bundles.py | 2 + .../templates/reviewers/apps_reviewing.html | 12 ++-- mkt/reviewers/templates/reviewers/base.html | 4 +- 7 files changed, 154 insertions(+), 17 deletions(-) create mode 100644 media/css/devreg/menupicker.less create mode 100644 media/js/devreg/menupicker.js diff --git a/media/css/devreg/menupicker.less b/media/css/devreg/menupicker.less new file mode 100644 index 0000000000..c4e8f05b65 --- /dev/null +++ b/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; +} diff --git a/media/css/mkt/data-grid.less b/media/css/mkt/data-grid.less index abd8a9ed79..c5b576d9a2 100644 --- a/media/css/mkt/data-grid.less +++ b/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); - } } diff --git a/media/css/mkt/reviewers.less b/media/css/mkt/reviewers.less index acd173ae89..d6de74f574 100644 --- a/media/css/mkt/reviewers.less +++ b/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; + } } diff --git a/media/js/devreg/menupicker.js b/media/js/devreg/menupicker.js new file mode 100644 index 0000000000..ade146abb5 --- /dev/null +++ b/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 = $(''); + + // 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 = $('

' + $oldmenu.data('title') + '

'), + $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); + +})(); diff --git a/mkt/asset_bundles.py b/mkt/asset_bundles.py index f4a7dc1637..9c1d19f446 100644 --- a/mkt/asset_bundles.py +++ b/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': ( diff --git a/mkt/reviewers/templates/reviewers/apps_reviewing.html b/mkt/reviewers/templates/reviewers/apps_reviewing.html index 9ac88d8b19..0158002587 100644 --- a/mkt/reviewers/templates/reviewers/apps_reviewing.html +++ b/mkt/reviewers/templates/reviewers/apps_reviewing.html @@ -9,7 +9,7 @@ {% block content %}
-

{{ pagetitle }}

+

{{ pagetitle }}

@@ -67,9 +67,9 @@ {{ _('Flags') }} - - {% for app in apps %} - {% set this_app = app.app %} + {% for app in apps %} + {% set this_app = app.app %} + {{ app.app.name }} {# Flags #} @@ -98,8 +98,8 @@ - {% endfor %} - + + {% endfor %} {% endif %} {% endif %} diff --git a/mkt/reviewers/templates/reviewers/base.html b/mkt/reviewers/templates/reviewers/base.html index 9ce0e1c153..da64cd4749 100644 --- a/mkt/reviewers/templates/reviewers/base.html +++ b/mkt/reviewers/templates/reviewers/base.html @@ -24,8 +24,8 @@