m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-11-15 09:45:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Position error tooltip below form field on narrow screen sizes

Browse Source
This commit is contained in:
Arnelle Balane 2020-10-23 02:00:58 +08:00
parent 63f24e55f1
commit 57d459f78f
No known key found for this signature in database
GPG Key ID: F094C9F7CF402FAD
6 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/forms/AccountEditForm.js
View File

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

6
components/forms/ChangePasswordForm.js
View File

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

2
components/forms/DeleteForm.js
View File

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

4
components/forms/LoginForm.js
View File

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

4
components/forms/WebsiteEditForm.js
View File

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

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

@ -17,6 +17,10 @@
line-height: 1.8;
}
.row > div {
position: relative;
}
.buttons {
display: flex;
justify-content: center;
@ -33,9 +37,9 @@
justify-content: center;
align-items: center;
top: 0;
left: 100%;
left: calc(100% + 16px);
bottom: 0;
margin-left: 16px;
z-index: 1;
}
.msg {
@ -68,3 +72,15 @@
color: var(--gray50);
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;
}
}