Ticket #711 - User end.

inc/js/classes/BxDolCmts.js

@@ -404,13 +404,13 @@ BxDolCmts.prototype.showLiveUpdate = function(oData)
 
 	oNotifs.prependTo('body').dolPopup({
     	position: 'fixed',
-    	top: '0px',
+    	left: '1rem',
+    	top: 'auto',
+    	bottom: '1rem',
     	fog: false,
     	onBeforeShow: function() {
-    		$('body').addClass('cmt-notif-holder');
     	},
     	onBeforeHide: function() {
-    		$('body').removeClass('cmt-notif-holder');
     	},
     	onHide: function() {
     		$this.resumeLiveUpdates();

inc/js/jquery.dolPopup.js

@@ -16,6 +16,7 @@
         pointer: false, // {el:(string_id|jquery_object), align: (left|right|center)},
         left: 0, // only for fixed or absolute
         top: 0, // only for fixed
+        bottom: 'auto', // only for fixed or absolute
         moveToDocRoot: true,
         onBeforeShow: function () {},
         onShow: function () {},
@@ -553,7 +554,8 @@
                 $el.css({
                     position: o.position,
                     left: o.left,
-                    top: o.top
+                    top: o.top,
+                    bottom: o.bottom
                 });
 
             } else if (o.position == 'centered') {

template/comments_notification.html

@@ -1,8 +1,8 @@
 <div id="__html_id__" class="__style_prefix__-notifs" style="display:none;">
 	<bx_repeat:notifs>
-		<div class="__style_prefix__-notif bx-def-border-top bx-def-border-bottom"<bx_if:show_as_hidden> style="display:none;"</bx_if:show_as_hidden>>
-			<div class="__style_prefix__-notif-cnt">
-				<div class="__style_prefix__-notif-comment bx-def-thumb-size-max-height bx-def-margin-sec-topbottom">
+		<div class="__style_prefix__-notif bx-def-border bx-def-round-corners bx-def-box-sizing"<bx_if:show_as_hidden> style="display:none;"</bx_if:show_as_hidden>>
+			<div class="__style_prefix__-notif-cnt bx-def-margin-leftright">
+				<div class="__style_prefix__-notif-comment bx-def-margin-topbottom">
 					<div class="__style_prefix__-notif-avatar bx-def-thumb bx-def-thumb-size">
 						<bx_if:show_icon>
 							<img class="bx-def-thumb bx-def-thumb-size" src="__author_icon__" />
@@ -28,11 +28,11 @@
 				</div>
 			</div>
 			<bx_if:show_previous>
-				<div class="__style_prefix__-notif-actions cmt-na-left bx-def-padding-sec-left">
+				<div class="__style_prefix__-notif-actions cmt-na-left bx-def-padding-thd-left">
 					<a href="javascript:void(0)" onclick="javascript:__js_object__.previousLiveUpdate(this);"><i class="sys-icon arrow-left"></i></a>
 				</div>
 			</bx_if:show_previous>
-			<div class="__style_prefix__-notif-actions cmt-na-right bx-def-padding-sec-right">
+			<div class="__style_prefix__-notif-actions cmt-na-right bx-def-padding-thd-right">
 				<a href="javascript:void(0)" onclick="javascript:__js_object__.hideLiveUpdate(this);"><i class="sys-icon times"></i></a>
 			</div>
 		</div>

template/css/cmts.css

@@ -206,39 +206,24 @@
     }
 
     /*--- Live Update Notification Styles ---*/
-	.cmt-notif-holder {
-		padding-top: 70px;
-    	padding-top: 4.375rem;
-    }
     div.cmt-notifs {
 		position: relative;
-
-    	width: 100%;
+    	max-width: 22.5rem;
     }
     div.cmt-notif {
     	position: relative;
 
     	width: 100%;
-    	height: 68px;
-    	height: 4.25rem;
 
-    	border-color: #000000;
-    	background-color: rgba(85, 85, 85, .9);
+    	border-color: rgba(0, 0, 0, 0.2);
+    	background-color: #ffffff;
 
-    	color: #ffffff;
-    }
-    div.cmt-notif-cnt {
-		position: relative;
-    	padding: 0px 50px;
-    	padding: 0px 3.125rem;
+    	box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
     }
+    div.cmt-notif-cnt {}
     div.cmt-notif-actions {
 		position: absolute;
-    	height: 100%;
     	top: 0px;
-
-    	line-height: 68px;
-    	line-height: 4.25rem;
     }
 	div.cmt-na-left {
     	left: 0px;
@@ -249,17 +234,11 @@
     div.cmt-notif-actions a {
     	line-height: initial;
     	text-decoration: none;
-    	font-size: 28px;
-    	font-size: 1.75rem;
-    	color: #9c9c9c;
     }
 
     /*--- Comment Styles in Live Update Notification ---*/
 	div.cmt-notif-comment {
 		position: relative;
-		width: 80%;
-		margin-left: auto;
-		margin-right: auto;
 	}
 	div.cmt-notif-avatar {
 		position: absolute;
@@ -281,17 +260,4 @@
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		overflow: hidden;
-	}
-	div.cmt-notifi-username,
-	div.cmt-notifi-username a {
-		color: #cccccc;
-	}
-	div.cmt-notifi-actions a {
-		text-decoration: underline;
-		color: #ffffff;
-	}
-	div.cmt-notifi-actions a:hover,
-    div.cmt-notifi-actions a:active {
-    	text-decoration: none;
-		color: #ffffff;
-    }
+	}