Make login nicer looking
This commit is contained in:
parent
610df4ea37
commit
7274a81dc3
2 changed files with 31 additions and 11 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue