Rails foundationSort Order

Rails: Cleaning up the UX Part 1

Now that we've upgraded to bootstrap 4.1 we need to upgrade our application ui / ux to work well with bootstrap 4.1. Since there are a lot of changes if you wish to view the full diff check it out here.

Modifying the Nav Bar

We'll start by modifying the navigation bar.

# app/views/application/_navbar.html.erb<nav class="navbar navbar-expand-lg navbar-light bg-light">  <div class="container">    <%= link_to 'Writefully', root_path, class: 'navbar-brand' %>    <ul class='navbar-nav'>      <%= render_user_auth_nav %>    </ul>  </div></nav>

The render_user_auth_nav references the signed_in and signed_out partials. Let's modify them.

# app/views/application/_signed_in.html.erb<li class='nav-item'>  <%= link_to current_user.email, '#', class: 'nav-link' %></li><li class='nav-item'>  <%= link_to 'Sign out', logout_path, method: :delete, class: 'nav-link' %></li>
# app/views/application/_signed_out.html.erb<li class='nav-item'>  <%= link_to 'Sign in', login_path, class: 'nav-link' %></li><li class='nav-item'>  <%= link_to 'Sign up', register_path, class: 'nav-link' %></li>

Simplifying the Layout

We can also remove a lot of code from the layouts, let's start with the main application.html.erb

# app/views/layouts/application.html.erb# ...<body>  <%= render 'navbar' %>  <div id='main' class='container'>    <%= render 'flash_messages' %>    <%= yield %>  </div></body># ...

Cleaning up the Post

Next up is the way the post looks on the post index page. We'll use the card component from bootstrap.

# app/views/posts/_post.html.erb<%= div_for post, class: 'card post_card shadow-lg mt-5 mb-5' do %>  <div class='card-body'>    <h2 class='card-title'>      <%= link_to post.title, post_path(post) %>    </h2>    <p><%= post.body %></p>    <p>Comments(<%= post.comments_count %>)</p>    <ul>      <% post.tags.each do |tag| %>        <li><%= tag.name %></li>      <% end %>    </ul>    <p class='card-text'>      <small class='text-muted'><%= time_ago_in_words(post.published_at) %> ago</small>    </p>  </div><% end %>

Now we'll clean up the post show page.

# app/views/posts/show.html.erb<div class='mt-5 mb-5'>  <h1><%= @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>