Merge pull request #2218 from thornbill/style-fixes

src/assets/css/dashboard.css

@@ -127,8 +127,8 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionAppInfo img {
-    max-width: 40px;
+    max-width: 2.5em;
-    max-height: 40px;
+    max-height: 2.5em;
     margin-right: 8px;
 }
 
@@ -204,6 +204,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     flex-grow: 1;
 }
 
+.dashboardActionsContainer {
+    margin: 1em -0.3em 0;
+}
+
 .sessionNowPlayingContent {
     -webkit-background-size: cover;
     background-size: cover;
@@ -246,20 +250,12 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 @media all and (min-width: 70em) {
     .dashboardSections {
-        -webkit-flex-wrap: wrap;
         flex-wrap: wrap;
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: row;
         flex-direction: row;
     }
 
     .dashboardColumn-2-60 {
-        width: 46%;
+        flex-grow: 2;
-    }
-
-    .dashboardColumn-2-40 {
-        width: 27%;
     }
 
     .dashboardSection {
@@ -291,6 +287,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .activeSession {
+    min-width: 20rem;
     width: 100% !important;
 }
 
@@ -304,15 +301,12 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-position: center;
 }
 
-@media all and (min-width: 40em) {
-    .activeSession {
-        width: 100% !important;
-    }
-}
-
 @media all and (min-width: 50em) {
     .activeSession {
-        width: 50% !important;
+        max-width: 25rem;
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 50%;
     }
 }
 
@@ -325,6 +319,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionAppInfo {
+    flex-grow: 1;
     padding: 0.5em;
     overflow: hidden;
 }
@@ -344,6 +339,8 @@ div[data-role=controlgroup] a.ui-btn-active {
     right: 0;
     bottom: 0;
     font-weight: 400;
+    display: flex;
+    flex-direction: column;
 }
 
 .sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
@@ -358,9 +355,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .sessionNowPlayingDetails {
     display: flex;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
 }
 
 .sessionNowPlayingInfo {
@@ -387,6 +381,11 @@ div[data-role=controlgroup] a.ui-btn-active {
     background: transparent !important;
 }
 
+.activeDevices.itemsContainer {
+    /* offset for cardBox margin */
+    margin: -0.6em;
+}
+
 .activeSession .playbackProgress,
 .activeSession .transcodingProgress {
     position: absolute;

src/controllers/dashboard/dashboard.html

@@ -15,11 +15,11 @@
                         <p id="architecture"></p>
                     </div>
 
-                    <div style="margin-top:1em;">
+                    <div class="dashboardActionsContainer">
                         <button is="emby-button" type="button" class="raised btnRefresh">
                             <span>${ButtonScanAllLibraries}</span>
                         </button>
-                        <button is="emby-button" type="button" id="btnRestartServer" class="raised hide" onclick="DashboardPage.restart(this);" style="margin-left:0;">
+                        <button is="emby-button" type="button" id="btnRestartServer" class="raised hide" onclick="DashboardPage.restart(this);">
                             <span>${Restart}</span>
                         </button>
                         <button is="emby-button" type="button" id="btnShutdown" class="raised" onclick="DashboardPage.shutdown(this);">

src/elements/emby-button/emby-button.css

@@ -3,7 +3,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    margin: 0 0.3em;
+    margin: 0.3em;
     text-align: center;
     font-size: inherit;
     font-family: inherit;