mirror of
https://github.com/0rangebananaspy/authelia.git
synced 2024-09-14 22:47:21 +07:00
Make notifications appear on top instead of inline
Currently notifications reflow the document which causes the interface to jump twice which can be frustrating if you're trying to click something. This change makes the notification appear at the top of the form as such:
This commit is contained in:
parent
f67bb69ee0
commit
eea023a200
|
@ -19,9 +19,10 @@ body {
|
|||
/* notifications */
|
||||
.notification {
|
||||
padding: 10px;
|
||||
margin: 10px 0px;
|
||||
margin: 15px 0px;
|
||||
border-radius: 6px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
.notification img {
|
||||
width: 24px;
|
||||
|
|
|
@ -7,9 +7,9 @@ block form-header
|
|||
h1 Sign in
|
||||
|
||||
block content
|
||||
div(class="notification")
|
||||
img(class="header-img" src="/img/user.png" alt="user profile")
|
||||
p Enter your credentials to sign in
|
||||
div(class="notification")
|
||||
form(class="form-signin")
|
||||
div(class="form-inputs")
|
||||
input(type="text" class="form-control" id="username" placeholder="Username" required autofocus)
|
||||
|
|
|
@ -7,9 +7,9 @@ block form-header
|
|||
h1 Reset password
|
||||
|
||||
block content
|
||||
div(class="notification")
|
||||
img(class="header-img" src="/img/password.png" alt="password")
|
||||
p Set your new password and confirm it.
|
||||
div(class="notification")
|
||||
form(class="form-signin")
|
||||
div(class="form-inputs")
|
||||
input(class="form-control" type="password" name="password1" id="password1" placeholder="New password" required="required")
|
||||
|
|
|
@ -7,10 +7,10 @@ block form-header
|
|||
h1 Reset password
|
||||
|
||||
block content
|
||||
div(class="notification")
|
||||
div
|
||||
img(class="header-img" src="/img/password.png" alt="password")
|
||||
p After giving your username, you will receive an email to change your password.
|
||||
div(class="notification")
|
||||
form(class="form-signin")
|
||||
div(class="form-inputs")
|
||||
input(type="text" class="form-control" name="username" id="username" placeholder="Your username" required="required")
|
||||
|
|
|
@ -8,6 +8,7 @@ block form-header
|
|||
|
||||
block content
|
||||
div
|
||||
div(class="notification notification-totp")
|
||||
h3 Hi <b>#{username}</b>
|
||||
div(class="row")
|
||||
div(class="u2f-token")
|
||||
|
@ -16,7 +17,6 @@ block content
|
|||
| Please, touch your <a href="https://www.yubico.com/products/yubikey-hardware/fido-u2f-security-key/">security key</a><br/>
|
||||
b Or<br/>
|
||||
| Get a one-time password
|
||||
div(class="notification notification-totp")
|
||||
form(class="form-signin totp")
|
||||
div(class="form-inputs")
|
||||
input(type="text" autocomplete="off" class="form-control" id="token" placeholder="Token" required autofocus)
|
||||
|
|
Loading…
Reference in New Issue
Block a user