Rails foundationSort Order

Rails: Cleaning up the UX Part 3

In this episode we'll continue with cleaning up the UX. We'll add a nice gradient to our main body, and then move on to cleaning up the sign in, sign up and individual post pages.

Background Gradient

We will add the gradient to the main body so we'll do it in the application.sass

// ...body  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%)  min-height: 100vh

This will flush our main body area with a nice looking gradient.

Transparent Navbar

Now we want to make our navbar background transparent this can be achieved by removing a couple of classes from our navbar partial.

# app/views/application/_navbar.html.erb# remove navbar-light bg-light<nav class="navbar navbar-expand-lg"> # ...</nav>

We also need to make the link in the navbar white we'll do this by adding the following css to application.sass

// ...nav.navbar  a    color: white

Post Show Page

We will apply the card style to our post show page.

# app/views/posts/show.html.erb<div class='card no_border mt-5 mb-5'>  <div class='card-body'>    <h1 class='card-title'><%= @post.title %></h1>    <% if @post.cover_picture.attached? %>      <%= image_tag @post.cover_picture.variant(resize: '750x750') %>    <% end %>    <p><%= @post.body %></p>    <%= render 'comments/comments' %>  </div></div>

No Border Class

We want to use the no-border style in multiple places in our application so we'll need to remove it from the posts.sass and add it to application.sass

// ...// from div.post_card// todiv.no_border  border: none

We also need to rename the class in all the places we used the post_card class.

Sign In and Sign Up Page

Let's take care of the sign in page.

# app/views/auth/sessions/new.html.erb<div class='row justify-content-md-center'>  <div class='col col-lg-5'>    <div class='card shadow-lg no_border mt-5'>      <div class='card-body'>        <h2>Sign In</h2>        <%= form_tag auth_session_path do %>          <div class='form-group'>            <%= label_tag :email %>            <%= text_field_tag :email, nil, class: 'form-control' %>          </div>          <div class='form-group'>            <%= label_tag :password %>            <%= password_field_tag :password, nil, class: 'form-control' %>          </div>          <div class='actions'>            <%= submit_tag "Sign In", class: 'btn btn-success btn-block' %>          </div>        <% end %>      </div>    </div>  </div></div>

This will apply the card styling to our sign in page, and also put the sign in box in the middle of the page.

We need to do the same thing to the sign up page.

# app/views/auth/users/new.html.erb<div class='row justify-content-md-center'>  <div class='col col-lg-5'>    <div class='card no_border shadow-lg mt-5'>      <div class='card-body'>        <h2>Registration</h2>        <%= form_for [:auth, @user] do |f| %>          <% if @user.errors.any? %>            <div class='alert alert-danger'>              <h3><%= pluralize(@user.errors.count, 'error') %> stopped this form from saving.</h3>              <ul>                <% @user.errors.full_messages.each do |message| %>                  <li><%= message %></li>                <% end %>              </ul>            </div>          <% end %>          <div class='form-group'>            <%= f.label :email %>            <%= f.text_field :email, class: 'form-control' %>          </div>          <div class='form-group'>            <%= f.label :password %>            <%= f.password_field :password, class: 'form-control' %>          </div>          <div class='form-group'>            <%= f.label :password_confirmation %>            <%= f.password_field :password_confirmation, class: 'form-control' %>          </div>          <div class='actions'>            <%= f.submit "Finish", class: 'btn btn-success btn-block' %>          </div>        <% end %>      </div>    </div>  </div></div>

Spacing for the Flash Message

We can tweak the margin top for the flash message by adding the mt-3 class.

# app/views/application/_flash_messages.html.erb<% flash.each do |name, msg| %>  <div class='alert alert-<%= name %> mt-3'>    <%= msg %>  </div><% end %>

That's it for the clean up in this video!