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.
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
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
- <%= render 'counter', counter: notifications.count %>
- <%= render notifications %>
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:
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:
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.
