Rails 5 Actioncable Actual-Time Notifications – Section 2 Styling

We’re proceeding construction our Fb genre Notifications the usage of Rails 5 ActionCable. Please take a look at Section 1 for fundamental setup, please additionally take a look at Reside Demo if you wish to see the general outcome. On this section we can quilt how one can genre our notification heart.

Section 1 is to be had right here.

Supply code is to be had right here.

Styling

Some of the design portions here’s bell  icon with a counter.
Shall we create them.

We can want couple of items to make it paintings.

In the beginning, Icon of a Bell in *.SVG – Obtain (alternative_link)  and put it aside as “notification_bell”. Then  put symbol into notificator/app/property/photographs/icons/notification_bell.svg (create icons folder).
Secondly, we wish to put precise counter at the web page. For this objective shall we create some other partial:

notificator/app/perspectives/occasions/_counter.html.erb

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

As you could have spotted, this partial display icon of a bell, that we downloaded, and in addition some other variable – counter. This variable is numerous notifications.

Shall we come with counter in our notification heart:

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

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

Strains 2-4 is new, I’ve incorporated counter  and handed native variable counter that counts our notifications.

Great paintings! Time to perform a little styling!

Shall we put following CSS in our notification.scss:

notificator/app/property/stylesheets/notifications.scss

ul.notificator {
  show: inline-block;
  waft:proper;
  margin: 0;
  li
  {
    place: relative;
    list-style: none;

    i
    {
      coloration: #fff;
    }
  }
}

#notification-counter {
  place: absolute;
  peak: -2px;
  left: 25px;

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

This does two issues: positions our notification centre to the left and kinds counter quantity and counter icon. Beautiful easy.

Consequence will have to seem like this:

We’re slowly getting there!

Subsequent forestall, I’ve some explicit CSS for notification heart, simply to genre it correctly. I received’t get into a lot main points of it, however if in case you have questions why one thing is the best way it’s, please put your questions into feedback and shall we talk about.

Please append following CSS on your notifications.scss

notificator/app/property/stylesheets/notifications.scss

ul #notificationList
{
  li
  {
    place:relative;
    border-bottom: #dddddd 1px forged;
  }
  span
  {
    coloration: #989494;
    font-size: 8px;
  }

}

#notificationsBody  ul
{
  padding-left: 0;
}

#notificationContainer
{
  background-color: #fff;
  border: 1px forged rgba(100, 100, 100, .4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  overflow: visual;
  place: absolute;
  peak: 70px;
  margin-left: -253px;
  width: 300px;
  z-index: 0;
  show: none;
}


#notificationContainer:sooner than {
  content material: '';
  show: block;
  place: absolute;
  width: 0;
  top: 0;
  coloration: clear;
  border: 10px forged black;
  border-color: clear clear white;
  margin-top: -20px;
  margin-left: 258px;
}

#notificationTitle
{
  font-weight: daring;
  padding: 8px;
  font-size: 13px;
  background-color: #f0f0f0;
  place: absolute;
  z-index: 1;
  width: 284px;
  border-bottom: 1px forged #d44e03;
  coloration: #d44e03;
}

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


#notificationFooter
{
  background-color: #e9eaed;
  text-align: heart;
  font-weight: daring;
  padding: 8px;
  font-size: 12px;
  border-top: 1px forged #dddddd;
}

Just right process! To complete it up, we’d like some JavaScript that opens up and closes notification heart. I’m the usage of JQuery to make it paintings.

notificator/app/property/javascripts/notifications_center.js

$(file).in a position(serve as()
{
    // open notification heart on click on
    $("#open_notification").click on(serve as()
    {
        $("#notificationContainer").fadeToggle(300);
        $("#notification_count").fadeOut("speedy");
        go back false;
    });

    // cover notification heart on click on
    $(file).click on(serve as()
    {
        $("#notificationContainer").cover();
    });


    $("#notificationContainer").click on(serve as()
    {
        go back false;
    });

});

When you did the entirety appropriately, you will have to be capable of refresh the web page click on on icon and get one thing like this:

When you click on once more it will have to shut the notification heart. Additionally if you happen to pass to  and upload some extra messages and refresh the web page, your counter will replace and your notification will seem within the listing.

That is all cool, however wouldn’t it’s a lot cooler, if you didn’t have to refresh the web page ?

This is for this section.

Shall we pass to the Section 3 and  see how one can make the ones notification replace in real-time the usage of ActionCable.

Rails 5 Actioncable Actual-Time Notifications – Section 3 Movement Notifications

Please submit your questions into remark segment.

When you like what you spot please Subscribe to my weblog. If you wish to have assist along with your undertaking, please Get In Contact.

Thank you for putting in the Backside of each submit plugin through Corey Salzano. Touch me if you wish to have customized WordPress plugins or web site design.