Make login nicer looking

This commit is contained in:
Mikko Ahlroth 2022-09-10 23:57:42 +03:00
parent 610df4ea37
commit 7274a81dc3
2 changed files with 31 additions and 11 deletions

View file

@ -8,27 +8,33 @@
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
} }
.alert-info { .alert-info {
color: #31708f; color: #31708f;
background-color: #d9edf7; background-color: #d9edf7;
border-color: #bce8f1; border-color: #bce8f1;
} }
.alert-warning { .alert-warning {
color: #8a6d3b; color: #8a6d3b;
background-color: #fcf8e3; background-color: #fcf8e3;
border-color: #faebcc; border-color: #faebcc;
} }
.alert-danger { .alert-danger {
color: #a94442; color: #a94442;
background-color: #f2dede; background-color: #f2dede;
border-color: #ebccd1; border-color: #ebccd1;
} }
.alert p { .alert p {
margin-bottom: 0; margin-bottom: 0;
} }
.alert:empty { .alert:empty {
display: none; display: none;
} }
.invalid-feedback { .invalid-feedback {
color: #a94442; color: #a94442;
display: block; display: block;
@ -46,14 +52,19 @@
transition: opacity 1s ease-out; transition: opacity 1s ease-out;
} }
.phx-disconnected{ .phx-disconnected {
cursor: wait; cursor: wait;
} }
.phx-disconnected *{
.phx-disconnected * {
pointer-events: none; pointer-events: none;
} }
html, body, div[data-phx-main="true"], main.container, .main-view-component { html,
body,
div[data-phx-main="true"],
main.container,
.main-view-component {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -65,6 +76,7 @@ html, body, div[data-phx-main="true"], main.container, .main-view-component {
margin: 1rem; margin: 1rem;
display: block; display: block;
} }
.gthm-logo img { .gthm-logo img {
width: auto; width: auto;
display: block; display: block;
@ -92,3 +104,7 @@ html, body, div[data-phx-main="true"], main.container, .main-view-component {
.pump-btn-loading:hover { .pump-btn-loading:hover {
cursor: progress; cursor: progress;
} }
.login-container {
padding: 10px;
}

View file

@ -1,9 +1,13 @@
<form phx-submit="login"> <div class="container login-container">
<label>Email <input type="email" name="username" /></label> <form phx-submit="login">
<label>Password <input type="password" name="password" /></label> <h1>Log in</h1>
<button>Log in</button>
<%= if @error do %> <label>Email <input type="email" name="username" /></label>
<div class="error">Error occurred, please try again.</div> <label>Password <input type="password" name="password" /></label>
<% end %> <button>Log in</button>
</form>
<%= if @error do %>
<div class="error">Error occurred, please try again.</div>
<% end %>
</form>
</div>