Now that we have a homepage setup, let's walkthrough what we want. For our admin, we want a list of posts that have been entered by employees, but not reviewed yet. Below that, we'll have a list of audit logs that are pending, so admin knows that these posts have been entered by employees, but they haven't been confirmed yet.

Now, let's start building out this page. Open _admin.html.erb and include two div tags - one for each list that we talked about. Next, we want to style these lists, so let's create a new stylesheet called admin_homepage.css In this file, we'll define the style for each div ID. Also, open application.css.scss and import the admin_homepage.css file.

To style our page, I like using a cool tool called "Border Radius." You can find it at "www.border-radius.com". If you select the border you need, it'll generate the CSS code for you. Just copy it and put it in your admin_homepage.css file.

Next, let's pick a background color. Go to "www.colorpicker.com" and get the hex code for the color of your choice. Then, we'll add a margin and some padding. All these styles are up to you, so feel free to experiment.

Now, I want to have blocks because I think a table would be a bit overkill. So, let's use more div tags, and style them. Let's also leverage some things from bootstrap, like this:

<!-- app/views/static/_admin.html.erb -->

<div class='container-fluid'>
  <div class='pending-homepage row'>
    <div class='homepage-block col-md-3'>
      <p>asdf</p>
    </div>

    <div class='homepage-block col-md-3'>
      <p>asdf</p>
    </div>

    <div class='homepage-block col-md-3'>
      <p>asdf</p>
    </div>

    <div class='homepage-block col-md-3'>
      <p>asdf</p>
    </div>

    <div class='homepage-block col-md-3'>
      <p>asdf</p>
    </div>
  </div>

  <div class='pending-homepage'>
    <div>
      <p>asdf</p>
    </div>
  </div>
</div>

Our css file should look like this:

/* app/assets/stylesheets/admin_homepage.css */

.pending-homepage {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #E3E3E3;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 20px;
}

.homepage-block {
  background-color: #1D3C91;
  color: white;
  margin: 15px;
  padding: 15px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

Resources

• Code at this stage