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

settings: Display radio choice label as flexbox.

This commit is contained in:
Karl Stolley 2023-09-18 14:35:53 -05:00 committed by Tim Abbott
parent 2c3a276753
commit 55e43b6926
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/styles/settings.css
View File

@ -1089,6 +1089,7 @@ input[type="checkbox"] {
label.display-settings-radio-choice-label {
border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
padding: 8px 0 10px;
display: flex;
&:last-of-type {
border-bottom: none;
@ -1117,7 +1118,8 @@ label.display-settings-radio-choice-label {
}
.right {
float: right;
/* Push to far right in flex container. */
margin-left: auto;
}
}
@ -1147,10 +1149,8 @@ $option_title_width: 180px;
overflow-x: hidden;
overflow-y: visible;
position: relative;
height: 36px;
.user-name-and-status-text {
margin-top: -4px;
display: flex;
flex-direction: column;
}

20
web/templates/settings/display_settings.hbs
View File

@ -41,8 +41,14 @@
<div class="emojiset_choices grey-box prop-element" id="{{prefix}}emojiset" data-setting-widget-type="radio-group" data-setting-choice-type="string">
{{#each settings_object.emojiset_choices}}
<label class="display-settings-radio-choice-label">
<input type="radio" class="setting_emojiset_choice" name="emojiset" value="{{this.key}}"/>
<span>{{this.text}}</span>
<div class="radio-choice-controls">
<input type="radio" class="setting_emojiset_choice" name="emojiset" value="{{this.key}}"/>
<span>{{this.text}}</span>
{{#if (eq this.key "google-blob")}}
<span>(<em>{{t "deprecated" }}</em>)</span>
{{> ../help_link_widget link="/help/emoji-and-emoticons#change-your-emoji-set" }}
{{/if}}
</div>
<span class="right">
{{#if (eq this.key "text") }}
<div class="emoji_alt_code">&nbsp;:relaxed:</div>
@ -53,10 +59,6 @@
<img class="emoji" src="/static/generated/emoji/images-{{this.key}}-64/1f389.png" />
{{/if}}
</span>
{{#if (eq this.key "google-blob")}}
<span>(<em>{{t "deprecated" }}</em>)</span>
{{> ../help_link_widget link="/help/emoji-and-emoticons#change-your-emoji-set" }}
{{/if}}
</label>
{{/each}}
</div>
@ -96,8 +98,10 @@
<div class="user_list_style_values grey-box prop-element" id="{{prefix}}user_list_style" data-setting-widget-type="radio-group" data-setting-choice-type="number">
{{#each user_list_style_values}}
<label class="display-settings-radio-choice-label">
<input type="radio" class="setting_user_list_style_choice" name="user_list_style" value="{{this.code}}"/>
<span>{{this.description}}</span>
<div class="radio-choice-controls">
<input type="radio" class="setting_user_list_style_choice" name="user_list_style" value="{{this.code}}"/>
<span>{{this.description}}</span>
</div>
<span class="right preview">
{{#if (eq this.code 1)}}
<div class="user-name-and-status-emoji">