From fcf672f54d6b278bea9a027669b9a17da7606624 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 6 Jul 2013 19:08:10 -0400
Subject: [PATCH] notification style fixes

---
 dashboard-ui/css/notifications.css    | 88 ++++++++++++++++++---------
 dashboard-ui/scripts/notifications.js |  5 +-
 2 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/dashboard-ui/css/notifications.css b/dashboard-ui/css/notifications.css
index 5a361994bf..fb987c9db7 100644
--- a/dashboard-ui/css/notifications.css
+++ b/dashboard-ui/css/notifications.css
@@ -51,20 +51,23 @@
     color: #fff!important;
 }
 
+.notificationsFlyout {
+    width: 300px;
+}
+
 .flyoutNotification {
     border-top: 1px solid #ccc;
     background: #f8f8f8;
     color: #555;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
     .flyoutNotification p {
-        margin: .7em 0;
+        margin: .5em 0;
     }
 
-.notificationsFlyout {
-    width: 300px;
-}
-
 .notificationName {
     font-weight: bold;
     color: #555;
@@ -83,8 +86,8 @@
 }
 
 .imgNotification, .imgNotificationInner {
-    width: 60px;
-    height: 60px;
+    width: 40px;
+    height: 40px;
 }
 
 .imgNotificationInner {
@@ -108,9 +111,9 @@
     background-image: linear-gradient(top,#4d90fe,#4787ed);
 }
 
-.imgNotificationNormal .imgNotificationInner {
-    background-image: url(images/notifications/info.png);
-}
+    .imgNotificationNormal .imgNotificationInner {
+        background-image: url(images/notifications/info.png);
+    }
 
 .imgNotificationError {
     background-color: #d14836;
@@ -122,21 +125,61 @@
     background-image: linear-gradient(top,#dd4b39,#d14836);
 }
 
-.imgNotificationError .imgNotificationInner {
-    background-image: url(images/notifications/error.png);
-}
+    .imgNotificationError .imgNotificationInner {
+        background-image: url(images/notifications/error.png);
+    }
 
 .imgNotificationWarning {
     background-color: #FF7537;
 }
 
-.imgNotificationWarning .imgNotificationInner {
-    background-image: url(images/notifications/error.png);
+    .imgNotificationWarning .imgNotificationInner {
+        background-image: url(images/notifications/error.png);
+    }
+
+.notificationContent {
+    padding: 0 .5em;
+}
+
+@media all and (min-width: 350px) {
+    .notificationsFlyout {
+        width: 320px;
+    }
+}
+
+@media all and (min-width: 400px) {
+    .notificationsFlyout {
+        width: 370px;
+    }
+}
+
+@media all and (min-width: 450px) {
+    .notificationsFlyout {
+        width: 400px;
+    }
+
+    .notificationImage {
+        margin: 0 .5em 0 1em;
+        padding: .5em 0;
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .notificationContent {
+        display: inline-block;
+        vertical-align: top;
+        overflow: hidden;
+    }
 }
 
 @media all and (min-width: 500px) {
     .notificationsFlyout {
-        width: 400px;
+        width: 450px;
+    }
+
+    .imgNotification, .imgNotificationInner {
+        width: 60px;
+        height: 60px;
     }
 }
 
@@ -144,17 +187,4 @@
     .notificationsFlyout {
         width: 500px;
     }
-
-
-    .notificationImage {
-        display: inline-block;
-        vertical-align: top;
-        margin: 0 1em;
-        padding: .7em 0;
-    }
-
-    .notificationContent {
-        display: inline-block;
-        vertical-align: top;
-    }
 }
diff --git a/dashboard-ui/scripts/notifications.js b/dashboard-ui/scripts/notifications.js
index 31ccb80240..f00c4b0a1f 100644
--- a/dashboard-ui/scripts/notifications.js
+++ b/dashboard-ui/scripts/notifications.js
@@ -26,7 +26,7 @@
 
         var context = this;
 
-        var html = '<div data-role="popup" class="notificationsFlyout" style="min-width:200px;margin-top:30px;margin-right:20px;" class="ui-corner-all">';
+        var html = '<div data-role="popup" class="notificationsFlyout" style="min-width:250px;margin-top:30px;margin-right:20px;background: #f8f8f8;">';
 
         html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
 
@@ -34,7 +34,7 @@
         html += '<h3 style="margin: .5em 0;">Notifications</h3>';
         html += '</div>';
 
-        html += '<div data-role="content" class="ui-corner-bottom ui-content" style="padding: 0;background: #f8f8f8;">';
+        html += '<div data-role="content" class="ui-corner-bottom ui-content" style="padding: 0;">';
 
         html += '<p class="notificationsFlyoutlist">Loading...';
 
@@ -140,6 +140,7 @@
         }
 
         html += '</div>';
+
         html += '</div>';
 
         return html;