cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #430 from dkanada/device

Browse Source 
Fix layout issues for device cards on dashboard
This commit is contained in:
Anthony Lavado 2019-09-02 03:17:27 -04:00 committed by GitHub
commit df2ae88a72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/indicators/indicators.js
View File

@ -221,6 +221,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
});
return {
getProgressHtml: getProgressHtml,
getProgressBarHtml: getProgressBarHtml,
getPlayedIndicatorHtml: getPlayedIndicator,
getChildCountIndicatorHtml: getChildCountIndicatorHtml,

26
src/controllers/dashboardpage.js
View File

@ -1,4 +1,4 @@
define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globalize", "loading", "connectionManager", "playMethodHelper", "cardBuilder", "imageLoader", "components/activitylog", "scripts/imagehelper", "humanedate", "listViewStyle", "emby-button", "flexStyles", "emby-button", "emby-itemscontainer"], function (datetime, events, itemHelper, serverNotifications, dom, globalize, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper) {
define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globalize", "loading", "connectionManager", "playMethodHelper", "cardBuilder", "imageLoader", "components/activitylog", "scripts/imagehelper", "indicators", "humanedate", "listViewStyle", "emby-button", "flexStyles", "emby-button", "emby-itemscontainer"], function (datetime, events, itemHelper, serverNotifications, dom, globalize, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper, indicators) {
"use strict";
function buttonEnabled(elem, enabled) {
@ -249,20 +249,19 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<div class="cardContent">';
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
if (imgUrl) {
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
html += ' data-src="' + imgUrl + '" style="display:inline-block;background-image:url(\'' + imgUrl + "');\"";
html += ' data-src="' + imgUrl + '" style="display:inline-block;background-image:url(\'' + imgUrl + "');\"></div>";
} else {
html += '<div class="sessionNowPlayingContent"';
html += '<div class="sessionNowPlayingContent"></div>';
}
html += "></div>";
html += '<div class="sessionNowPlayingInnerContent">';
html += '<div class="sessionAppInfo">';
var clientImage = DashboardPage.getClientImage(session);
var clientImage = DashboardPage.getClientImage(session);
if (clientImage) {
html += clientImage;
}
@ -272,7 +271,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
html += '<div class="sessionAppSecondaryText">' + DashboardPage.getAppSecondaryText(session) + "</div>";
html += "</div>";
html += "</div>";
html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + "</div>";
if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
html += '<div class="sessionTranscodingFramerate">' + session.TranscodingInfo.Framerate + " fps</div>";
@ -280,20 +278,22 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
html += '<div class="sessionTranscodingFramerate"></div>';
}
html += '<div class="sessionNowPlayingDetails">'
var nowPlayingName = DashboardPage.getNowPlayingName(session);
html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
html += nowPlayingName.html;
html += "</div>";
html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + "</div>";
html += '</div>'
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
html += '<progress class="playbackProgress" min="0" max="100" value="' + 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks + '"></progress>';
} else {
html += '<progress class="playbackProgress hide" min="0" max="100"></progress>';
var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
html += indicators.getProgressHtml(percent, { containerClass: "playbackProgress" });
}
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
html += '<progress class="transcodingProgress" min="0" max="100" value="' + session.TranscodingInfo.CompletionPercentage.toFixed(1) + '"></progress>';
} else {
html += '<progress class="transcodingProgress hide" min="0" max="100"></progress>';
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
html += indicators.getProgressHtml(percent, { containerClass: "transcodingProgress" });
}
html += "</div>";

110
src/css/dashboard.css
View File

@ -272,10 +272,9 @@ div[data-role=controlgroup] a.ui-btn-active {
position: relative
}
.sessionAppInfo,
.sessionNowPlayingInfo {
padding: .5em;
overflow: hidden
.sessionAppInfo {
padding: 0.5em;
overflow: hidden;
}
.sessionCardButtons {
@ -317,105 +316,60 @@ div[data-role=controlgroup] a.ui-btn-active {
max-width: 200px
}
.sessionNowPlayingInfo {
.sessionNowPlayingDetails {
display: flex;
position: absolute;
left: 0;
bottom: 11px;
max-width: 50%;
-o-text-overflow: ellipsis;
text-overflow: ellipsis
bottom: 0px;
width: 100%;
}
.sessionNowPlayingInfo {
flex-grow: 1;
text-overflow: ellipsis;
padding: 0.8em 0.5em;
}
.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
}
.activeSession:not(.playingSession) .sessionNowPlayingInfo {
bottom: 0
max-width: 40px;
max-height: 40px;
margin-right: 8px;
}
.sessionNowPlayingTime {
position: absolute;
right: 10px;
bottom: 19px
flex-shrink: 0;
align-self: flex-end;
text-overflow: ellipsis;
padding: 0.8em 0.5em;
}
.sessionNowPlayingStreamInfo {
white-space: nowrap
white-space: nowrap;
}
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 5px;
height: 6px;
width: 100%;
opacity: .9;
position: absolute
}
.playbackProgress,
.transcodingProgress {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
margin: 0 5px 0 0;
height: 14px;
border: 0 solid #222;
-webkit-border-radius: 0;
border-radius: 0;
width: 50px;
background: #000 !important
margin: 0px;
width: 100%;
background: transparent !important;
}
.playbackProgress::-webkit-progress-bar,
.transcodingProgress::-webkit-progress-bar {
background: #000
.playbackProgress > div {
z-index: 1000;
background-color: #00a4dc;
}
.transcodingSession .playbackProgress {
bottom: 5px
}
.transcodingProgress::-moz-progress-bar {
border-radius: .3em;
background-color: #dd4919
}
.transcodingProgress::-webkit-progress-value {
-webkit-border-radius: .3em;
border-radius: .3em;
background-color: #dd4919
}
.transcodingProgress[aria-valuenow]:before {
-webkit-border-radius: .3em;
border-radius: .3em;
background-color: #dd4919
}
.playbackProgress::-moz-progress-bar {
background-color: #00a4dc
}
.playbackProgress::-webkit-progress-value {
background-color: #00a4dc
}
.playbackProgress[aria-valuenow]:before {
background-color: #00a4dc
.transcodingProgress > div {
background-color: #dd4919;
}
@media all and (max-width:34.375em) {