diff --git a/dashboard-ui/css/dashboard.css b/dashboard-ui/css/dashboard.css index 168e705840..5b2df66dca 100644 --- a/dashboard-ui/css/dashboard.css +++ b/dashboard-ui/css/dashboard.css @@ -131,6 +131,35 @@ html body .ui-group-theme-a .ui-radio-on:after, border-color: #3388cc /*{a-active-background-color}*/; } +div[data-role="controlgroup"] a[data-role='button'] { + display: inline-block !important; + margin: 0 !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + border-radius: 0; +} + + div[data-role="controlgroup"] a[data-role='button']:first-child { + border-bottom-left-radius: .3125em; + border-top-left-radius: .3125em; + } + + div[data-role="controlgroup"] a[data-role='button']:last-child { + border-bottom-right-radius: .3125em; + border-top-right-radius: .3125em; + } + + div[data-role="controlgroup"] a[data-role='button'] + a[data-role='button'] { + border-left-width: 0 !important; + margin: 0 0 0 -3px !important; + } + +div[data-role="controlgroup"] a.ui-btn-active { + background: #38c !important; + color: #fff !important; +} + .jqmButtonNoText { padding: 3px 4px !important; border-radius: 4px !important; @@ -419,4 +448,203 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB margin-right: .5em; position: relative; top: -3px; -} \ No newline at end of file +} + +.scheduledTaskPaperIconItem { + 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; + } + + .scheduledTaskPaperIconItem #primaryProgress { + border-bottom-left-radius: 5px; + border-top-left-radius: 5px; + } + + .scheduledTaskPaperIconItem paper-progress { + display: inline-block; + } + +.activeSession { + width: 50%; +} + + .activeSession .cardPadder { + padding-bottom: 56.25%; + } + + +.sessionNowPlayingContent { + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.sessionNowPlayingInnerContent { + background-color: rgba(0, 0, 0, .6); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + color: #fff; + font-weight: 400; +} + +.sessionAppInfo { + padding: .5em; + overflow: hidden; +} + +.sessionAppName { + vertical-align: top; + max-width: 200px; +} + +.sessionNowPlayingInfo { + position: absolute; + left: 0; + bottom: 11px; + padding: .5em; + max-width: 150px; + overflow: hidden; + text-overflow: ellipsis; +} + +.sessionAppInfo img { + max-width: 32px; + max-height: 32px; + margin-right: 5px; +} + +.activeSession .playbackProgress { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 7px; + width: 100%; + opacity: .95; + z-index: 999; +} + +.activeDevicesCollapsible .ui-collapsible-content { + padding: .25em !important; +} + +.activeSession:not(.playingSession) .sessionNowPlayingContent { + display: none; +} + +.activeSession:not(.playingSession) .sessionNowPlayingInnerContent { + background-color: #fff; + color: #000; +} + +.activeSession:not(.playingSession) .sessionNowPlayingInfo { + bottom: 0; +} + +.sessionNowPlayingTime { + color: #fff; + position: absolute; + right: 10px; + bottom: 39px; +} + +.sessionTranscodingFramerate { + position: absolute; + left: 10px; + bottom: 19px; + color: #fff; +} + +.sessionNowPlayingStreamInfo { + color: #fff; + position: absolute; + right: 10px; + bottom: 19px; +} + +.activeSession .transcodingProgress { + right: 0; + bottom: 0; + left: 0; + height: 5px; + width: 100%; + opacity: .9; + z-index: 999; + position: absolute; +} + +.transcodingSession .playbackProgress { + bottom: 5px; +} + +/* Firefox */ +.transcodingProgress::-moz-progress-bar { + border-radius: 5px; + background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; +} + +/* Chrome */ +.transcodingProgress::-webkit-progress-value { + border-radius: 5px; + background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) ) !important; + background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; +} + +/* Polyfill */ +.transcodingProgress[aria-valuenow]:before { + border-radius: 5px; + background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; + background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; + background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; +} + +@media all and (max-width: 550px) { + + .sessionAppName { + max-width: 160px; + } +} + +@media all and (max-width: 500px) { + + .sessionAppName { + max-width: 150px; + } + + .activeSession { + width: 100%; + } +} + +.disabledUser { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); +} + +.disabledUserBanner { + margin: 0 0 2em; +} diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 672033f56a..ed21de3020 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -206,35 +206,6 @@ div[data-role='page'] { outline: none; } -div[data-role="controlgroup"] a[data-role='button'] { - display: inline-block !important; - margin: 0 !important; - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; - box-shadow: none !important; - border-radius: 0; -} - - div[data-role="controlgroup"] a[data-role='button']:first-child { - border-bottom-left-radius: .3125em; - border-top-left-radius: .3125em; - } - - div[data-role="controlgroup"] a[data-role='button']:last-child { - border-bottom-right-radius: .3125em; - border-top-right-radius: .3125em; - } - - div[data-role="controlgroup"] a[data-role='button'] + a[data-role='button'] { - border-left-width: 0 !important; - margin: 0 0 0 -3px !important; - } - -div[data-role="controlgroup"] a.ui-btn-active { - background: #38c !important; - color: #fff !important; -} - /** * Note: I have omitted any vendor-prefixes for clarity. * Adding them is left as an exercise for the reader. @@ -705,166 +676,6 @@ progress { text-decoration: underline; } -.activeSession { - width: 50%; -} - - .activeSession .cardPadder { - padding-bottom: 56.25%; - } - - -.sessionNowPlayingContent { - background-size: cover; - background-repeat: no-repeat; - background-position: center center; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.sessionNowPlayingInnerContent { - background-color: rgba(0, 0, 0, .6); - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - color: #fff; - font-weight: 400; -} - -.sessionAppInfo { - padding: .5em; - overflow: hidden; -} - -.sessionAppName { - vertical-align: top; - max-width: 200px; -} - -.sessionNowPlayingInfo { - position: absolute; - left: 0; - bottom: 11px; - padding: .5em; - max-width: 150px; - overflow: hidden; - text-overflow: ellipsis; -} - -.sessionAppInfo img { - max-width: 32px; - max-height: 32px; - margin-right: 5px; -} - -.activeSession .playbackProgress { - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 7px; - width: 100%; - opacity: .95; - z-index: 999; -} - -.activeDevicesCollapsible .ui-collapsible-content { - padding: .25em !important; -} - -.activeSession:not(.playingSession) .sessionNowPlayingContent { - display: none; -} - -.activeSession:not(.playingSession) .sessionNowPlayingInnerContent { - background-color: #fff; - color: #000; -} - -.activeSession:not(.playingSession) .sessionNowPlayingInfo { - bottom: 0; -} - -.sessionNowPlayingTime { - color: #fff; - position: absolute; - right: 10px; - bottom: 39px; -} - -.sessionTranscodingFramerate { - position: absolute; - left: 10px; - bottom: 19px; - color: #fff; -} - -.sessionNowPlayingStreamInfo { - color: #fff; - position: absolute; - right: 10px; - bottom: 19px; -} - -.activeSession .transcodingProgress { - right: 0; - bottom: 0; - left: 0; - height: 5px; - width: 100%; - opacity: .9; - z-index: 999; - position: absolute; -} - -.transcodingSession .playbackProgress { - bottom: 5px; -} - -/* Firefox */ -.transcodingProgress::-moz-progress-bar { - border-radius: 5px; - background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; -} - -/* Chrome */ -.transcodingProgress::-webkit-progress-value { - border-radius: 5px; - background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) ) !important; - background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; -} - -/* Polyfill */ -.transcodingProgress[aria-valuenow]:before { - border-radius: 5px; - background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; - background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; - background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important; -} - -@media all and (max-width: 550px) { - - .sessionAppName { - max-width: 160px; - } -} - -@media all and (max-width: 500px) { - - .sessionAppName { - max-width: 150px; - } - - .activeSession { - width: 100%; - } -} - .dashboardFooter { margin-top: 50px; text-align: center; @@ -902,26 +713,6 @@ progress { } } -.disabledUser { - -webkit-filter: grayscale(100%); - filter: grayscale(100%); -} - -.disabledUserBanner { - margin: 0 0 2em; -} - -.modalLoading { - position: fixed; - top: 0; - right: 0; - left: 0; - bottom: 0; - background: rgba(0, 0, 0, .3); - /* One less than jqm loading spinner, so we can combine them */ - z-index: 9999998; -} - .nativeApp *:not(input):not(select):not(textarea) { -webkit-user-select: none; -khtml-user-select: none; @@ -961,36 +752,6 @@ progress { } } -.scheduledTaskPaperIconItem { - 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; - } - - .scheduledTaskPaperIconItem #primaryProgress { - border-bottom-left-radius: 5px; - border-top-left-radius: 5px; - } - - .scheduledTaskPaperIconItem paper-progress { - display: inline-block; - } - .imageDropZone { border: 2px dashed #bbb; -moz-border-radius: 5px; diff --git a/dashboard-ui/scripts/homeupcoming.js b/dashboard-ui/scripts/homeupcoming.js index 77c2b4deb9..aac1f69098 100644 --- a/dashboard-ui/scripts/homeupcoming.js +++ b/dashboard-ui/scripts/homeupcoming.js @@ -119,6 +119,7 @@ } elem.innerHTML = html; + LibraryBrowser.createCardMenus(elem); ImageLoader.lazyChildren(elem); } return function (view, params, tabContent) { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index e1340a6c72..7beb31669e 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -1705,7 +1705,7 @@ } var width = screenWidth / innerWidth; - div.remove(); + div.parentNode.removeChild(div); return Math.floor(width); } diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index df99c19e50..4501d242a7 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/dashboard-ui/scripts/librarylist.js @@ -168,7 +168,7 @@ return html; } - function onTrailerButtonClick() { + function onTrailerButtonClick(e) { var id = this.getAttribute('data-itemid'); @@ -176,10 +176,12 @@ MediaController.play({ items: trailers }); }); + e.preventDefault(); + e.stopPropagation(); return false; } - function onPlayItemButtonClick() { + function onPlayItemButtonClick(e) { var target = this; @@ -191,10 +193,12 @@ LibraryBrowser.showPlayMenu(this, id, type, isFolder, mediaType, resumePosition); + e.preventDefault(); + e.stopPropagation(); return false; } - function onMoreButtonClick() { + function onMoreButtonClick(e) { var card = parentWithClass(this, 'card'); @@ -202,6 +206,8 @@ showPlayOptions: false }); + e.preventDefault(); + e.stopPropagation(); return false; } @@ -705,7 +711,7 @@ if (listviewMenuButton) { showContextMenu(listviewMenuButton, {}); - + e.stopPropagation(); e.preventDefault(); return false; } diff --git a/dashboard-ui/scripts/tvupcoming.js b/dashboard-ui/scripts/tvupcoming.js index e4807055e6..2dfa929de1 100644 --- a/dashboard-ui/scripts/tvupcoming.js +++ b/dashboard-ui/scripts/tvupcoming.js @@ -111,7 +111,8 @@ preferThumb: true, lazy: true, showDetailsMenu: true, - centerText: true + centerText: true, + overlayMoreButton: true }); html += ''; @@ -120,6 +121,7 @@ } elem.innerHTML = html; + LibraryBrowser.createCardMenus(elem); ImageLoader.lazyChildren(elem); } return function (view, params, tabContent) {