From 7f2f536027b3dc086c1eaa446c737bdd8c7d0e7e Mon Sep 17 00:00:00 2001 From: riggraz Date: Mon, 19 Aug 2019 16:43:32 +0200 Subject: [PATCH] Improve style, in particular forms --- app/javascript/stylesheets/application.scss | 8 ++- app/javascript/stylesheets/forms.scss | 11 ++++ app/javascript/stylesheets/navbar.scss | 12 +++++ app/views/devise/confirmations/new.html.erb | 8 +-- app/views/devise/passwords/edit.html.erb | 18 ++++--- app/views/devise/passwords/new.html.erb | 8 +-- app/views/devise/registrations/edit.html.erb | 23 ++++++--- app/views/devise/registrations/new.html.erb | 14 +++--- app/views/devise/sessions/new.html.erb | 4 +- .../devise/shared/_error_messages.html.erb | 4 +- app/views/layouts/_alerts.html.erb | 4 +- app/views/layouts/_header.html.erb | 50 ++++++++++--------- app/views/layouts/application.html.erb | 6 ++- 13 files changed, 108 insertions(+), 62 deletions(-) create mode 100644 app/javascript/stylesheets/forms.scss create mode 100644 app/javascript/stylesheets/navbar.scss diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index a2893c5c..e4554c08 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -1 +1,7 @@ -@import './bootstrap_custom.scss' \ No newline at end of file +@import './bootstrap_custom.scss'; +@import './navbar.scss'; +@import './forms.scss'; + +.container { + max-width: 920px; +} \ No newline at end of file diff --git a/app/javascript/stylesheets/forms.scss b/app/javascript/stylesheets/forms.scss new file mode 100644 index 00000000..94d489ff --- /dev/null +++ b/app/javascript/stylesheets/forms.scss @@ -0,0 +1,11 @@ +@import "node_modules/bootstrap/scss/variables"; + +.field_with_errors { + label { + color: $danger; + } + + input { + border-color: $danger; + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/navbar.scss b/app/javascript/stylesheets/navbar.scss new file mode 100644 index 00000000..156e19dd --- /dev/null +++ b/app/javascript/stylesheets/navbar.scss @@ -0,0 +1,12 @@ +.navbar { + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: black; + + margin-bottom: 1.5em; + + .navbar-brand { + font-size: 18pt; + font-weight: 700; + } +} \ No newline at end of file diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb index b12dd0cb..bc619e15 100644 --- a/app/views/devise/confirmations/new.html.erb +++ b/app/views/devise/confirmations/new.html.erb @@ -3,13 +3,13 @@ <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> -
- <%= f.label :email %>
- <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %> +
+ <%= f.label :email %> + <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
- <%= f.submit "Resend confirmation instructions" %> + <%= f.submit "Resend confirmation instructions", class: "btn btn-primary" %>
<% end %> diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb index 5fbb9ff0..c584820c 100644 --- a/app/views/devise/passwords/edit.html.erb +++ b/app/views/devise/passwords/edit.html.erb @@ -4,21 +4,23 @@ <%= render "devise/shared/error_messages", resource: resource %> <%= f.hidden_field :reset_password_token %> -
- <%= f.label :password, "New password" %>
+
+ <%= f.label :password, "New password" %> + <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-control" %> <% if @minimum_password_length %> - (<%= @minimum_password_length %> characters minimum)
+ + (<%= @minimum_password_length %> characters minimum) + <% end %> - <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
-
- <%= f.label :password_confirmation, "Confirm new password" %>
- <%= f.password_field :password_confirmation, autocomplete: "new-password" %> +
+ <%= f.label :password_confirmation, "Confirm new password" %> + <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
- <%= f.submit "Change my password" %> + <%= f.submit "Change my password", class: "btn btn-primary" %>
<% end %> diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb index 9b486b81..ce3e7ad3 100644 --- a/app/views/devise/passwords/new.html.erb +++ b/app/views/devise/passwords/new.html.erb @@ -3,13 +3,13 @@ <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> -
- <%= f.label :email %>
- <%= f.email_field :email, autofocus: true, autocomplete: "email" %> +
+ <%= f.label :email %> + <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
- <%= f.submit "Send me reset password instructions" %> + <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
<% end %> diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb index b7a78915..551fa1f5 100644 --- a/app/views/devise/registrations/edit.html.erb +++ b/app/views/devise/registrations/edit.html.erb @@ -4,12 +4,12 @@ <%= render "devise/shared/error_messages", resource: resource %>
- <%= f.label :full_name %>
+ <%= f.label :full_name %> <%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
- <%= f.label :email %>
+ <%= f.label :email %> <%= f.email_field :email, autocomplete: "email", class: "form-control" %>
@@ -18,22 +18,29 @@ <% end %>
- <%= f.label :password %> (leave blank if you don't want to change it)
+ <%= f.label :password %> <%= f.password_field :password, autocomplete: "new-password", class: "form-control" %> <% if @minimum_password_length %> -
- <%= @minimum_password_length %> characters minimum + + leave blank if you don't want to change it + + + <%= @minimum_password_length %> characters minimum + <% end %>
- <%= f.label :password_confirmation %>
+ <%= f.label :password_confirmation %> <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
- <%= f.label :current_password %> (we need your current password to confirm your changes)
+ <%= f.label :current_password %> <%= f.password_field :current_password, autocomplete: "current-password", class: "form-control" %> + + we need your current password to confirm your changes +
@@ -41,6 +48,8 @@
<% end %> +
+

Cancel my account

Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger" %>

diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb index 3a11453d..bcbf01d0 100644 --- a/app/views/devise/registrations/new.html.erb +++ b/app/views/devise/registrations/new.html.erb @@ -4,25 +4,27 @@ <%= render "devise/shared/error_messages", resource: resource %>
- <%= f.label :full_name %>
+ <%= f.label :full_name %> <%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
- <%= f.label :email %>
+ <%= f.label :email %> <%= f.email_field :email, autocomplete: "email", class: "form-control" %>
<%= f.label :password %> - <% if @minimum_password_length %> - (<%= @minimum_password_length %> characters minimum) - <% end %>
<%= f.password_field :password, autocomplete: "new-password", class: "form-control" %> + <% if @minimum_password_length %> + + (<%= @minimum_password_length %> characters minimum) + + <% end %>
- <%= f.label :password_confirmation %>
+ <%= f.label :password_confirmation %> <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 59579e73..12f0f281 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -2,12 +2,12 @@ <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
- <%= f.label :email %>
+ <%= f.label :email %> <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
- <%= f.label :password %>
+ <%= f.label :password %> <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
diff --git a/app/views/devise/shared/_error_messages.html.erb b/app/views/devise/shared/_error_messages.html.erb index 00f52174..f1bbd9bd 100644 --- a/app/views/devise/shared/_error_messages.html.erb +++ b/app/views/devise/shared/_error_messages.html.erb @@ -1,11 +1,11 @@ <% if resource.errors.any? %>
-

+

<%= I18n.t("errors.messages.not_saved", count: resource.errors.count, resource: resource.class.model_name.human.downcase) %> -

+
    <% resource.errors.full_messages.each do |message| %>
  • <%= message %>
    • diff --git a/app/views/layouts/_alerts.html.erb b/app/views/layouts/_alerts.html.erb index 8cf8a168..4fb53720 100644 --- a/app/views/layouts/_alerts.html.erb +++ b/app/views/layouts/_alerts.html.erb @@ -1,7 +1,7 @@ <% if notice %> -

    <%= notice %>

    +

    <%= notice %>

    <% end %> <% if alert %> -

    <%= alert %>

    +

    <%= alert %>

    <% end %> \ No newline at end of file diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 24b0ac9f..0b233b25 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,27 +1,29 @@ -