call waiter css

app/assets/javascripts/channels/call_waiter.js

@@ -9,6 +9,7 @@ App.call_waiter = App.cable.subscriptions.create('CallWaiterChannel', {
    table = data.table
    
     // for Notificaiotn message
+    var element        = "#notify-wrapper"
     var placementFrom  = "top";
     var placementAlign = "center";
     var animateEnter   = "";
@@ -17,10 +18,10 @@ App.call_waiter = App.cable.subscriptions.create('CallWaiterChannel', {
     var text           = " Calling Waiter <br>  "+table.name ;
 
     if (text != null || colorName != null){
-     showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit); 
+     showNotification(element, colorName, text, placementFrom, placementAlign, animateEnter, animateExit); 
    }
 
-   function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
+   function showNotification(element, colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
     if (colorName === null || colorName === '') { colorName = 'bg-black'; }
     if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
     if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
@@ -30,6 +31,7 @@ App.call_waiter = App.cable.subscriptions.create('CallWaiterChannel', {
       message: text
     },
     {
+      element: element,
       type: colorName,
       allow_dismiss: allowDismiss,
       timer: 200000000000000,
@@ -42,7 +44,7 @@ App.call_waiter = App.cable.subscriptions.create('CallWaiterChannel', {
         exit: animateExit
       },
       template: '<div data-notify="container" style="width:180px !important;" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
-      '<button type="button" aria-hidden="true" class="close notify-close float-right m-l-5 m-t--5" data-notify="dismiss" style="right: -5px;">×</button>' +
+      '<button type="button" aria-hidden="true" class="close notify-close float-right m-l-5 m-t--5" data-notify="dismiss">×</button>' +
       '<span data-notify="icon"></span> ' +
       '<span data-notify="title">{1}</span> ' +
       '<span data-notify="message">{2}</span>' +

app/assets/stylesheets/origami.scss

@@ -362,11 +362,25 @@ tr.discount-item-row:hover {
 
 /* End Payment Page */
 
-/*Logout Icon*/
+/* Logout Icon */
+
 i.logout_icon{
   position: relative;
   top: 5px;
 }
+
+/* End Logout Icon */
+
+/* Notify */
+
+#notify-wrapper {
+	position: absolute;
+	top: 55px;
+	left: 10px;
+	z-index: 9999;
+	opacity: 0.8;
+}
+
 [data-notify="container"] {
 	margin-bottom: 5px !important;
 	margin-left:5px !important;
@@ -374,17 +388,5 @@ i.logout_icon{
 	top: 25% !important;
     width: 100% !important;
 }
-/*
-.bootstrap-notify-container {
-	  position:  !important;
-	  margin:10px 10px 10px 10px !important;
-	  float:left !important;
-	  display:block !important;
-	  z-index: 9999999;
-opacity: 1;
-}
 
-.notify-close{
+/* End Notify */
-	position:initial !important;
-}
-*/

app/views/layouts/origami.html.erb

@@ -41,6 +41,10 @@
         <%= render 'layouts/right_sidebar' %>  
     </section>
 
+    <!-- Notify -->
+    <div id="notify-wrapper"></div>
+    <!-- Notify -->
+
     <!-- Main Content -->
     <section class="content"> 
       <% flash.each do |type, message| %>