Rails 5 Actioncable Real-Time Notifications – Part 2 Styling

We are continuing building our Facebook style Notifications using Rails 5 ActionCable. Please check Part 1 for basic setup, please also check Live Demo if you want to see the final result. In this part we will cover how to style our notification center.

facebook like notifications rails5

Anatoly Spektor

Let me help you!

Hey, I am Anatoly, founder of this blog. I would love to help you! I have 6+ years experience in Web Development and IT Leadership. Lets work together on your project! Leave me your email and I will schedule a FREE Consultation!

Part 1 is available here.

Source code is available here.

Styling

One of the design parts here is bell  icon with a counter.
Lets create them.

We will need couple of things to make it work.

Firstly, Icon of a Bell in *.SVG – Download (alternative_link)  and save it as “notification_bell”. Then  put image into notificator/app/assets/images/icons/notification_bell.svg (create icons folder).
Secondly, we need to put actual counter on the page. For this purpose lets create another partial:

notificator/app/views/events/_counter.html.erb

<li>
  <%= image_tag("icons/notification_bell") %>
  <span  id="notification-counter"><%= counter %></span>
</li>

As you might have noticed, this partial show icon of a bell, that we downloaded, and also another variable – counter. This variable is a number of notifications.

Lets include counter in our notification center:

notificator/app/views/notifications/_notification_center.html.erb

<ul class="notificator">
  <a href="#" id="open_notification">
    <%= render 'counter', counter: notifications.count %>
  </a>
  <div id="notificationContainer">
    <div id="notificationTitle">Notifications</div>
    <div id="notificationsBody" class="notifications">
      <ul id="notificationList">
        <%= render notifications %>
      </ul>
    </div>
    <div id="notificationFooter"></div>
  </div>
</ul>

Lines 2-4 is new, I have included counter  and passed local variable counter that counts our notifications.

Nice work! Time to do some styling!

Lets put following CSS in our notification.scss:

notificator/app/assets/stylesheets/notifications.scss

ul.notificator {
  display: inline-block;
  float:right;
  margin: 0;
  li
  {
    position: relative;
    list-style: none;

    i
    {
      color: #fff;
    }
  }
}

#notification-counter {
  position: absolute;
  top: -2px;
  left: 25px;

  background-color: rgb(212, 78, 3);
  color: #fff;
  border-radius: 3px;
  padding: 1px 3px;
  font: 8px Verdana;
}

This does two things: positions our notification centre to the left and styles counter number and counter icon. Pretty straightforward.

Result should look like this:

rails5_actioncable_tutorial_screen3

We are slowly getting there!

Next stop, I have some specific CSS for notification center, just to style it properly. I won’t get into much details of it, but if you have questions why something is the way it is, please put your questions into comments and lets discuss.

Please append following CSS to your notifications.scss

notificator/app/assets/stylesheets/notifications.scss

ul #notificationList
{
  li
  {
    position:relative;
    border-bottom: #dddddd 1px solid;
  }
  span
  {
    color: #989494;
    font-size: 8px;
  }

}

#notificationsBody  ul
{
  padding-left: 0;
}

#notificationContainer
{
  background-color: #fff;
  border: 1px solid rgba(100, 100, 100, .4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  overflow: visible;
  position: absolute;
  top: 70px;
  margin-left: -253px;
  width: 300px;
  z-index: 0;
  display: none;
}


#notificationContainer:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  color: transparent;
  border: 10px solid black;
  border-color: transparent transparent white;
  margin-top: -20px;
  margin-left: 258px;
}

#notificationTitle
{
  font-weight: bold;
  padding: 8px;
  font-size: 13px;
  background-color: #f0f0f0;
  position: absolute;
  z-index: 1;
  width: 284px;
  border-bottom: 1px solid #d44e03;
  color: #d44e03;
}

#notificationsBody
{
  padding: 3px 0px 0px 0px !important;
  min-height:300px;
  max-height:300px;
  overflow: auto;
  position: relative;
  width: 100%;
}


#notificationFooter
{
  background-color: #e9eaed;
  text-align: center;
  font-weight: bold;
  padding: 8px;
  font-size: 12px;
  border-top: 1px solid #dddddd;
}

Good job! To finish it up, we need some JavaScript that opens up and closes notification center. I am using JQuery to make it work.

notificator/app/assets/javascripts/notifications_center.js

$(document).ready(function()
{
    // open notification center on click
    $("#open_notification").click(function()
    {
        $("#notificationContainer").fadeToggle(300);
        $("#notification_count").fadeOut("fast");
        return false;
    });

    // hide notification center on click
    $(document).click(function()
    {
        $("#notificationContainer").hide();
    });


    $("#notificationContainer").click(function()
    {
        return false;
    });

});

If you did everything correctly, you should be able to refresh the page click on icon and get something like this:

rails5 actioncable tutorial screen4 notification center

If you click again it should close the notification center. Also if you go to http://0.0.0.0:3000/messages/new and add some more messages and refresh the page, your counter will update and your notification will appear in the list.

This is all cool, but wouldn’t it be much cooler, if you did not have to refresh the page ?

That is for this part.

Lets go to the Part 3 and  see how to make those notification update in real-time using ActionCable.

Rails 5 Actioncable Real-Time Notifications – Part 3 Stream Notifications

Please post your questions into comment section.

If you like what you see please Subscribe to my blog. If you need help with your project, please Get In Touch.

Thanks for installing the Bottom of every post plugin by Corey Salzano. Contact me if you need custom WordPress plugins or website design.

Anatoly Spektor

IT Consultant with 6 years experience in Software Development and IT Leadership. Participated in such projects as Eclipse IDE, Big Blue Button, Toronto 2015 Panam Games.

Related Posts

Join the Discussion

Your email address will not be published. Required fields are marked *

Discussion

  1. Moe

    Very well done Tutorial!
    Many of your Tutorials helped me through the nights 🙂
    Thank you very much for puttig so much work in it!
    When will Part 3 be released?

    1. Anatoly Spektor

      Part 3 is already available, glad you like it 🙂

arrow