mirror of
https://github.com/astuto/astuto.git
synced 2025-12-15 19:27:52 +01:00
Improve style, in particular forms
This commit is contained in:
@@ -1 +1,7 @@
|
||||
@import './bootstrap_custom.scss'
|
||||
@import './bootstrap_custom.scss';
|
||||
@import './navbar.scss';
|
||||
@import './forms.scss';
|
||||
|
||||
.container {
|
||||
max-width: 920px;
|
||||
}
|
||||
11
app/javascript/stylesheets/forms.scss
Normal file
11
app/javascript/stylesheets/forms.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import "node_modules/bootstrap/scss/variables";
|
||||
|
||||
.field_with_errors {
|
||||
label {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
input {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
12
app/javascript/stylesheets/navbar.scss
Normal file
12
app/javascript/stylesheets/navbar.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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 %>
|
||||
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %>
|
||||
@@ -1,4 +1,5 @@
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<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>
|
||||
@@ -9,10 +10,10 @@
|
||||
<% 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 %>
|
||||
<%= current_user.full_name %>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<%= link_to "Profile", edit_user_registration_path, class: "dropdown-item" %>
|
||||
<%= 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>
|
||||
@@ -24,4 +25,5 @@
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -13,6 +13,8 @@
|
||||
<%= render "layouts/header" %>
|
||||
<%= render "layouts/alerts" %>
|
||||
|
||||
<div class="container">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user