danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

Update form layouts

Browse Source
This commit is contained in:
Daniel Barber 2018-08-11 13:08:04 -04:00
parent e382c479e0
commit 005a095a3f
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
11 changed files with 91 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/_forms.scss Normal file
View File

@ -0,0 +1,7 @@
.form {
background-color: $form-background-color;
border-radius: $base-border-radius;
margin: 0 auto;
max-width: 40rem;
padding: $small-spacing;
}

12
assets/css/_headings.scss
View File

@ -1,3 +1,15 @@
h1,
h2,
h3,
h4 {
font-weight: 300;
}
h1 {
font-size: 1.6em;
margin: 0;
}
.heading { .heading {
font-family: $heading-font-family; font-family: $heading-font-family;
font-size: modular-scale(1); font-size: modular-scale(1);

12
assets/css/_layout.scss
View File

@ -8,18 +8,6 @@ a {
color: mix($background-color, $link-color, 30%); color: mix($background-color, $link-color, 30%);
} }
h1,
h2,
h3,
h4 {
font-weight: 300;
}
h1 {
font-size: 1.6em;
margin: 0;
}
main { main {
margin-top: 5vmin; margin-top: 5vmin;
} }

2
assets/css/_variables.scss
View File

@ -6,6 +6,8 @@ $foreground-color: $white;
$link-color: #fd0; $link-color: #fd0;
$form-background-color: darken($background-color, 4%);
$board-border-color: #000; $board-border-color: #000;
$board-shadow-color: rgba(0, 0, 0, 0.4); $board-shadow-color: rgba(0, 0, 0, 0.4);

1
assets/css/app.scss
View File

@ -8,6 +8,7 @@
@import "tables"; @import "tables";
@import "headings"; @import "headings";
@import "forms";
@import "layout"; @import "layout";
@import "nav"; @import "nav";

2
assets/css/base/_tables.scss
View File

@ -24,5 +24,5 @@ th {
th, th,
td { td {
padding: $small-spacing $small-spacing $small-spacing 0; padding: $x-small-spacing;
} }

2
assets/css/base/_typography.scss
View File

@ -18,7 +18,7 @@ h6 {
} }
p { p {
margin: 0 0 $small-spacing; margin: $small-spacing 0 $small-spacing;
} }
a { a {

5
assets/css/base/_variables.scss
View File

@ -7,9 +7,10 @@ $base-line-height: 1.5;
$heading-line-height: 1.2; $heading-line-height: 1.2;
// Other Sizes // Other Sizes
$base-border-radius: 3px; $base-border-radius: 0.25rem;
$base-spacing: 1.5em; $base-spacing: 2em;
$small-spacing: $base-spacing / 2; $small-spacing: $base-spacing / 2;
$x-small-spacing: $small-spacing / 2;
$base-z-index: 0; $base-z-index: 0;
// Colors // Colors

32
lib/chess_web/templates/game/new.html.eex
View File

@ -1,17 +1,19 @@
<h2><%= gettext "New game" %></h2> <div class="form">
<h2><%= gettext "New game" %></h2>
<%= form_for @changeset, game_path(@conn, :create), [class: "create-game"], <%= form_for @changeset, game_path(@conn, :create), [class: "create-game"],
fn form -> %> fn form -> %>
<div class="form-group"> <div class="form-group">
<%= label form, :opponent_id %> <%= label form, :opponent_id %>
<%= select form, <%= select form,
:opponent_id, :opponent_id,
@opponents, @opponents,
prompt: gettext("Choose an opponent") %> prompt: gettext("Choose an opponent") %>
<%= error_tag form, :opponent_id %> <%= error_tag form, :opponent_id %>
</div> </div>
<div class="form-group"> <div class="form-group">
<%= submit gettext("Create game"), class: "button" %> <%= submit gettext("Create game"), class: "button" %>
</div> </div>
<% end %> <% end %>
</div>

48
lib/chess_web/templates/registration/new.html.eex
View File

@ -1,26 +1,28 @@
<h2><%= gettext "Register" %></h2> <div class="form">
<h2><%= gettext "Register" %></h2>
<%= form_for @changeset, registration_path(@conn, :create), [class: "create-registration"], fn f -> %> <%= form_for @changeset, registration_path(@conn, :create), [class: "create-registration"], fn f -> %>
<%= if @changeset.action do %> <%= if @changeset.action do %>
<div class="alert alert-danger"> <div class="alert alert-danger">
<p> <p>
<%= gettext "Oops, something went wrong! Please check the errors below." %> <%= gettext "Oops, something went wrong! Please check the errors below." %>
</p> </p>
</div>
<% end %>
<div class="form-group">
<div class="form-field">
<%= input f, :name %>
</div>
<div class="form-field">
<%= input f, :email, as: :email %>
</div>
<div class="form-field">
<%= input f, :password, as: :password %>
</div>
</div>
<div class="form-group">
<%= submit gettext("Register"), class: "btn btn-primary" %>
</div> </div>
<% end %> <% end %>
</div>
<div class="form-group">
<div class="form-field">
<%= input f, :name %>
</div>
<div class="form-field">
<%= input f, :email, as: :email %>
</div>
<div class="form-field">
<%= input f, :password, as: :password %>
</div>
</div>
<div class="form-group">
<%= submit gettext("Register"), class: "btn btn-primary" %>
</div>
<% end %>

42
lib/chess_web/templates/session/new.html.eex
View File

@ -1,23 +1,25 @@
<h2><%= gettext "Log in" %></h2> <div class="form">
<h2><%= gettext "Log in" %></h2>
<%= form_for @changeset, session_path(@conn, :create), [class: "create-session"], fn f -> %> <%= form_for @changeset, session_path(@conn, :create), [class: "create-session"], fn f -> %>
<%= if @changeset.action do %> <%= if @changeset.action do %>
<div class="alert alert-danger"> <div class="alert alert-danger">
<p> <p>
<%= gettext "Oops, something went wrong! Please check the errors below." %> <%= gettext "Oops, something went wrong! Please check the errors below." %>
</p> </p>
</div>
<% end %>
<div class="form-group">
<div class="form-field">
<%= input f, :email, as: :email %>
</div>
<div class="form-field">
<%= input f, :password, as: :password %>
</div>
</div>
<div class="form-group">
<%= submit gettext("Log in"), class: "btn btn-primary" %>
</div> </div>
<% end %> <% end %>
</div>
<div class="form-group">
<div class="form-field">
<%= input f, :email, as: :email %>
</div>
<div class="form-field">
<%= input f, :password, as: :password %>
</div>
</div>
<div class="form-group">
<%= submit gettext("Log in"), class: "btn btn-primary" %>
</div>
<% end %>