m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-18 15:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #328 from arnellebalane/master

Browse Source 
Position error tooltip below form field on narrow screen sizes
This commit is contained in:
Mike Cao 2020-10-26 09:07:23 -07:00 committed by GitHub
commit d24663598c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/forms/AccountEditForm.js
View File

@ -58,15 +58,19 @@ export default function AccountEditForm({ values, onSave, onClose }) {
<label htmlFor="username"> <label htmlFor="username">
<FormattedMessage id="label.username" defaultMessage="Username" /> <FormattedMessage id="label.username" defaultMessage="Username" />
</label> </label>
<Field name="username" type="text" /> <div>
<FormError name="username" /> <Field name="username" type="text" />
<FormError name="username" />
</div>
</FormRow> </FormRow>
<FormRow> <FormRow>
<label htmlFor="password"> <label htmlFor="password">
<FormattedMessage id="label.password" defaultMessage="Password" /> <FormattedMessage id="label.password" defaultMessage="Password" />
</label> </label>
<Field name="password" type="password" /> <div>
<FormError name="password" /> <Field name="password" type="password" />
<FormError name="password" />
</div>
</FormRow> </FormRow>
<FormButtons> <FormButtons>
<Button type="submit" variant="action"> <Button type="submit" variant="action">

18
components/forms/ChangePasswordForm.js
View File

@ -66,22 +66,28 @@ export default function ChangePasswordForm({ values, onSave, onClose }) {
<label htmlFor="current_password"> <label htmlFor="current_password">
<FormattedMessage id="label.current-password" defaultMessage="Current password" /> <FormattedMessage id="label.current-password" defaultMessage="Current password" />
</label> </label>
<Field name="current_password" type="password" /> <div>
<FormError name="current_password" /> <Field name="current_password" type="password" />
<FormError name="current_password" />
</div>
</FormRow> </FormRow>
<FormRow> <FormRow>
<label htmlFor="new_password"> <label htmlFor="new_password">
<FormattedMessage id="label.new-password" defaultMessage="New password" /> <FormattedMessage id="label.new-password" defaultMessage="New password" />
</label> </label>
<Field name="new_password" type="password" /> <div>
<FormError name="new_password" /> <Field name="new_password" type="password" />
<FormError name="new_password" />
</div>
</FormRow> </FormRow>
<FormRow> <FormRow>
<label htmlFor="confirm_password"> <label htmlFor="confirm_password">
<FormattedMessage id="label.confirm-password" defaultMessage="Confirm password" /> <FormattedMessage id="label.confirm-password" defaultMessage="Confirm password" />
</label> </label>
<Field name="confirm_password" type="password" /> <div>
<FormError name="confirm_password" /> <Field name="confirm_password" type="password" />
<FormError name="confirm_password" />
</div>
</FormRow> </FormRow>
<FormButtons> <FormButtons>
<Button type="submit" variant="action"> <Button type="submit" variant="action">

6
components/forms/DeleteForm.js
View File

@ -73,8 +73,10 @@ export default function DeleteForm({ values, onSave, onClose }) {
/> />
</p> </p>
<FormRow> <FormRow>
<Field name="confirmation" type="text" /> <div>
<FormError name="confirmation" /> <Field name="confirmation" type="text" />
<FormError name="confirmation" />
</div>
</FormRow> </FormRow>
<FormButtons> <FormButtons>
<Button <Button

12
components/forms/LoginForm.js
View File

@ -71,15 +71,19 @@ export default function LoginForm() {
<label htmlFor="username"> <label htmlFor="username">
<FormattedMessage id="label.username" defaultMessage="Username" /> <FormattedMessage id="label.username" defaultMessage="Username" />
</label> </label>
<Field name="username" type="text" /> <div>
<FormError name="username" /> <Field name="username" type="text" />
<FormError name="username" />
</div>
</FormRow> </FormRow>
<FormRow> <FormRow>
<label htmlFor="password"> <label htmlFor="password">
<FormattedMessage id="label.password" defaultMessage="Password" /> <FormattedMessage id="label.password" defaultMessage="Password" />
</label> </label>
<Field name="password" type="password" /> <div>
<FormError name="password" /> <Field name="password" type="password" />
<FormError name="password" />
</div>
</FormRow> </FormRow>
<FormButtons> <FormButtons>
<Button type="submit" variant="action"> <Button type="submit" variant="action">

12
components/forms/WebsiteEditForm.js
View File

@ -63,15 +63,19 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
<label htmlFor="name"> <label htmlFor="name">
<FormattedMessage id="label.name" defaultMessage="Name" /> <FormattedMessage id="label.name" defaultMessage="Name" />
</label> </label>
<Field name="name" type="text" /> <div>
<FormError name="name" /> <Field name="name" type="text" />
<FormError name="name" />
</div>
</FormRow> </FormRow>
<FormRow> <FormRow>
<label htmlFor="domain"> <label htmlFor="domain">
<FormattedMessage id="label.domain" defaultMessage="Domain" /> <FormattedMessage id="label.domain" defaultMessage="Domain" />
</label> </label>
<Field name="domain" type="text" /> <div>
<FormError name="domain" /> <Field name="domain" type="text" />
<FormError name="domain" />
</div>
</FormRow> </FormRow>
<FormRow> <FormRow>
<label></label> <label></label>

20
components/layout/FormLayout.module.css
View File

@ -17,6 +17,10 @@
line-height: 1.8; line-height: 1.8;
} }
.row > div {
position: relative;
}
.buttons { .buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -33,9 +37,9 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
top: 0; top: 0;
left: 100%; left: calc(100% + 16px);
bottom: 0; bottom: 0;
margin-left: 16px; z-index: 1;
} }
.msg { .msg {
@ -68,3 +72,15 @@
color: var(--gray50); color: var(--gray50);
background: var(--gray800); background: var(--gray800);
} }
@media only screen and (max-width: 576px) {
.error {
align-items: flex-start;
top: calc(100% + 7px);
left: 0;
}
.error:after {
left: 10px;
}
}