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:
Callan Bryant 2018-07-20 09:34:13 +01:00
parent f67bb69ee0
commit eea023a200
5 changed files with 13 additions and 12 deletions

View File

@ -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;

View File

@ -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)

View File

@ -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")

View File

@ -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")

View File

@ -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)