techies/authelia
1
0
Fork 0
mirror of https://github.com/0rangebananaspy/authelia.git synced 2024-09-14 22:47:21 +07:00
Code Issues Projects Releases Wiki Activity

Make notifications appear on top instead of inline

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/css/01-main.css
View File

@ -19,9 +19,10 @@ body {
/* notifications */ /* notifications */
.notification { .notification {
padding: 10px; padding: 10px;
margin: 10px 0px; margin: 15px 0px;
border-radius: 6px; border-radius: 6px;
display: none; display: none;
position: absolute;
} }
.notification img { .notification img {
width: 24px; width: 24px;

2
server/src/views/firstfactor.pug
View File

@ -7,9 +7,9 @@ block form-header
h1 Sign in h1 Sign in
block content block content
div(class="notification")
img(class="header-img" src="/img/user.png" alt="user profile") img(class="header-img" src="/img/user.png" alt="user profile")
p Enter your credentials to sign in p Enter your credentials to sign in
div(class="notification")
form(class="form-signin") form(class="form-signin")
div(class="form-inputs") div(class="form-inputs")
input(type="text" class="form-control" id="username" placeholder="Username" required autofocus) input(type="text" class="form-control" id="username" placeholder="Username" required autofocus)

2
server/src/views/password-reset-form.pug
View File

@ -7,9 +7,9 @@ block form-header
h1 Reset password h1 Reset password
block content block content
div(class="notification")
img(class="header-img" src="/img/password.png" alt="password") img(class="header-img" src="/img/password.png" alt="password")
p Set your new password and confirm it. p Set your new password and confirm it.
div(class="notification")
form(class="form-signin") form(class="form-signin")
div(class="form-inputs") div(class="form-inputs")
input(class="form-control" type="password" name="password1" id="password1" placeholder="New password" required="required") input(class="form-control" type="password" name="password1" id="password1" placeholder="New password" required="required")

2
server/src/views/password-reset-request.pug
View File

@ -7,10 +7,10 @@ block form-header
h1 Reset password h1 Reset password
block content block content
div(class="notification")
div div
img(class="header-img" src="/img/password.png" alt="password") img(class="header-img" src="/img/password.png" alt="password")
p After giving your username, you will receive an email to change your password. p After giving your username, you will receive an email to change your password.
div(class="notification")
form(class="form-signin") form(class="form-signin")
div(class="form-inputs") div(class="form-inputs")
input(type="text" class="form-control" name="username" id="username" placeholder="Your username" required="required") input(type="text" class="form-control" name="username" id="username" placeholder="Your username" required="required")

2
server/src/views/secondfactor.pug
View File

@ -8,6 +8,7 @@ block form-header
block content block content
div div
div(class="notification notification-totp")
h3 Hi <b>#{username}</b> h3 Hi <b>#{username}</b>
div(class="row") div(class="row")
div(class="u2f-token") 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/> | Please, touch your <a href="https://www.yubico.com/products/yubikey-hardware/fido-u2f-security-key/">security key</a><br/>
b Or<br/> b Or<br/>
| Get a one-time password | Get a one-time password
div(class="notification notification-totp")
form(class="form-signin totp") form(class="form-signin totp")
div(class="form-inputs") div(class="form-inputs")
input(type="text" autocomplete="off" class="form-control" id="token" placeholder="Token" required autofocus) input(type="text" autocomplete="off" class="form-control" id="token" placeholder="Token" required autofocus)