user input adjustments (#19446)

This commit is contained in:
Jordan Vidrine 2022-12-13 10:13:48 -06:00 committed by GitHub
parent d2efc84cba
commit f29291a869
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 11 deletions

View File

@ -5,20 +5,22 @@ import { bind } from "discourse-common/utils/decorators";
export default Component.extend({ export default Component.extend({
classNames: ["create-account-body"], classNames: ["create-account-body"],
// used for animating the label inside of inputs
userInputFocus(event) { userInputFocus(event) {
const controls = event.target.parentElement; const userField = event.target.parentElement.parentElement;
if (!controls.classList.contains("value-entered")) { if (!userField.classList.contains("value-entered")) {
controls.classList.toggle("value-entered"); userField.classList.toggle("value-entered");
} }
}, },
// used for animating the label inside of inputs
userInputFocusOut(event) { userInputFocusOut(event) {
const controls = event.target.parentElement; const userField = event.target.parentElement.parentElement;
if ( if (
event.target.value.length === 0 && event.target.value.length === 0 &&
controls.classList.contains("value-entered") userField.classList.contains("value-entered")
) { ) {
controls.classList.toggle("value-entered"); userField.classList.toggle("value-entered");
} }
}, },

View File

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

View File

@ -570,9 +570,8 @@ table {
@include clearfix; @include clearfix;
} }
.control-label { .control-label:not(.checkbox-label) {
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
font-weight: bold; font-weight: bold;
font-size: var(--font-up-2); font-size: var(--font-up-2);
line-height: var(--line-height-large); line-height: var(--line-height-large);

View File

@ -311,10 +311,11 @@
margin-bottom: 10px; margin-bottom: 10px;
.controls { .controls {
label { label:not(.checkbox-label) {
width: auto; width: auto;
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
font-weight: bold;
} }
.instructions { .instructions {