Skip to content

Commit

Permalink
Styling devise views
Browse files Browse the repository at this point in the history
  • Loading branch information
@aziflaj
aziflaj committed Aug 28, 2019
1 parent 9840050 commit e4efe7e
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 128 deletions.
50 changes: 30 additions & 20 deletions app/views/devise/passwords/edit.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,35 @@
<h2>Change your password</h2>
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title">Change your password</span>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<%= f.hidden_field :reset_password_token %>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<%= f.hidden_field :reset_password_token %>

<div class="field">
<%= f.label :password, "New password" %><br />
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em><br />
<% end %>
<%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.password_field :password, autocomplete: "new-password", placeholder: 'Password' %>
</div>
</div>

<div class="field">
<%= f.label :password_confirmation, "Confirm new password" %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.password_field :password_confirmation, autocomplete: "new-password", placeholder: 'Password Confirmation' %>
</div>
</div>
<div class="row">
<div class="input-field col s12 remember-me-check">
<%= f.submit "Change my password", class: 'btn' %>
</div>
</div>
<% end %>

<div class="actions">
<%= f.submit "Change my password" %>
</div>
<div class="card-action">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
37 changes: 25 additions & 12 deletions app/views/devise/passwords/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
<h2>Forgot your password?</h2>
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title">Forgot your password?</span>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<%= 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>
<div class="row">
<div class="input-field col s12">
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'validate', placeholder: 'Email' %>
</div>
</div>

<div class="actions">
<%= f.submit "Send me reset password instructions" %>
</div>
<% end %>
<div class="row">
<div class="input-field col s12 remember-me-check">
<%= f.submit "Send me reset password instructions", class: 'btn' %>
</div>
</div>
<% end %>

<%= render "devise/shared/links" %>
</div>
<div class="card-action">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
63 changes: 40 additions & 23 deletions app/views/devise/registrations/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,46 @@
<h2>Sign up</h2>
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title">Sign Up</span>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) 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>
<div class="row">
<div class="input-field col s12">
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'validate', placeholder: 'Email' %>
</div>
</div>

<div class="field">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password" %>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.email_field :username, autofocus: true, autocomplete: "username", class: 'validate', placeholder: 'Username' %>
</div>
</div>

<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.password_field :password, autocomplete: "new-password", placeholder: 'Password' %>
</div>
</div>

<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<div class="row">
<div class="input-field col s12">
<%= f.password_field :password_confirmation, autocomplete: "new-password", placeholder: 'Password Confirmation' %>
</div>
</div>

<%= render "devise/shared/links" %>
<div class="row">
<div class="input-field col s12 remember-me-check">
<%= f.submit "Sign up", class: 'btn' %>
</div>
</div>
<% end %>
</div>
<div class="card-action">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
60 changes: 39 additions & 21 deletions app/views/devise/sessions/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,44 @@
<h2>Log in</h2>
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title">Log In</span>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="row">
<div class="input-field col s12">
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'validate', placeholder: 'Email' %>
</div>
</div>

<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "current-password" %>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.password_field :password, autocomplete: "current-password", placeholder: 'Password' %>
</div>
</div>

<% if devise_mapping.rememberable? %>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<% if devise_mapping.rememberable? %>
<div class="row">
<div class="input-field col s12 remember-me-check">
<label>
<%= f.check_box :remember_me, class: 'filled-in' %>
<span>Remember me</span>
</label>
</div>
</div>
<% end %>

<div class="actions">
<%= f.submit "Log in" %>
</div>
<% end %>
<div class="row">
<div class="input-field col s12 remember-me-check">
<%= f.submit "Log in", class: 'btn' %>
</div>
</div>
<% end %>

<%= render "devise/shared/links" %>
</div>
<div class="card-action">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>
8 changes: 4 additions & 4 deletions app/views/devise/shared/_links.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<%= link_to "Log in", new_session_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
<% end %>
Expand Down
16 changes: 10 additions & 6 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,15 @@
</head>

<body>
<%= render 'shared/header' %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
<%= render 'shared/footer' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= render 'shared/header' %>
<%= render 'shared/flash' %>

<div class="container">
<%= yield %>
</div>

<%= render 'shared/footer' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</body>
</html>
78 changes: 36 additions & 42 deletions app/views/pages/hello.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,49 @@
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Skeduler</h1>
<div class="row center">
<h5 class="header col s12 light">The best way to schedule your appointments</h5>
</div>
<div class="row center">
<%= link_to 'Get Started', new_user_session_path, class: 'btn-large waves-effect waves-light orange' %>
</div>
<h1 class="header center orange-text">Skeduler</h1>
<div class="row center">
<h5 class="header col s12 light">The best way to schedule your appointments</h5>
</div>
<div class="row center">
<%= link_to 'Get Started', new_user_session_path, class: 'btn-large waves-effect waves-light orange' %>
</div>
</div>


<div class="container">
<div class="section">

<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">A Good Feature</h5>
<p class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deserunt dicta dolores enim eum, fugit ipsa iste itaque minus molestiae, natus, optio perferendis provident quod similique veniam veritatis. Perspiciatis, quidem.
</p>
</div>
<div class="section">
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">A Good Feature</h5>
<p class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deserunt dicta dolores enim eum, fugit
ipsa iste itaque minus molestiae, natus, optio perferendis provident quod similique veniam veritatis.
Perspiciatis, quidem.
</p>
</div>
</div>

<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
<h5 class="center">Another Good Feature</h5>

<p class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cupiditate et iusto quo ullam. Atque eum explicabo, inventore iusto, laborum modi nam omnis quisquam quo quos repellat repellendus tenetur vero.
</p>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
<h5 class="center">Another Good Feature</h5>
<p class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cupiditate et iusto quo ullam. Atque eum
explicabo, inventore iusto, laborum modi nam omnis quisquam quo quos repellat repellendus tenetur vero.
</p>
</div>
</div>

<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
<h5 class="center">The Most Awesome Feature</h5>

<p class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam delectus deleniti dolorum, earum facilis fugiat laborum magni molestiae numquam obcaecati possimus, quis quo ratione rerum sapiente suscipit tenetur vel voluptatem!
</p>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
<h5 class="center">The Most Awesome Feature</h5>
<p class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam delectus deleniti dolorum, earum facilis
fugiat laborum magni molestiae numquam obcaecati possimus, quis quo ratione rerum sapiente suscipit tenetur
vel voluptatem!
</p>
</div>
</div>

</div>
<br><br>
</div>
2 changes: 2 additions & 0 deletions app/views/shared/_flash.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

0 comments on commit e4efe7e

Please sign in to comment.