diff --git a/reviewboard/static/rb/css/defs.less b/reviewboard/static/rb/css/defs.less index 454e56f2e60595a27ecd984b6c7edb9e7881d3ff..e403b2de9b679bc1311197d2e47238f61f8a9f39 100644 --- a/reviewboard/static/rb/css/defs.less +++ b/reviewboard/static/rb/css/defs.less @@ -22,7 +22,7 @@ 2 * @headerbar-logo-padding-horiz; @headerbar-bg: #333333; @headerbar-bg-active: #555555; -@headerbar-padding: 0.5em; +@headerbar-padding: 5px; @headerbar-menu-min-width: 9em; @navbar-bg: @light-blue; @@ -201,6 +201,16 @@ @dashboard-sidebar-count-vert-padding: 0px; @dashboard-sidebar-count-horiz-padding: 8px; +// Mobile +@mobile-navbar-hide-margin-left: -160px; +@mobile-medium-width-720: 720px; +.on-mobile-medium-screen-720(@rules) { + @media screen and (max-width: @mobile-medium-width-720), + screen and (max-device-width: @mobile-medium-width-720) and (orientation: landscape) { + @rules(); + } +} + @import (reference) "mixins/gradients.less"; @import (reference) "mixins/style.less"; diff --git a/reviewboard/static/rb/css/pages/base.less b/reviewboard/static/rb/css/pages/base.less index cfbe1173096597526c578b5337b7e9c4a2f870ef..72b1646dabcf705c2475a4c21d370587f260ebf0 100644 --- a/reviewboard/static/rb/css/pages/base.less +++ b/reviewboard/static/rb/css/pages/base.less @@ -46,6 +46,10 @@ textarea { z-index: @z-index-base; float: right; + .on-mobile-medium-screen-720({ + display: none; + }); + li { display: block; float: right; @@ -190,6 +194,11 @@ textarea { color: white; margin: 0; padding: @headerbar-padding; + height: 25px; + + .on-mobile-medium-screen-720({ + height: 30px; + }); br { clear: both; @@ -200,6 +209,16 @@ textarea { position: absolute; top: -2px; left: @headerbar-logo-padding-horiz; + cursor: pointer; + z-index: @z-index-menu; + + .on-mobile-medium-screen-720({ + height: 25px; + width: 25px; + padding: 5px; + top: -4px; + left: 2px; + }); } #title { @@ -211,31 +230,61 @@ textarea { margin: 0; padding: 0; + .on-mobile-medium-screen-720({ + line-height: 23px; + }); + a { color: white; font-size: 120%; text-decoration: none; + + .on-mobile-medium-screen-720({ + padding-left: 35px; + }); } .version { color: #E0E0E0; font-weight: normal; font-size: 90%; + + .on-mobile-medium-screen-720({ + display: none; + }); } } + #search-icon { + display: none; + float: right; + cursor: pointer; + padding: 5px; + + .on-mobile-medium-screen-720({ + display: block; + }); + } + #search { - float: right; - margin: 0 1em; - - input { - border: 1px black solid; - margin: 0; - padding: 2px; - .border-radius(6px); - background-color: #EEEEEE; - font-size: 1.2em; - } + float: right; + margin: 0 1em; + + .on-mobile-medium-screen-720({ + position: absolute; + margin-top: 3px; + right: 25px; + display: none; + }); + + input { + border: 1px black solid; + margin: 0; + padding: 2px; + .border-radius(6px); + background-color: #EEEEEE; + font-size: 1.2em; + } } } @@ -251,20 +300,65 @@ textarea { padding-top: 0.2em; padding-left: @headerbar-padding-left; + .on-mobile-medium-screen-720({ + padding-left: 0px; + }); + img { display: inline; vertical-align: middle; } } +#mobile-menu-mask { + display: none; + background-color: black; + .opacity(50); + width: 100%; + height: 100%; + z-index: @z-index-base; + position: absolute; + top: 40px; + left: 0; +} /* * The container for the navigation bar. */ #navbar-container { margin: 0 0 1em 0; + .on-mobile-medium-screen-720({ + position: absolute; + z-index: @z-index-menu; + left: @mobile-navbar-hide-margin-left; + height: 100%; + background: @light-blue; + }); } +#mobile-account-nav { + display: none; + padding-left: 0px; + + .on-mobile-medium-screen-720({ + display: block; + }); + + > li > a { + display: none; + } + + ul { + padding-left: 10px; + } + + li { + list-style: none; + display: block; + margin: 0px 1em 0px 0px; + line-height: 30px; + } +} /* * The navigation bar. @@ -281,10 +375,18 @@ textarea { padding: @headerbar-padding; padding-left: @headerbar-padding-left; + .on-mobile-medium-screen-720({ + padding-left: 10px; + margin-top: 10px; + }); + li { display: inline; height: 30px; margin: 0 1em 0 0; + .on-mobile-medium-screen-720({ + display: block; + }); } a { @@ -304,6 +406,9 @@ textarea { #page-container { padding: 0 @page-container-padding @page-container-padding @page-container-padding; + .on-mobile-medium-screen-720({ + margin-top: 10px; + }); } /* diff --git a/reviewboard/static/rb/js/views/headerView.js b/reviewboard/static/rb/js/views/headerView.js new file mode 100644 index 0000000000000000000000000000000000000000..c123c1459b79d66fa73d4c0ba97f21e04a7df413 --- /dev/null +++ b/reviewboard/static/rb/js/views/headerView.js @@ -0,0 +1,63 @@ +/* + * Site Header + */ +RB.HeaderView = Backbone.View.extend({ + events: { + 'click #logo': '_handleLogoClick', + 'click #mobile-menu-mask': '_closeMobileMenu', + 'click #search-icon': '_toggleSearchBar' + }, + + /* + * Initializes the header. + */ + initialize: function() { + var e = this; + $(window).on("resize", _.throttle(function(){ + if ($(window).width() > 720) { + e._closeMobileMenu(); + } + }, 100)); + }, + + _handleLogoClick: function() { + if ($(window).width() <= 720) { + this._mobileMenuToggle( + !$('#navbar-container').hasClass('menu-active')); + } else { + window.location.href = '/'; + } + }, + + _toggleSearchBar: function() { + this.$('#search').toggle(); + }, + + _closeMobileMenu: function() { + this._mobileMenuToggle(false); + }, + + /* + * Mobile Menu toggle for Navbar. + * This will control the open and close of mobile navbar menu and menu mask + * + * @param {bool} toggle To open or close the menu + */ + _mobileMenuToggle: function(toggle) { + if (toggle) { + $('#navbar-container').animate({ + left: '0px' + }, function() { + $(this).addClass('menu-active'); + }); + $('#mobile-menu-mask').show(); + } else { + $('#mobile-menu-mask').hide(); + $('#navbar-container').animate({ + left: '-160px' + }, function() { + $(this).removeClass('menu-active'); + }); + } + } +}); \ No newline at end of file diff --git a/reviewboard/staticbundles.py b/reviewboard/staticbundles.py index d0cbf0004ca7adf9e4ce713f446d6b6dcee550c0..f21f4c041852468369c239419acf0741137adea2 100644 --- a/reviewboard/staticbundles.py +++ b/reviewboard/staticbundles.py @@ -147,6 +147,7 @@ PIPELINE_JS = dict({ 'rb/js/ui/views/dialogView.js', 'rb/js/ui/views/textEditorView.js', 'rb/js/models/userSessionModel.js', + 'rb/js/views/headerView.js' ), 'output_filename': 'rb/js/base.min.js', }, diff --git a/reviewboard/templates/base.html b/reviewboard/templates/base.html index d14ec5a4b70eddb7d0ab35f4dbf4cb4d9713db55..b1431ac1d990d2f4f6869cb031ba295bf66c89b8 100644 --- a/reviewboard/templates/base.html +++ b/reviewboard/templates/base.html @@ -114,6 +114,8 @@ loginURL: "{% url 'login' %}" {% endif %} }); + + new RB.HeaderView({ el: $('#headerbar') }); {% block scripts-post %}{% endblock %} {% block js_extensions %} diff --git a/reviewboard/templates/base/_nav_support_menu.html b/reviewboard/templates/base/_nav_support_menu.html new file mode 100644 index 0000000000000000000000000000000000000000..0cad6aa71bf0449fd00839e65d7bc429e67984d0 --- /dev/null +++ b/reviewboard/templates/base/_nav_support_menu.html @@ -0,0 +1,35 @@ +{% load djblets_utils i18n gravatars rb_extensions %} + +
  • + {% trans "Support" %} ▾ + +
    • +{% if request.user.is_authenticated %} +
  • +{% spaceless %} + +{% if siteconfig_settings.integration_gravatars %} + {% gravatar user 32 %} +{% endif %} + {{request.user.username}} ▾ + +{% endspaceless %} + +
    • +{% else %} +
  • {% trans "Log in" %}
    • +{# XXX Using default sucks, but siteconfig defaults don't #} +{# work from templates. #} +{% if auth_backends.0.supports_registration and siteconfig_settings.auth_enable_registration|default_if_none:1 %} +
  • {% trans "Register" %}
    • +{% endif %} +{% endif %}{# !is_authenticated #} \ No newline at end of file diff --git a/reviewboard/templates/base/branding.html b/reviewboard/templates/base/branding.html index 418dfba085ed222e19b4c4f6876acc5b47fd00fc..6f2cda88ae07e43ef4770d72d7c7446e14e9764c 100644 --- a/reviewboard/templates/base/branding.html +++ b/reviewboard/templates/base/branding.html @@ -1,6 +1,6 @@ {% load staticfiles %}
    - +

    Review Board {{version}}{% if section_title %} - {{section_title}}{% endif %} diff --git a/reviewboard/templates/base/headerbar.html b/reviewboard/templates/base/headerbar.html index 81ec2b5878e62245827a11082f5358b981aada91..0a5d98fa27f53b1507dff84d401304305f6b0037 100644 --- a/reviewboard/templates/base/headerbar.html +++ b/reviewboard/templates/base/headerbar.html @@ -3,43 +3,12 @@
    {% include "base/branding.html" %} +
    - -
    -
    +
    +

    \ No newline at end of file diff --git a/reviewboard/templates/base/navbar.html b/reviewboard/templates/base/navbar.html index 09a1fdb017622c39f0998d96f8e0f19eacaf1814..1c5a16cd456ddbc0075867a4eef949e7f02d5dcb 100644 --- a/reviewboard/templates/base/navbar.html +++ b/reviewboard/templates/base/navbar.html @@ -12,3 +12,7 @@ {% navigation_bar_hooks %} {% endif %} + + \ No newline at end of file