From 005a095a3f766b2b13cbbf29226b815003e1f156 Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Sat, 11 Aug 2018 13:08:04 -0400 Subject: [PATCH] Update form layouts --- assets/css/_forms.scss | 7 +++ assets/css/_headings.scss | 12 +++++ assets/css/_layout.scss | 12 ----- assets/css/_variables.scss | 2 + assets/css/app.scss | 1 + assets/css/base/_tables.scss | 2 +- assets/css/base/_typography.scss | 2 +- assets/css/base/_variables.scss | 5 +- lib/chess_web/templates/game/new.html.eex | 32 +++++++------ .../templates/registration/new.html.eex | 48 ++++++++++--------- lib/chess_web/templates/session/new.html.eex | 42 ++++++++-------- 11 files changed, 91 insertions(+), 74 deletions(-) create mode 100644 assets/css/_forms.scss diff --git a/assets/css/_forms.scss b/assets/css/_forms.scss new file mode 100644 index 0000000..0c183e2 --- /dev/null +++ b/assets/css/_forms.scss @@ -0,0 +1,7 @@ +.form { + background-color: $form-background-color; + border-radius: $base-border-radius; + margin: 0 auto; + max-width: 40rem; + padding: $small-spacing; +} diff --git a/assets/css/_headings.scss b/assets/css/_headings.scss index 2f41025..2c9a424 100644 --- a/assets/css/_headings.scss +++ b/assets/css/_headings.scss @@ -1,3 +1,15 @@ +h1, +h2, +h3, +h4 { + font-weight: 300; +} + +h1 { + font-size: 1.6em; + margin: 0; +} + .heading { font-family: $heading-font-family; font-size: modular-scale(1); diff --git a/assets/css/_layout.scss b/assets/css/_layout.scss index 1c01222..d0356fc 100644 --- a/assets/css/_layout.scss +++ b/assets/css/_layout.scss @@ -8,18 +8,6 @@ a { color: mix($background-color, $link-color, 30%); } -h1, -h2, -h3, -h4 { - font-weight: 300; -} - -h1 { - font-size: 1.6em; - margin: 0; -} - main { margin-top: 5vmin; } diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index c368f28..9d0ed7f 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -6,6 +6,8 @@ $foreground-color: $white; $link-color: #fd0; +$form-background-color: darken($background-color, 4%); + $board-border-color: #000; $board-shadow-color: rgba(0, 0, 0, 0.4); diff --git a/assets/css/app.scss b/assets/css/app.scss index 76bbed1..f081355 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -8,6 +8,7 @@ @import "tables"; @import "headings"; +@import "forms"; @import "layout"; @import "nav"; diff --git a/assets/css/base/_tables.scss b/assets/css/base/_tables.scss index e25bc52..cdec0e9 100644 --- a/assets/css/base/_tables.scss +++ b/assets/css/base/_tables.scss @@ -24,5 +24,5 @@ th { th, td { - padding: $small-spacing $small-spacing $small-spacing 0; + padding: $x-small-spacing; } diff --git a/assets/css/base/_typography.scss b/assets/css/base/_typography.scss index 2f036a5..6521f8f 100644 --- a/assets/css/base/_typography.scss +++ b/assets/css/base/_typography.scss @@ -18,7 +18,7 @@ h6 { } p { - margin: 0 0 $small-spacing; + margin: $small-spacing 0 $small-spacing; } a { diff --git a/assets/css/base/_variables.scss b/assets/css/base/_variables.scss index b10827a..4638cbe 100644 --- a/assets/css/base/_variables.scss +++ b/assets/css/base/_variables.scss @@ -7,9 +7,10 @@ $base-line-height: 1.5; $heading-line-height: 1.2; // Other Sizes -$base-border-radius: 3px; -$base-spacing: 1.5em; +$base-border-radius: 0.25rem; +$base-spacing: 2em; $small-spacing: $base-spacing / 2; +$x-small-spacing: $small-spacing / 2; $base-z-index: 0; // Colors diff --git a/lib/chess_web/templates/game/new.html.eex b/lib/chess_web/templates/game/new.html.eex index 2b26914..5cc9255 100644 --- a/lib/chess_web/templates/game/new.html.eex +++ b/lib/chess_web/templates/game/new.html.eex @@ -1,17 +1,19 @@ -

<%= gettext "New game" %>

+
+

<%= gettext "New game" %>

-<%= form_for @changeset, game_path(@conn, :create), [class: "create-game"], - fn form -> %> -
- <%= label form, :opponent_id %> - <%= select form, - :opponent_id, - @opponents, - prompt: gettext("Choose an opponent") %> - <%= error_tag form, :opponent_id %> -
+ <%= form_for @changeset, game_path(@conn, :create), [class: "create-game"], + fn form -> %> +
+ <%= label form, :opponent_id %> + <%= select form, + :opponent_id, + @opponents, + prompt: gettext("Choose an opponent") %> + <%= error_tag form, :opponent_id %> +
-
- <%= submit gettext("Create game"), class: "button" %> -
-<% end %> +
+ <%= submit gettext("Create game"), class: "button" %> +
+ <% end %> +
diff --git a/lib/chess_web/templates/registration/new.html.eex b/lib/chess_web/templates/registration/new.html.eex index ebbd32c..a5c732e 100644 --- a/lib/chess_web/templates/registration/new.html.eex +++ b/lib/chess_web/templates/registration/new.html.eex @@ -1,26 +1,28 @@ -

<%= gettext "Register" %>

+
+

<%= gettext "Register" %>

-<%= form_for @changeset, registration_path(@conn, :create), [class: "create-registration"], fn f -> %> - <%= if @changeset.action do %> -
-

- <%= gettext "Oops, something went wrong! Please check the errors below." %> -

+ <%= form_for @changeset, registration_path(@conn, :create), [class: "create-registration"], fn f -> %> + <%= if @changeset.action do %> +
+

+ <%= gettext "Oops, something went wrong! Please check the errors below." %> +

+
+ <% end %> + +
+
+ <%= input f, :name %> +
+
+ <%= input f, :email, as: :email %> +
+
+ <%= input f, :password, as: :password %> +
+
+
+ <%= submit gettext("Register"), class: "btn btn-primary" %>
<% end %> - -
-
- <%= input f, :name %> -
-
- <%= input f, :email, as: :email %> -
-
- <%= input f, :password, as: :password %> -
-
-
- <%= submit gettext("Register"), class: "btn btn-primary" %> -
-<% end %> +
diff --git a/lib/chess_web/templates/session/new.html.eex b/lib/chess_web/templates/session/new.html.eex index e02b6a2..3fd0bf4 100644 --- a/lib/chess_web/templates/session/new.html.eex +++ b/lib/chess_web/templates/session/new.html.eex @@ -1,23 +1,25 @@ -

<%= gettext "Log in" %>

+
+

<%= gettext "Log in" %>

-<%= form_for @changeset, session_path(@conn, :create), [class: "create-session"], fn f -> %> - <%= if @changeset.action do %> -
-

- <%= gettext "Oops, something went wrong! Please check the errors below." %> -

+ <%= form_for @changeset, session_path(@conn, :create), [class: "create-session"], fn f -> %> + <%= if @changeset.action do %> +
+

+ <%= gettext "Oops, something went wrong! Please check the errors below." %> +

+
+ <% end %> + +
+
+ <%= input f, :email, as: :email %> +
+
+ <%= input f, :password, as: :password %> +
+
+
+ <%= submit gettext("Log in"), class: "btn btn-primary" %>
<% end %> - -
-
- <%= input f, :email, as: :email %> -
-
- <%= input f, :password, as: :password %> -
-
-
- <%= submit gettext("Log in"), class: "btn btn-primary" %> -
-<% end %> +