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

notification style fixes

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

View file

@ -51,18 +51,21 @@
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;
}
.notificationsFlyout {
width: 300px;
margin: .5em 0;
}
.notificationName {
@ -83,8 +86,8 @@
}
.imgNotification, .imgNotificationInner {
width: 60px;
height: 60px;
width: 40px;
height: 40px;
}
.imgNotificationInner {
@ -134,27 +137,54 @@
background-image: url(images/notifications/error.png);
}
@media all and (min-width: 500px) {
.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: 450px;
}
.imgNotification, .imgNotificationInner {
width: 60px;
height: 60px;
}
}
@media all and (min-width: 600px) {
.notificationsFlyout {
width: 500px;
}
.notificationImage {
display: inline-block;
vertical-align: top;
margin: 0 1em;
padding: .7em 0;
}
.notificationContent {
display: inline-block;
vertical-align: top;
}
}

View file

@ -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;