mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

notification style fixes

Browse source
This commit is contained in:
Luke Pulverenti 2013-07-06 19:08:10 -04:00
parent cfb3392c35
commit fcf672f54d
2 changed files with 62 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

82
dashboard-ui/css/notifications.css
View file

@ -51,20 +51,23 @@
color: #fff!important; color: #fff!important;
} }
.notificationsFlyout {
width: 300px;
}
.flyoutNotification { .flyoutNotification {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
background: #f8f8f8; background: #f8f8f8;
color: #555; color: #555;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.flyoutNotification p { .flyoutNotification p {
margin: .7em 0; margin: .5em 0;
} }
.notificationsFlyout {
width: 300px;
}
.notificationName { .notificationName {
font-weight: bold; font-weight: bold;
color: #555; color: #555;
@ -83,8 +86,8 @@
} }
.imgNotification, .imgNotificationInner { .imgNotification, .imgNotificationInner {
width: 60px; width: 40px;
height: 60px; height: 40px;
} }
.imgNotificationInner { .imgNotificationInner {
@ -108,9 +111,9 @@
background-image: linear-gradient(top,#4d90fe,#4787ed); background-image: linear-gradient(top,#4d90fe,#4787ed);
} }
.imgNotificationNormal .imgNotificationInner { .imgNotificationNormal .imgNotificationInner {
background-image: url(images/notifications/info.png); background-image: url(images/notifications/info.png);
} }
.imgNotificationError { .imgNotificationError {
background-color: #d14836; background-color: #d14836;
@ -122,21 +125,61 @@
background-image: linear-gradient(top,#dd4b39,#d14836); background-image: linear-gradient(top,#dd4b39,#d14836);
} }
.imgNotificationError .imgNotificationInner { .imgNotificationError .imgNotificationInner {
background-image: url(images/notifications/error.png); background-image: url(images/notifications/error.png);
} }
.imgNotificationWarning { .imgNotificationWarning {
background-color: #FF7537; background-color: #FF7537;
} }
.imgNotificationWarning .imgNotificationInner { .imgNotificationWarning .imgNotificationInner {
background-image: url(images/notifications/error.png); 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) { @media all and (min-width: 500px) {
.notificationsFlyout { .notificationsFlyout {
width: 400px; width: 450px;
}
.imgNotification, .imgNotificationInner {
width: 60px;
height: 60px;
} }
} }
@ -144,17 +187,4 @@
.notificationsFlyout { .notificationsFlyout {
width: 500px; width: 500px;
} }
.notificationImage {
display: inline-block;
vertical-align: top;
margin: 0 1em;
padding: .7em 0;
}
.notificationContent {
display: inline-block;
vertical-align: top;
}
} }

5
dashboard-ui/scripts/notifications.js
View file

@ -26,7 +26,7 @@
var context = this; 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>'; 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 += '<h3 style="margin: .5em 0;">Notifications</h3>';
html += '</div>'; 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...'; html += '<p class="notificationsFlyoutlist">Loading...';
@ -140,6 +140,7 @@
} }
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
return html; return html;