Rails foundationSort Order

Rails: Cleaning up the UX Part 2

We'll be continuing to clean up the ui / ux of our blog application. We'll focus on the admin action bar in this episode.

Action Bar

We'll need to do some styling clean up.

# app/views/admin/posts/index.html# remove container-fluid from action_bar div<div class='action_bar container-fluid'></div># to<div class='action_bar'>  <div class='container'>    # move every thing inside the container  </div></div>

Tweaking the States Filter

We'll also need to tweak the helper function to use the new classes from bootstrap 4.

# app/helpers/admin/posts_helper.rbmodule Admin  module PostsHelper    class << self      def render_states(view)        view.sanitize(          statuses(view).map do |status, path|            view.content_tag :li, class: 'nav-item' do              view.link_to(                status,                path,                class: ['nav-link', active(view, path)].join(' ')              )            end          end.join        )      end            # ...    end  endend

Separate Admin Navbar

We need a separate navbar for the admin area since we'll have admin specific features on it. We'll simply copy the existing navbar and create a new instance of it for the admin area. Simply copy app/views/application/_navbar.html.erb into app/views/admin/base/_navbar.html.erb this will separate the admin's navbar from the main application. We also need to rename the brand area of the navbar.

# from<%= link_to 'Writefully', root_path, class: 'navbar-brand' %># to<%= link_to 'Admin, root_path, class: 'navbar-brand' %>

This way we can clearly see the separation from the front-end.