Login form, flash style improvements
This commit is contained in:
parent
803fc4c36e
commit
8becb6b174
|
@ -62,6 +62,19 @@ h1, h2, h3 {
|
||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flash-info {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: lighten(blue, 35%);
|
||||||
|
border: 1px solid darken(blue, 20%);
|
||||||
|
color: darken(blue, 35%);
|
||||||
|
}
|
||||||
|
.flash-error {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: lighten(red, 30%);
|
||||||
|
border: 1px solid darken(red, 20%);
|
||||||
|
color: darken(red, 35%);
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -161,3 +174,15 @@ ul.status-list {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
label {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -37,8 +37,12 @@
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
<main role="main" class="container">
|
<main role="main" class="container">
|
||||||
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
|
<%= if get_flash(@conn, :info) do %>
|
||||||
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
|
<p class="flash-info" role="alert"><%= get_flash(@conn, :info) %></p>
|
||||||
|
<% end %>
|
||||||
|
<%= if get_flash(@conn, :error) do %>
|
||||||
|
<p class="flash-error" role="alert"><%= get_flash(@conn, :error) %></p>
|
||||||
|
<% end %>
|
||||||
<%= render @view_module, @view_template, assigns %>
|
<%= render @view_module, @view_template, assigns %>
|
||||||
</main>
|
</main>
|
||||||
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
||||||
|
|
|
@ -1,13 +1,15 @@
|
||||||
<%= form_tag Routes.login_path(@conn, :login_post), method: :post do %>
|
<%= form_tag Routes.login_path(@conn, :login_post), method: :post, class: "login-form" do %>
|
||||||
<%= if @continue do %>
|
<%= if @continue do %>
|
||||||
<input type="hidden" name="continue" value="<%= @continue %>">
|
<input type="hidden" name="continue" value="<%= @continue %>">
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<label for="username">Username</label>
|
<div class="input-group">
|
||||||
|
<label for="username">Username:</label>
|
||||||
<input id="username" type="text" name="username">
|
<input id="username" type="text" name="username">
|
||||||
<br>
|
</div>
|
||||||
<label for="password">Password</label>
|
<div class="input-group">
|
||||||
|
<label for="password">Password:</label>
|
||||||
<input id="password" type="password" name="password">
|
<input id="password" type="password" name="password">
|
||||||
<br>
|
</div>
|
||||||
<%= submit "Log In" %>
|
<%= submit "Log In" %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
Loading…
Reference in New Issue