paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-01 20:44:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

top_navbar: Allow spectator items to participate in flexbox.

Browse Source
This commit is contained in:
Karl Stolley
2023-12-03 13:58:35 -05:00
committed by Tim Abbott
parent dc0b8bcb6b
commit b53836de03
2 changed files with 66 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
web/styles/zulip.css
View File

@@ -999,6 +999,17 @@ body.has-overlay-scrollbar {
background-color: hsl(0deg 0% 0% / 70%);
}
/* Set flex display on login buttons only in the
spectator view. We want them to display none
otherwise. */
.spectator-view .column-right .spectator_login_buttons {
display: flex;
@media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
display: none;
}
}
.column-right {
width: var(--right-sidebar-width);
max-width: var(--right-sidebar-width);
@@ -1008,22 +1019,41 @@ body.has-overlay-scrollbar {
.spectator_login_buttons {
display: flex;
justify-content: space-evenly;
position: absolute;
top: 8px;
/* gear menu + help menu width (40px * 2) */
right: 80px;
/* width of right column - width of gear icon - right margin of column-right (250px - 40px - 40px -7px) */
width: 163px;
@media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
display: none;
}
/* Allow the login buttons flexbox to
grow and shrink to fit the available
area. */
flex: 1 1 0;
/* Use a flexbox gap of 7px between the
buttons to reflect the outer 7px of space. */
gap: 7px;
/* This should be removed once the navbar
has been rewritten entirely with modern
layout methods. For now, we pull this up
so that the buttons and search box are
the same height and their boxes sit on the
same invisible line. */
margin-top: -1px;
& a {
font-size: calc(16em / 14);
/* Vertically size the buttons to
match the search box. */
line-height: 28px;
font-weight: 600;
color: hsl(0deg 0% 20%);
/* Allow individual buttons to grow
and shrink inside their containers. */
flex: 1 1 0;
/* Center the text nodes within the
flex items. */
text-align: center;
/* Internationalization: disallow wrapping,
and display an ellipsis when there's not
space enough to accommodate the button
text. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
text-decoration: none;
@@ -3546,10 +3576,21 @@ select.invite-as {
.header-main .column-right {
display: flex;
width: auto;
/* Make the top navbar right column its full width,
less 7px of space on the left and right. */
width: calc(var(--right-sidebar-width) - 7px - 7px);
justify-content: flex-end;
align-items: center;
margin-right: 7px;
/* Move the column to the right with absolute
positioning, rather than margin. */
right: 7px;
@media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
/* For a diminutive right column in the navbar,
allow the width to be that of the flexing
button elements. */
width: auto;
}
& a:focus {
filter: none;

27
web/templates/navbar.hbs
View File

@@ -29,21 +29,13 @@
</div>
</div>
<div class="column-right">
<div class="only-visible-for-spectators">
<div class="spectator_login_buttons">
<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" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
<a class="header-button login_button">
<i class="fa fa-sign-in"></i>
</a>
</div>
<div class="spectator_login_buttons only-visible-for-spectators">
<a href="/register/" class="signup_button">
{{t 'Sign up' }}
</a>
<a class="login_button">
{{t 'Log in' }}
</a>
</div>
<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" class="header-button" tabindex="0">
@@ -65,6 +57,11 @@
<img class="header-button-avatar" src="{{user_avatar}}"/>
</a>
</div>
<div class="spectator_narrow_login_button only-visible-for-spectators" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
<a class="header-button login_button">
<i class="fa fa-sign-in"></i>
</a>
</div>
</div>
</nav>
</div>