From 52fae6df0e78540ed0b19991736650ed54429ff0 Mon Sep 17 00:00:00 2001
From: Jonathan Wong <Jonny.Wong.16@gmail.com>
Date: Sat, 5 Sep 2015 17:35:29 -0700
Subject: [PATCH] Fix dashboard activity and home stats for mobile layout

* Specify dashboard activity as 100% width instead of a set px width
---
 data/interfaces/default/css/plexpy.css | 42 +++++++++++++++++---------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index a1f31a3b..4e42c815 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -478,7 +478,7 @@ a .users-poster-face:hover {
 }
 .dashboard-activity-poster {
     height: 200px;
-    width: 350px;
+    width: 100%;
     position: relative;
     overflow: hidden;
 }
@@ -490,8 +490,8 @@ a:hover .dashboard-activity-poster {
 .dashboard-activity-poster-face {
     background-position: center;
     background-size: cover;
-    height: 200px;
-    width: 350px;
+    height: 100%;
+    width: 100%;
     position: absolute;
     top: 0;
     right: 0;
@@ -503,13 +503,11 @@ a:hover .dashboard-activity-poster {
     z-index: -3;
 }
 .dashboard-activity-cover-face-bg {
-}
-.dashboard-activity-poster-music-bg {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
-    width: 350px;
+    height: 100%;
+    width: 100%;
     position: absolute;
     top: 0;
     right: 0;
@@ -528,22 +526,22 @@ a:hover .dashboard-activity-poster {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
+    height: 100%;
     width: 200px;
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     position: absolute;
     top: 0;
-    left: 77px;
+    left: calc(50% - 100px);
     z-index: -3;
 }
 .dashboard-activity-clip-face-bg {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
-    width: 350px;
+    height: 100%;
+    width: 100%;
     position: absolute;
     top: 0;
     right: 0;
@@ -562,7 +560,7 @@ a:hover .dashboard-activity-poster {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    height: 200px;
+    height: 100%;
     width: 130px;
     position: relative;
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
@@ -570,7 +568,7 @@ a:hover .dashboard-activity-poster {
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     position: absolute;
     top: 0;
-    left: 110px;
+    left: calc(50% - 65px);
     z-index: -3;
 }
 .dashboard-activity-info-details-overlay {
@@ -605,7 +603,7 @@ a:hover .dashboard-activity-poster {
 }
 .dashboard-activity-info-details-content {
     height: 200px;
-    width: 350px;
+    width: 100%;
     line-height: 25px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -698,7 +696,7 @@ a:hover .dashboard-activity-poster {
 }
 .dashboard-activity-metadata-wrapper {
     position: relative;
-    width: 350px;
+    width: 100%;
     height: 50px;
     font-size: 13px;
     padding: 0 3px;
@@ -2330,3 +2328,17 @@ a .home-platforms-instance-list-oval:hover,
     border-radius: 8px;
     background-clip: padding-box;
 }
+
+@media only screen 
+  and (min-device-width: 300px) 
+  and (max-device-width: 375px) {
+    .home-platforms-instance {
+        width: calc(100% - 20px);
+    }
+    .home-platforms-instance .slider {
+        width: calc(100% + 20px);
+    }
+    .dashboard-instance {
+        width: 100%;
+    }
+}
\ No newline at end of file