Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/templates/navbar.hbs

77 lines
4.9 KiB
Handlebars
Raw Normal View History

Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
<div class="header">
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
{{!-- remove `top_navbar_full_width` wrapper div once the scrollbar is on the `html` element, and then move the styles on `header` to `navbar-container --}}
<div class="top_navbar_full_width">
<nav class="header-main" id="top_navbar">
<div class="column-left">
<a class="brand no-style" href="#">
<img id="realm-logo" src="" alt="" class="nav-logo no-drag"/>
</a>
</div>
<div class="column-middle" id="navbar-middle">
<div class="column-middle-inner">
<div id="streamlist-toggle" class="tippy-zulip-delayed-tooltip {{#if embedded}}hide-streamlist-toggle-visibility{{/if}}" data-tooltip-template-id="streamlist-toggle-tooltip-template">
<a id="streamlist-toggle-button" role="button" tabindex="0"><i class="fa fa-reorder" aria-hidden="true"></i>
<span id="streamlist-toggle-unreadcount">0</span>
</a>
navbar: Extract tab_bar anchor out of the search divs. Prior to commit eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 the center area of the navbar was based on a structure that appended crumbs or "tabs" as <li>s, forming a tab_bar and a tab_list. However, in eb4a2b9d4e80d495bf0a11c87bb31d18e94e9cc0 we apply a new style and structure to the navbar which lets go of the convention of tabs. Hence, we'd like to purge the tab_bar and tab_list labels from our code base. This commit pushes us towards that goal. Previously, this element was part of both searchbox and searchbox_legacy of which, only one would render based on the flag on search pills. This wasn't great because: * it made it likely that someone would change only one of the two and unintentionally introduce regressions. * it meant that search_icon selectors within the searchbox would mess with the search_icon elements within the tab_bar, leading us to rely on messy CSS overriding. Since there doesn't seem to be a strong reason to have this be the way it previously was, this commit extracts "#tab_bar". It's worth keeping in mind that we use the "#tab_bar" element as an anchor to append the #tab_list onto.
2020-06-25 21:27:02 +02:00
</div>
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
<div class="top-navbar-border top-navbar-container">
<div id="message_view_header" class="notdisplayed">
</div>
{{#if search_pills_enabled }}
<div id="searchbox">
<form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="pill-container input-append">
<span class="search_icon search_open"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template"></i></span>
<div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off">
</div>
<button class="btn search_close_button tippy-zulip-delayed-tooltip" type="button" id="search_exit" aria-label="{{t 'Exit search' }}" data-tippy-content="Close">
<i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
</button>
templates: Prevent dangling end tags. In cases where an opening tag is so long that we stretch it to 2+ lines of code, we should try to use block-style formatting in the template code. Unfortunately, we have lots of legacy code that violates this concept, so this is a timid fix. There are also legit use cases like textarea where we probably need to keep the ugly template syntax for things to render properly.
2021-11-21 16:17:01 +01:00
</div>
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
</form>
</div>
{{else}}
<div id="searchbox_legacy">
<form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="input-append">
<span class="search_icon search_open"><i class="zulip-icon zulip-icon-search tippy-zulip-delayed-tooltip" data-tooltip-template-id="search-query-tooltip-template"></i></span>
<input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off"/>
<button class="btn search_close_button tippy-zulip-delayed-tooltip" type="button" id="search_exit" aria-label="{{t 'Exit search' }}" data-tippy-content="Close"><i class="zulip-icon zulip-icon-close" aria-hidden="true"></i></button>
</div>
</form>
</div>
{{/if}}
navbar: Extract navbar border into outer div. This is a prep commit for the new navbar, since the new navbar switches between a search bar and stream descriptions, it's easier to have the border defined in an outer div. Due to the way the changesets is generated, this may seem like a large diff, however, the only change to navbar.html is to add an opening div with the ".top-navbar-border" class and a corrseponding closing div to wrap around "#search_box" and "#search_box_legacy". Apart from this, a few styles have been edited in zulip.scss and night_mode.scss.
2020-02-21 20:02:49 +01:00
</div>
search: Duplicate HTML template content for search area. This is preparation for being able to work on the search pills feature without making any user-facing changes until we're ready to enable it.
2018-07-14 11:39:33 +02:00
</div>
Modify crumbbar style to look like an arrowbar Also: * Change fixed element positioning and fix bugs * Move settings dropdown back to the right and add left padding to left sidebar (imported from commit fcf903b59617687f94618a01ce7544b69f408130)
2014-01-09 16:58:51 +01:00
</div>
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
<div class="column-right">
<div class="only-visible-for-spectators">
<div class="spectator_login_buttons hide-xl">
<a href="/register/" class="signup_button">
<span>{{t 'Sign up' }}</span>
</a>
<div class="divider">|</div>
<a class="login_button">
<span>{{t 'Log in' }}</span>
</a>
</div>
<div class="spectator_narrow_login_button hide show-xl" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
<a class="login_button">
<i class="fa fa-sign-in"></i>
</a>
</div>
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
</div>
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
<div id="userlist-toggle" class="hidden-for-spectators tippy-zulip-delayed-tooltip" data-tooltip-template-id="userlist-tooltip-template">
<a id="userlist-toggle-button" role="button" tabindex="0"><i class="fa fa-group" aria-hidden="true"></i>
<span id="userlist-toggle-unreadcount">0</span>
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
</a>
</div>
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
<div id="navbar-buttons" {{#if embedded}}class="hide-navbar-buttons-visibility"{{/if}}>
</div>
navbar: Add login and signup buttons for spectators. Remove login buttons from right sidebar and add them to navbar so that the user instantly notices them.
2022-10-14 19:52:42 +02:00
</div>
navbar: Widen navbar to fill the full screen on large screens. Now that the navbar is a different color, we want it to also take up the full width of the screen. Because the navbar has margin, this commit adds a new div. To not have to add a new div, the scrollbar would need to be moved to the `html` element, which is a bigger project. This commit also moves the zulip logo to be left-justified instead of centered, since it looks strange centered with the full width navbar.
2023-03-25 22:23:04 +01:00
</nav>
</div>
Switch to fixed sidebar layout and remove bootstrap layout hooks. (imported from commit 060340a2febb7b8df6477a3419e7588a8503e377)
2013-08-13 12:52:26 +02:00
</div>