Improve style, in particular forms

This commit is contained in:
riggraz
2019-08-19 16:43:32 +02:00
parent 983841800c
commit 7f2f536027
13 changed files with 108 additions and 62 deletions

View File

@@ -1 +1,7 @@
@import './bootstrap_custom.scss'
@import './bootstrap_custom.scss';
@import './navbar.scss';
@import './forms.scss';
.container {
max-width: 920px;
}

View File

@@ -0,0 +1,11 @@
@import "node_modules/bootstrap/scss/variables";
.field_with_errors {
label {
color: $danger;
}
input {
border-color: $danger;
}
}

View File

@@ -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;
}
}

View File

@@ -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 %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Resend confirmation instructions" %>
<%= f.submit "Resend confirmation instructions", class: "btn btn-primary" %>
</div>
<% end %>

View File

@@ -4,21 +4,23 @@
<%= render "devise/shared/error_messages", resource: resource %>
<%= f.hidden_field :reset_password_token %>
<div class="field">
<%= f.label :password, "New password" %><br />
<div class="form-group">
<%= f.label :password, "New password" %>
<%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-control" %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em><br />
<small id="passwordHelp" class="form-text text-muted">
(<%= @minimum_password_length %> characters minimum)
</small>
<% end %>
<%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :password_confirmation, "Confirm new password" %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
<div class="form-group">
<%= f.label :password_confirmation, "Confirm new password" %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Change my password" %>
<%= f.submit "Change my password", class: "btn btn-primary" %>
</div>
<% end %>

View File

@@ -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 %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Send me reset password instructions" %>
<%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
</div>
<% end %>

View File

@@ -4,12 +4,12 @@
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :full_name %><br />
<%= f.label :full_name %>
<%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :email %><br />
<%= f.label :email %>
<%= f.email_field :email, autocomplete: "email", class: "form-control" %>
</div>
@@ -18,22 +18,29 @@
<% end %>
<div class="form-group">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "new-password", class: "form-control" %>
<% if @minimum_password_length %>
<br />
<em><%= @minimum_password_length %> characters minimum</em>
<small id="passwordEditHelp" class="form-text text-muted">
leave blank if you don't want to change it
</small>
<small id="passwordHelp" class="form-text text-muted">
<%= @minimum_password_length %> characters minimum
</small>
<% end %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.label :current_password %>
<%= f.password_field :current_password, autocomplete: "current-password", class: "form-control" %>
<small id="currentPasswordHelp" class="form-text text-muted">
we need your current password to confirm your changes
</small>
</div>
<div class="actions">
@@ -41,6 +48,8 @@
</div>
<% end %>
<br />
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger" %></p>

View File

@@ -4,25 +4,27 @@
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :full_name %><br />
<%= f.label :full_name %>
<%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :email %><br />
<%= f.label :email %>
<%= f.email_field :email, autocomplete: "email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password", class: "form-control" %>
<% if @minimum_password_length %>
<small id="passwordHelp" class="form-text text-muted">
(<%= @minimum_password_length %> characters minimum)
</small>
<% end %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
</div>

View File

@@ -2,12 +2,12 @@
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %><br />
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
</div>

View File

@@ -1,11 +1,11 @@
<% if resource.errors.any? %>
<div id="error_explanation" class="alert alert-danger">
<h2>
<h4>
<%= I18n.t("errors.messages.not_saved",
count: resource.errors.count,
resource: resource.class.model_name.human.downcase)
%>
</h2>
</h4>
<ul>
<% resource.errors.full_messages.each do |message| %>
<li><%= message %></li>

View File

@@ -1,7 +1,7 @@
<% if notice %>
<p class="notice alert alert-primary"><%= notice %></p>
<p class="notice container alert alert-primary"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<p class="alert container alert-danger"><%= alert %></p>
<% end %>

View File

@@ -1,27 +1,29 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<%= link_to "Astuto", "#", class: "navbar-brand" %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<%= link_to "Astuto", "#", class: "navbar-brand" %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<% if user_signed_in? %>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= current_user.email %>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<%= link_to "Profile", edit_user_registration_path, class: "dropdown-item" %>
<div class="dropdown-divider"></div>
<%= link_to "Sign out", destroy_user_session_path, method: :delete, class: "dropdown-item" %>
</div>
</li>
<% else %>
<li class="nav-item">
<%= link_to "Sign in / Sign up", new_user_session_path, class: "nav-link" %>
</li>
<% end %>
</ul>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<% if user_signed_in? %>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= current_user.full_name %>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<%= link_to "Profile settings", edit_user_registration_path, class: "dropdown-item" %>
<div class="dropdown-divider"></div>
<%= link_to "Sign out", destroy_user_session_path, method: :delete, class: "dropdown-item" %>
</div>
</li>
<% else %>
<li class="nav-item">
<%= link_to "Sign in / Sign up", new_user_session_path, class: "nav-link" %>
</li>
<% end %>
</ul>
</div>
</div>
</nav>

View File

@@ -12,7 +12,9 @@
<body>
<%= render "layouts/header" %>
<%= render "layouts/alerts" %>
<%= yield %>
<div class="container">
<%= yield %>
</div>
</body>
</html>