diff --git a/templates/zephyr/home.html b/templates/zephyr/home.html index 7399b7f1ac..391a9d1707 100644 --- a/templates/zephyr/home.html +++ b/templates/zephyr/home.html @@ -2,17 +2,6 @@
-
@@ -36,7 +25,6 @@
-
diff --git a/templates/zephyr/index.html b/templates/zephyr/index.html index a60c8a1712..6d458001fd 100644 --- a/templates/zephyr/index.html +++ b/templates/zephyr/index.html @@ -102,127 +102,128 @@ var people_list = [ {% block content %}
- Humbug -
- - +
+
+
+ Humbug +
+ +
+
+
-
+
- - {{ user_profile.full_name }} - {{ user_profile.user.email }} - {% if lurk_stream %} - - {% endif %} - -
+ {{ user_profile.user.email }} +
-
+
-
{% include "zephyr/home.html" %}
diff --git a/zephyr/static/js/narrow.js b/zephyr/static/js/narrow.js index 915648930d..572f60223f 100644 --- a/zephyr/static/js/narrow.js +++ b/zephyr/static/js/narrow.js @@ -304,7 +304,7 @@ exports.restore_home_state = function() { // If we click on the Home link from another nav pane, just go // back to the state you were in (possibly still narrowed) before // you left the Home pane. - if ($('#sidebar li[title="Home"]').hasClass("active")) { + if ($('#gear-menu li[title="Home"]').hasClass("active")) { exports.deactivate(); } }; diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js index a9ce8fc254..e7e9aa3f7a 100644 --- a/zephyr/static/js/ui.js +++ b/zephyr/static/js/ui.js @@ -19,7 +19,7 @@ var scroll_positions = {}; var gravatar_stamp = 1; exports.change_tab_to = function (tabname) { - $('#sidebar a[href="' + tabname + '"]').tab('show'); + $('#gear-menu a[href="' + tabname + '"]').tab('show'); }; exports.focus_on = function (field_id) { @@ -224,20 +224,9 @@ function need_skinny_mode() { } function resizehandler(e) { - var sidebar = $("#sidebar"); - var sidebar_nav = $(".sidebar-nav"); var composebox = $("#compose"); var top_statusbar = $("#top_statusbar"); if (need_skinny_mode()) { - sidebar.removeClass('nav-stacked'); - - var space_taken_up_by_navbar = sidebar_nav.outerHeight(true); - - // .visible-phone only, so doesn't need undoing - $("#nav_whitespace").height(space_taken_up_by_navbar); - - top_statusbar.css('top', space_taken_up_by_navbar); - var desired_width; if (exports.home_tab_obscured() === 'other_tab') { desired_width = $("div.tab-pane.active").outerWidth(); @@ -246,13 +235,9 @@ function resizehandler(e) { composebox.width(desired_width); } top_statusbar.width(desired_width); - sidebar_nav.width(desired_width); } else { - sidebar.addClass('nav-stacked'); - top_statusbar.css('top', 0); top_statusbar.width(''); composebox.width(''); - sidebar_nav.width(''); } $("#bottom_whitespace").height(viewport.height() * 0.4); @@ -588,12 +573,12 @@ $(function () { $('#old_password, #new_password, #confirm_password').val(''); } - $('#sidebar a[data-toggle="pill"]').on('show', function (e) { + $('#gear-menu a[data-toggle="tab"]').on('show', function (e) { // Save the position of our old tab away, before we switch var old_tab = $(e.relatedTarget).attr('href'); scroll_positions[old_tab] = viewport.scrollTop(); }); - $('#sidebar a[data-toggle="pill"]').on('shown', function (e) { + $('#gear-menu a[data-toggle="tab"]').on('shown', function (e) { // Right after we show the new tab, restore its old scroll position var target_tab = $(e.target).attr('href'); if (scroll_positions.hasOwnProperty(target_tab)) { @@ -623,7 +608,7 @@ $(function () { hashchange.changehash(browser_url); }); - $('#sidebar a[href="#subscriptions"]').on('shown', subs.setup_page); + $('#gear-menu a[href="#subscriptions"]').on('shown', subs.setup_page); var settings_status = $('#settings-status'); $("#settings-change-box form").ajaxForm({ diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css index a6cf4a7139..6287eaf3d4 100644 --- a/zephyr/static/styles/zephyr.css +++ b/zephyr/static/styles/zephyr.css @@ -34,7 +34,7 @@ a:hover code { .sidebar-nav { background-color: white; padding: 0.5em; - margin-top: 3em; + margin-top: 1em; overflow: hidden; text-overflow: ellipsis; } @@ -47,19 +47,6 @@ a:hover code { } } -ul#sidebar { - margin-bottom: 0px; -} - -ul.lurk-navbar-phone { - float: right; - margin-bottom: 0px; -} - -ul.lurk-navbar-phone li { - display: inline; -} - #nav_whitespace { visibility: hidden; } @@ -451,29 +438,60 @@ input.recipient_box { font-size: 90%; } +#navbar-spacer { + /* A spacer that is exactly a navbar size, so that all content + gets pushed unerneath it */ + width: 100%; + height: 40px; +} #top_statusbar { position: fixed; /* .message_list max-width + 30px margin */ max-width: 670px; text-decoration: none; - top: 0px; + top: 40px; /* should really be the same as the height of navbar-spacer */ visibility: hidden; /* so that we pass clicks through to underneath us */ /* If zhome has opacity on it, it suddenly starts getting drawn on top of top_statusbar -- unless we specify a z-index. */ z-index: 2; } -#searchbox { - /* Needed because top_statusbar is visibility: hidden - and we don't want to inherit that */ - visibility: visible; - max-height: 30px; - padding: 5px 10px; - max-width: 640px; +#navbar-middle { + display: table-row; + max-width: 670px; } -.always_in_view { - background-color: aliceblue; +.brand.skinny-user-gravatar { + padding-top: 5px; + padding-bottom: 0px; + margin-bottom: 5px; + white-space: nowrap; +} + +#searchbox { + display: table-cell; + width: 99%; +} + +#navbar-buttons { + display: table-cell; + white-space: nowrap; + width: 1%; +} + +#navbar-buttons ul.nav { + /* Firefox-specific hack; Technically white-space: nowrap applies to + text, not "stuff in general", so in Firefox without this, the +
  • s all get smushed vertically (in Chrome and Safari, they + don't). + Fortunately, Firefox also provides this nice 'max-content' + thing which is basically 'give us as much space as we need'. */ + width: -moz-max-content; +} + +#searchbox_form { + width: 99%; + padding-right: 10px; } #search_query { @@ -482,8 +500,8 @@ input.recipient_box { @media (max-width: 480px) { /* This is a hack to keep the search box from overflowing outside the message area -- really the formula should be something like - [message area width] - [search query horizontal overhead] - At narrow widths, the overhead is a larger % of the window width. + [message area width] - [search query horizontal overhead] At + narrow widths, the overhead is a larger % of the window width. */ #search_query { width: 90%; @@ -494,12 +512,16 @@ input.recipient_box { background-color: #FCEA81; } +#search_arrows { + margin-bottom: 5px; +} + #searchbox .search_button { display: none; - margin-bottom: 10px; text-align: center; padding: 4px 10px 4px 10px; } + /* A cheat, because input-prepend and input-append aren't smart enough to do the right thing with search-query */ #searchbox .search_button_middle { @@ -531,11 +553,6 @@ table.floating_recipient { background-color: #DDD; } -#top_whitespace { - display: block; - height: 40px; -} - #bottom_whitespace { display: block; height: 300px; @@ -708,10 +725,6 @@ table.floating_recipient { display: none; } -hr.sidebar { - margin: 0px; -} - @media (max-width: 480px) { body { padding-right: 5px;