Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Adjust placement and animation of labels for custom user fields (#24201)

This commit is contained in:
Jordan Vidrine 2023-11-01 14:51:40 -05:00 committed by GitHub
parent 5c92d7da22
commit 88bb5fa773
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
View File

@ -1,4 +1,7 @@
<label class="control-label" for={{concat "user-" this.elementId}}> <label
class="control-label alt-placeholder"
for={{concat "user-" this.elementId}}
>
{{this.field.name}} {{this.field.name}}
{{#if this.field.required}} {{#if this.field.required}}
<span class="required">*</span> <span class="required">*</span>

5
app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
View File

@ -1,4 +1,7 @@
<label class="control-label" for={{concat "user-" this.elementId}}> <label
class="control-label alt-placeholder"
for={{concat "user-" this.elementId}}
>
{{this.field.name}} {{this.field.name}}
{{#if this.field.required}} {{#if this.field.required}}
<span class="required">*</span> <span class="required">*</span>

11
app/assets/javascripts/discourse/app/components/user-fields/text.hbs
View File

@ -1,13 +1,16 @@
<div class="controls"> <div class="controls">
<label class="control-label" for={{concat "user-" this.elementId}}>
{{this.field.name}}
{{#if this.field.required}}<span class="required">*</span>{{/if}}
</label>
<Input <Input
id={{concat "user-" this.elementId}} id={{concat "user-" this.elementId}}
@value={{this.value}} @value={{this.value}}
maxlength={{this.site.user_field_max_length}} maxlength={{this.site.user_field_max_length}}
/> />
<label
class="control-label alt-placeholder"
for={{concat "user-" this.elementId}}
>
{{this.field.name}}
{{#if this.field.required}}<span class="required">*</span>{{/if}}
</label>
<InputTip <InputTip
@validation={{this.validation}} @validation={{this.validation}}
class={{unless this.validation " hidden"}} class={{unless this.validation " hidden"}}

1
app/assets/stylesheets/common/base/login.scss
View File

@ -177,7 +177,6 @@ body.invite-page {
top: -8px; top: -8px;
left: calc(1em - 0.25em); left: calc(1em - 0.25em);
background-color: var(--secondary); background-color: var(--secondary);
padding: 0 0.25em 0 0.25em;
font-size: $font-down-1; font-size: $font-down-1;
} }
.user-field.text:focus-within, .user-field.text:focus-within,

20
app/assets/stylesheets/common/base/user.scss
View File

@ -972,3 +972,23 @@
} }
} }
} }
// Due to special login animations, the order here needs to be changed
.control-group[data-setting-name="user-user-fields"]
.user-field.text
.controls {
display: flex;
flex-direction: column;
.control-label.alt-placeholder {
order: 1;
}
.ember-text-field {
order: 2;
}
.tip {
order: 3;
}
.instructions {
order: 4;
}
}

1
app/assets/stylesheets/desktop/login.scss
View File

@ -311,6 +311,7 @@
input.value-entered + label.alt-placeholder { input.value-entered + label.alt-placeholder {
top: -8px; top: -8px;
left: calc(3em - 0.25em); left: calc(3em - 0.25em);
font-size: var(--font-down-1);
} }
} }
.password-confirmation { .password-confirmation {