From 101d0b11395a24d0a9a36c7202e4e78fb55559a6 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Sat, 31 Aug 2019 03:12:10 -0700
Subject: [PATCH] fix layout issues for device cards on dashboard

---
 src/components/indicators/indicators.js |   1 +
 src/controllers/dashboardpage.js        |  26 +++---
 src/css/dashboard.css                   | 110 +++++++-----------------
 3 files changed, 46 insertions(+), 91 deletions(-)

diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js
index d9c7af1ab0..2e8d28523e 100644
--- a/src/components/indicators/indicators.js
+++ b/src/components/indicators/indicators.js
@@ -221,6 +221,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     });
 
     return {
+        getProgressHtml: getProgressHtml,
         getProgressBarHtml: getProgressBarHtml,
         getPlayedIndicatorHtml: getPlayedIndicator,
         getChildCountIndicatorHtml: getChildCountIndicatorHtml,
diff --git a/src/controllers/dashboardpage.js b/src/controllers/dashboardpage.js
index 7c443e3087..be3ee9e081 100644
--- a/src/controllers/dashboardpage.js
+++ b/src/controllers/dashboardpage.js
@@ -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>";
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 8ee6c69c8d..b07adc96ef 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -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) {