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:
parent
cfb3392c35
commit
fcf672f54d
2 changed files with 62 additions and 31 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue