diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css b/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css index 83aad99efa..4c9de1a5bc 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css +++ b/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css @@ -35,12 +35,6 @@ margin-right: .25em !important; } -.cardOverlayFab-md-icon { - width: auto !important; - height: auto !important; - font-size: 30px !important; -} - .withHoverMenu { overflow: hidden; } diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css index c871e2bb8e..ac8e626f32 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css +++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css @@ -16,16 +16,18 @@ button.listItem { display: block; align-items: center; text-align: left; - padding: .25em .25em .25em .25em !important; - line-height: 170%; + padding: .25em 1.15em; + line-height: 160%; border-bottom: 1px solid #2a2a2a; -} - -div.listItem { cursor: pointer; } -.listItem.largeImage { +.listItem-nosidepadding { + padding-left: 0; + padding-right: 0; +} + +.listItem-largeImage { padding: .5em !important; } @@ -57,27 +59,16 @@ div.listItem { min-height: 48px; } - .listItemBody.two-line { - min-height: 72px; - padding-top: 0; - padding-bottom: 0; - } +.two-line { + min-height: 72px; + padding-top: 0; + padding-bottom: 0; +} - .listItemBody.three-line { - min-height: 88px; - padding-top: 0; - padding-bottom: 0; - } - - .listItemBody h2, .listItemBody h3 { - margin: 0; - padding: 0; - overflow: hidden; - text-overflow: ellipsis; - } - -.layout-tv .listItemBody h3 { - padding: 0; +.three-line { + min-height: 88px; + padding-top: 0; + padding-bottom: 0; } .listItemBody > div:not(.secondary) { @@ -85,10 +76,16 @@ div.listItem { } .listItemBodyText { + margin: 0; + padding: 0; overflow: hidden; text-overflow: ellipsis; } +.listItemBodyText-nowrap { + white-space: nowrap; +} + .listItemImage { width: 7.4vh; height: 7.4vh; @@ -101,6 +98,14 @@ div.listItem { position: relative; } +.listItemImage-large { + width: 45vh; + height: 30vh; + background-position: center center; + margin-right: 2%; + margin-left: 1%; +} + .listItemIcon { width: auto !important; height: auto !important; @@ -112,14 +117,6 @@ div.listItem { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); } -.listItem.largeImage .listItemImage { - width: 45vh; - height: 30vh; - background-position: center center; - margin-right: 2%; - margin-left: 1%; -} - .listItemImage .itemProgressBar { position: absolute; bottom: 0; @@ -128,7 +125,7 @@ div.listItem { } .listItem .secondary { - color: #737373; + color: #888; } .listItem:focus .secondary { @@ -143,14 +140,6 @@ div.listItem { transform: scale(1.025, 1.025); } -.listItem > .fab:first-child, .listItem > i:first-child { - margin-left: .3em; -} - -.paperList .listItem > .fab:first-child, .paperList .listItem > i:first-child { - margin-left: .65em; -} - .paperList { padding: .5em 0; margin: 1em auto; @@ -166,25 +155,23 @@ div.listItem { border-bottom: 0; } -.listItemMediaInfo { - align-items: center; -} - .layout-tv .listItemMediaInfo { margin: .5em 0; } -.listItemMediaInfo > * { - display: inline-block; +.listItemMediaInfo { + /* Don't display if flex not supported */ + display: none; + align-items: center; } .listGroupHeader { margin: 2em 0 1em; } - .listGroupHeader.first { - margin-top: 0; - } +.listGroupHeader-first { + margin-top: 0; +} .listItem .indicators { right: .5vh; @@ -196,10 +183,6 @@ div.listItem { @supports (display: flex) { - .listItem > * { - display: flex; - } - .listItem, .listItemBody, .listItemMediaInfo { display: flex; } diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js index 0c4880e01d..c4f6eef527 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js +++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js @@ -113,12 +113,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan if (i === 0) { if (isLargeStyle) { - html += '

'; + html += '

'; } else { - html += '
'; + html += '
'; } } else { - html += '
'; + html += '
'; } html += (textlines[i] || ' '); if (i === 0 && isLargeStyle) { @@ -164,7 +164,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } if (i == 0) { - html += '

'; + html += '

'; } else { html += '

'; @@ -178,7 +178,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } } - var cssClass = "listItem"; + var cssClass = "listItem listItem-nosidepadding"; if (clickEntireItem) { cssClass += ' itemAction'; @@ -187,7 +187,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan var downloadWidth = 80; if (isLargeStyle) { - cssClass += " largeImage"; + cssClass += " listItem-largeImage"; downloadWidth = 500; } @@ -208,10 +208,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan var imgUrl = getImageUrl(item, downloadWidth); + var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage'; + if (imgUrl) { - html += '
'; + html += '
'; } else { - html += '
'; + html += '
'; } var indicatorsHtml = ''; @@ -277,11 +279,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan html += getTextLinesHtml(textlines, isLargeStyle); if (!enableSideMediaInfo) { - html += '
' + mediaInfo.getPrimaryMediaInfoHtml(item) + '
'; + html += '
' + mediaInfo.getPrimaryMediaInfoHtml(item) + '
'; } if (enableOverview && item.Overview) { - html += '
'; + html += '
'; html += item.Overview; html += '
'; } diff --git a/dashboard-ui/css/dashboard.css b/dashboard-ui/css/dashboard.css index 283f5339d1..7878b7aace 100644 --- a/dashboard-ui/css/dashboard.css +++ b/dashboard-ui/css/dashboard.css @@ -160,12 +160,6 @@ paper-input + .fieldDescription { } } -/* Swatches */ - -paper-fab.blue { - background: #03a9f4; -} - paper-checkbox #checkboxContainer { width: 22px !important; height: 22px !important; @@ -196,48 +190,6 @@ paper-input label, paper-textarea label { margin-bottom: .5em; } -paper-fab { - vertical-align: middle; - display: inline-flex !important; -} - - paper-fab.mini { - width: 22px; - height: 22px; - } - - paper-fab.mini iron-icon { - width: 22px; - height: 22px; - } - -.ui-body-a paper-fab.subdued { - background: #fff; - color: #000; -} - - .ui-body-a paper-fab.subdued paper-material.keyboard-focus { - background: #686868 !important; - } - -paper-fab.white { - background: #fff; - color: #000; -} - - paper-fab.white paper-material.keyboard-focus { - background: #01579b !important; - color: #fff; - } - -paper-fab.square { - border-radius: 5px; -} - -paper-fab.accent { - background-color: #52B54B; -} - paper-textarea.mono textarea { font-family: monospace !important; } @@ -724,18 +676,6 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB outline: none !important; } - .scheduledTaskPaperIconItem[data-status='Idle'] paper-fab { - background-color: #999; - } - - .scheduledTaskPaperIconItem[data-status="Cancelling"] paper-fab { - background-color: #cc3333; - } - - .scheduledTaskPaperIconItem[data-status="Running"] paper-fab { - background-color: #52B54B; - } - .scheduledTaskPaperIconItem #progressContainer { height: 8px !important; border-radius: 5px; diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 6059569ed9..322123ee6f 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -253,13 +253,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons { margin-left: 1.25em; } -.userDataIcons paper-fab { - background: #444; - width: 40px; - height: 40px; - padding: 8px; -} - .itemBackdrop { background-size: cover; background-position: center 15%; diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 88e20f37ec..3d09ff4654 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -16,6 +16,7 @@ .emby-button iron-icon + span { margin-left: .5em; } + .paper-icon-button-light > iron-icon { width: 100%; height: 100%; @@ -114,7 +115,7 @@ h2 { } h3 { - font-weight: 500; + font-weight: 400; } a, a:active, a:hover { @@ -686,3 +687,7 @@ progress { .ui-body-a .cardFooter .cardText + .cardText { opacity: .8; } + +.ui-body-a .listItem .secondary { + color: #737373; +} diff --git a/dashboard-ui/encodingsettings.html b/dashboard-ui/encodingsettings.html index 057017446f..c5c777b0b4 100644 --- a/dashboard-ui/encodingsettings.html +++ b/dashboard-ui/encodingsettings.html @@ -29,7 +29,7 @@
${LabelTranscodingThreadCountHelp}
-
+

-
+


-
+
-
+

'; - itemHtml += '
'; + itemHtml += '
'; itemHtml += humane_date(notification.Date); itemHtml += '
'; if (notification.Description) { - itemHtml += '
'; + itemHtml += '
'; itemHtml += notification.Description; itemHtml += '
'; } - itemHtml += ''; + itemHtml += '
'; - itemHtml += ''; + itemHtml += '
'; if (notification.Url) { itemHtml += '
'; diff --git a/dashboard-ui/scripts/notificationsettings.js b/dashboard-ui/scripts/notificationsettings.js index 3b38d407af..34ad7eabab 100644 --- a/dashboard-ui/scripts/notificationsettings.js +++ b/dashboard-ui/scripts/notificationsettings.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'listViewStyle'], function ($) { function reload(page) { @@ -29,23 +29,23 @@ } itemHtml += ''; - itemHtml += ''; + itemHtml += '
'; if (i.Enabled) { - itemHtml += ''; + itemHtml += 'notifications_active'; } else { - itemHtml += ''; + itemHtml += 'notifications_off'; } - itemHtml += ''; - itemHtml += '
' + i.Name + '
'; + itemHtml += '
'; + itemHtml += '
' + i.Name + '
'; - itemHtml += ''; + itemHtml += '
'; - itemHtml += ''; + itemHtml += ''; - itemHtml += ''; + itemHtml += '
'; itemHtml += '
'; return itemHtml; @@ -80,9 +80,7 @@ LibraryMenu.setTabs('notifications', 0, getTabs); - require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { - reload(view); - }); + reload(view); }); }; }); \ No newline at end of file diff --git a/dashboard-ui/scripts/scheduledtaskpage.js b/dashboard-ui/scripts/scheduledtaskpage.js index 9288e92a78..36e4cd75a9 100644 --- a/dashboard-ui/scripts/scheduledtaskpage.js +++ b/dashboard-ui/scripts/scheduledtaskpage.js @@ -24,7 +24,7 @@ var ScheduledTaskPage = { $('#pTaskDescription', page).html(task.Description); - require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { + require(['listViewStyle'], function () { ScheduledTaskPage.loadTaskTriggers(page, task); }); @@ -41,16 +41,16 @@ var ScheduledTaskPage = { var trigger = task.Triggers[i]; - html += ''; + html += '
'; - html += ''; + html += 'schedule'; - html += ''; + html += '
'; - html += "
" + ScheduledTaskPage.getTriggerFriendlyName(trigger) + "
"; + html += "
" + ScheduledTaskPage.getTriggerFriendlyName(trigger) + "
"; if (trigger.MaxRuntimeMs) { - html += '
'; + html += '
'; var hours = trigger.MaxRuntimeMs / 3600000; @@ -62,11 +62,11 @@ var ScheduledTaskPage = { html += '
'; } - html += ''; + html += '
'; - html += ''; + html += ''; - html += ''; + html += '
'; } html += '
'; diff --git a/dashboard-ui/scripts/scheduledtaskspage.js b/dashboard-ui/scripts/scheduledtaskspage.js index c0663a5b37..c9ae8b1562 100644 --- a/dashboard-ui/scripts/scheduledtaskspage.js +++ b/dashboard-ui/scripts/scheduledtaskspage.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'listViewStyle', 'paper-progress'], function ($) { function reloadList(page) { @@ -50,37 +50,37 @@ html += '
'; } - html += ''; + html += '
'; - html += ""; - html += ''; + html += ""; + html += 'schedule'; html += ""; - html += ''; + html += ''; if (task.State == "Idle") { - html += ''; + html += ''; } else if (task.State == "Running") { - html += ''; + html += ''; } else { - html += ''; + html += ''; } - html += ''; + html += '
'; } if (tasks.length) { @@ -186,7 +186,7 @@ elem.classList.add('btnStartTask'); elem.classList.remove('btnStopTask'); elem.classList.remove('hide'); - elem.querySelector('iron-icon').icon = 'play-arrow'; + elem.querySelector('i').innerHTML = 'play_arrow'; elem.title = Globalize.translate('ButtonStart'); } else if (state == "Running") { @@ -194,7 +194,7 @@ elem.classList.remove('btnStartTask'); elem.classList.add('btnStopTask'); elem.classList.remove('hide'); - elem.querySelector('iron-icon').icon = 'stop'; + elem.querySelector('i').innerHTML = 'stop'; elem.title = Globalize.translate('ButtonStop'); } else { @@ -202,11 +202,11 @@ elem.classList.add('btnStartTask'); elem.classList.remove('btnStopTask'); elem.classList.add('hide'); - elem.querySelector('iron-icon').icon = 'play-arrow'; + elem.querySelector('i').innerHTML = 'play_arrow'; elem.title = Globalize.translate('ButtonStart'); } - var item = $(elem).parents('paper-icon-item')[0]; + var item = $(elem).parents('.listItem')[0]; item.setAttribute('data-status', state); } @@ -280,9 +280,7 @@ startInterval(); - require(['paper-fab', 'paper-progress', 'paper-item-body', 'paper-icon-item'], function () { - reloadList(page); - }); + reloadList(page); Events.on(ApiClient, "websocketmessage", onWebSocketMessage); Events.on(ApiClient, "websocketopen", onWebSocketConnectionOpen); diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css index 32c3734f8a..b97fb5cc0e 100644 --- a/dashboard-ui/thirdparty/paper-button-style.css +++ b/dashboard-ui/thirdparty/paper-button-style.css @@ -209,8 +209,4 @@ div.dialogHeader { .formDialog.background-theme-b { background-color: #181818; -} - -.ui-body-b .listItem .secondary { - color: #aaa; -} +} \ No newline at end of file diff --git a/dashboard-ui/userpassword.html b/dashboard-ui/userpassword.html index 23d8fc88a2..4fb17eff59 100644 --- a/dashboard-ui/userpassword.html +++ b/dashboard-ui/userpassword.html @@ -48,7 +48,7 @@

-
+