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

fix overlay menus

This commit is contained in:
Luke Pulverenti 2016-05-31 22:46:38 -04:00
parent a15cc23c27
commit 6dae843884
6 changed files with 244 additions and 246 deletions

View file

@ -131,6 +131,35 @@ html body .ui-group-theme-a .ui-radio-on:after,
border-color: #3388cc /*{a-active-background-color}*/; 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 { .jqmButtonNoText {
padding: 3px 4px !important; padding: 3px 4px !important;
border-radius: 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; margin-right: .5em;
position: relative; position: relative;
top: -3px; top: -3px;
} }
.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;
}

View file

@ -206,35 +206,6 @@ div[data-role='page'] {
outline: none; 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. * Note: I have omitted any vendor-prefixes for clarity.
* Adding them is left as an exercise for the reader. * Adding them is left as an exercise for the reader.
@ -705,166 +676,6 @@ progress {
text-decoration: underline; 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 { .dashboardFooter {
margin-top: 50px; margin-top: 50px;
text-align: center; 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) { .nativeApp *:not(input):not(select):not(textarea) {
-webkit-user-select: none; -webkit-user-select: none;
-khtml-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 { .imageDropZone {
border: 2px dashed #bbb; border: 2px dashed #bbb;
-moz-border-radius: 5px; -moz-border-radius: 5px;

View file

@ -119,6 +119,7 @@
} }
elem.innerHTML = html; elem.innerHTML = html;
LibraryBrowser.createCardMenus(elem);
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
} }
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -1705,7 +1705,7 @@
} }
var width = screenWidth / innerWidth; var width = screenWidth / innerWidth;
div.remove(); div.parentNode.removeChild(div);
return Math.floor(width); return Math.floor(width);
} }

View file

@ -168,7 +168,7 @@
return html; return html;
} }
function onTrailerButtonClick() { function onTrailerButtonClick(e) {
var id = this.getAttribute('data-itemid'); var id = this.getAttribute('data-itemid');
@ -176,10 +176,12 @@
MediaController.play({ items: trailers }); MediaController.play({ items: trailers });
}); });
e.preventDefault();
e.stopPropagation();
return false; return false;
} }
function onPlayItemButtonClick() { function onPlayItemButtonClick(e) {
var target = this; var target = this;
@ -191,10 +193,12 @@
LibraryBrowser.showPlayMenu(this, id, type, isFolder, mediaType, resumePosition); LibraryBrowser.showPlayMenu(this, id, type, isFolder, mediaType, resumePosition);
e.preventDefault();
e.stopPropagation();
return false; return false;
} }
function onMoreButtonClick() { function onMoreButtonClick(e) {
var card = parentWithClass(this, 'card'); var card = parentWithClass(this, 'card');
@ -202,6 +206,8 @@
showPlayOptions: false showPlayOptions: false
}); });
e.preventDefault();
e.stopPropagation();
return false; return false;
} }
@ -705,7 +711,7 @@
if (listviewMenuButton) { if (listviewMenuButton) {
showContextMenu(listviewMenuButton, {}); showContextMenu(listviewMenuButton, {});
e.stopPropagation();
e.preventDefault(); e.preventDefault();
return false; return false;
} }

View file

@ -111,7 +111,8 @@
preferThumb: true, preferThumb: true,
lazy: true, lazy: true,
showDetailsMenu: true, showDetailsMenu: true,
centerText: true centerText: true,
overlayMoreButton: true
}); });
html += '</div>'; html += '</div>';
@ -120,6 +121,7 @@
} }
elem.innerHTML = html; elem.innerHTML = html;
LibraryBrowser.createCardMenus(elem);
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
} }
return function (view, params, tabContent) { return function (view, params, tabContent) {