Skip to content

Commit

Permalink
Re-adds styling to the login page (#12)
Browse files Browse the repository at this point in the history
  • Loading branch information
ShahneRodgers committed Nov 6, 2019
1 parent 5884f3d commit b7aae47
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 39 deletions.
22 changes: 22 additions & 0 deletions assets/css/_login.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.login {
@include headers;

@include element(form) {
margin-bottom: 2rem;

@include element(button) {
@include gather-button;
padding: 0.5rem 1.2rem;
}
}

@include element(note) {
font-weight: bold;
}

@include element(warning) {
background-color: var(--warning);
margin: 2rem -0.5rem;
padding: 0.5rem;
}
}
2 changes: 2 additions & 0 deletions assets/css/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
@include foundation-everything();
@import "./nav";

// CSS for individual pages
@import "./login";

body {
header {
Expand Down
78 changes: 40 additions & 38 deletions lib/gather_web/templates/authentication/login.html.eex
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
<h2 class="header"><%= gettext "Login" %></h2>
<div class="login grid-container grid-x">
<h1 class="header cell"><%= gettext "Login" %></h1>

<%= form_for @conn, Routes.authentication_path(@conn, :login), fn f -> %>
<div class="form-group">
<%= label f, :username, gettext("Username"), class: "control-label" %>
<%= text_input f, :username, class: "form-control" %>
<%= error_tag f, :username %>
</div>
<%= form_for @conn, Routes.authentication_path(@conn, :login), [class: "login__form cell"], fn f -> %>
<div class="form-group grid-x">
<%= label f, :username, gettext("Username"), class: "control-label cell" %>
<%= text_input f, :username, class: "form-control cell medium-6" %>
<%= error_tag f, :username %>
</div>

<div class="form-group">
<%= label f, :password, gettext("Password"), class: "control-label" %>
<%= password_input f, :password, class: "form-control" %>
<%= error_tag f, :password %>
</div>

<div class="form-group">
<%= submit gettext("Login"), class: "btn btn-main" %>
</div>
<% end %>
<div class="form-group grid-x">
<%= label f, :password, gettext("Password"), class: "control-label cell" %>
<%= password_input f, :password, class: "form-control cell medium-6" %>
<%= error_tag f, :password %>
</div>
<div class="form-group">
<%= submit gettext("Login"), class: "login__form__button" %>
</div>
<% end %>

<div class="note">
<% link = "<a href='#{Routes.page_path(@conn, :contact)}'> #{gettext("contact")} </a>" %>
<%= gettext("""
Don't have an account? This website is only for refugees and former refugees in New Zealand,
so you can't automatically sign up. If you think you fit this and would like an account,
or if you just want to know more, please %{contact} us!
""", contact: link) |> raw() %>
</div>
<div class="login__note">
<% link = "<a href='#{Routes.page_path(@conn, :contact)}'> #{gettext("contact")} </a>" %>
<%= gettext("""
Don't have an account? This website is only for refugees and former refugees in New Zealand,
so you can't automatically sign up. If you think you fit this and would like an account,
or if you just want to know more, please %{contact} us!
""", contact: link) |> raw() %>
</div>

<div class="warning">
<p>While this website is in development, <a href="<%= Routes.user_path(@conn, :new) %>">you can sign up</a>
and play around as much as you like. <b>Note: while the website is in development, your account may be deleted
without any warning.</b></p>
<p>If you want to help out, especially with <ul>
<li>Design</li>
<li>Translations</li>
<li>CSS / JavaScript</li>
<li>Content / website behaviour decisions</li>
<li>Getting the website to community leaders / the relevant agencies once it's built</li>
</ul>
please don't hesitate to contact us; we'd love your help!
</p>
<div class="login__warning">
<p>While this website is in development, <a href="<%= Routes.user_path(@conn, :new) %>">you can sign up</a>
and play around as much as you like. <b>Note: while the website is in development, your account may be deleted
without any warning.</b></p>
<p>If you want to help out, especially with <ul>
<li>Design</li>
<li>Translations</li>
<li>CSS / JavaScript</li>
<li>Content / website behaviour decisions</li>
<li>Getting the website to community leaders / the relevant agencies once it's built</li>
</ul>
please don't hesitate to contact us; we'd love your help!
</p>
</div>
</div>
2 changes: 1 addition & 1 deletion lib/gather_web/templates/layout/app.html.eex
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<%= render "navigation.html", assigns %>
</section>
</header>
<main role="main" class="grid-container">
<main role="main">
<p class="alert" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert--danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= render @view_module, @view_template, assigns %>
Expand Down

0 comments on commit b7aae47

Please sign in to comment.