Browse Source

Login form, flash style improvements

master
Shadowfacts 1 year ago
parent
commit
8becb6b174
Signed by: shadowfacts GPG Key ID: 94A5AB95422746E5
3 changed files with 40 additions and 9 deletions
  1. +25
    -0
      assets/css/clacks.scss
  2. +6
    -2
      lib/clacks_web/templates/layout/app.html.eex
  3. +9
    -7
      lib/clacks_web/templates/login/login.html.eex

+ 25
- 0
assets/css/clacks.scss View File

@ -62,6 +62,19 @@ h1, h2, h3 {
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 {
nav {
display: flex;
@ -161,3 +174,15 @@ ul.status-list {
margin-right: 1rem;
}
}
.login-form {
.input-group {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
label {
width: 100px;
}
}
}

+ 6
- 2
lib/clacks_web/templates/layout/app.html.eex View File

@ -37,8 +37,12 @@
</section>
</header>
<main role="main" class="container">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= if get_flash(@conn, :info) do %>
<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 %>
</main>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>


+ 9
- 7
lib/clacks_web/templates/login/login.html.eex View File

@ -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 %>
<input type="hidden" name="continue" value="<%= @continue %>">
<% end %>
<label for="username">Username</label>
<input id="username" type="text" name="username">
<br>
<label for="password">Password</label>
<input id="password" type="password" name="password">
<br>
<div class="input-group">
<label for="username">Username:</label>
<input id="username" type="text" name="username">
</div>
<div class="input-group">
<label for="password">Password:</label>
<input id="password" type="password" name="password">
</div>
<%= submit "Log In" %>
<% end %>

Loading…
Cancel
Save