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

settings: Decrease the gap between the account heading and banner. 

This commit fixes the alignment of account-alert-notification-banner
by using a new classname 'account-alert-notification' for this specific
banner, removed the default margin-top and margin-left from this banner
which is set to all other banners, and Aligned the banner with
vertical-align property set to middle.

To left-align this specific banner when the email is long enough
to wrap to the next line removed the margin-left and used a new
classname 'account-settings-heading' for the accounts heading,
and gave a margin-right of 10px to ensure that the notice banner and
the heading have enough space between them, when the email is short.

If the email is long enough to wrap to multiple lines, then the gap
between the email input field and the banner is too low. To adjust
this, set the margin-bottom to 10px.
This commit is contained in:
palashb01 2023-03-05 12:02:08 +05:30 committed by Tim Abbott
parent 89970eabeb
commit 2ca1c0c63e
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/styles/settings.css
View File

@ -355,6 +355,10 @@ td .button {
min-width: 325px;
max-width: 100%;
}
.account-settings-heading {
margin-right: 10px;
}
}
/* list_select is similar to settings_select, but without the height styling. */
@ -551,6 +555,11 @@ input[type="checkbox"] {
color: hsl(156deg 30% 50%);
padding: 3px 10px;
&.account-alert-notification {
margin: 0 0 10px;
vertical-align: middle;
}
&:not(:empty) {
border: 1px solid hsl(156deg 30% 50%);
}

4
web/templates/settings/account_settings.hbs
View File

@ -3,8 +3,8 @@
<div class="account-settings-form">
<div class="inline-block">
<div id="user_details_section">
<h3 class="inline-block">{{t "Account" }}</h3>
<div class="alert-notification" id="account-settings-status"></div>
<h3 class="inline-block account-settings-heading">{{t "Account" }}</h3>
<div class="alert-notification account-alert-notification" id="account-settings-status"></div>
<form class="grid">
{{#if user_has_email_set}}
<div class="input-group">