From 58ea4a65e149b1fa14ac0aa62311f89b2229b5ab Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Sat, 5 Sep 2015 17:21:05 -0700 Subject: [PATCH 1/4] Fix info pages for mobile layout --- data/interfaces/default/css/plexpy.css | 1 + 1 file changed, 1 insertion(+) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 09906e51..a1f31a3b 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -932,6 +932,7 @@ a .dashboard-activity-metadata-user-thumb:hover { background-clip: content-box; min-height: calc(100% - 200px); position: inherit; + width: 100%; } .summary-content-poster { float: left; From 52fae6df0e78540ed0b19991736650ed54429ff0 Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Sat, 5 Sep 2015 17:35:29 -0700 Subject: [PATCH 2/4] 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 From 423360e82033438ba97866f7d2d4049356445096 Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Sat, 5 Sep 2015 18:01:44 -0700 Subject: [PATCH 3/4] Simplify css for homepage mobile layout fix --- data/interfaces/default/css/plexpy.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 4e42c815..1d563e98 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -473,8 +473,8 @@ a .users-poster-face:hover { position: relative; height: 260px; width: 350px; - margin-right: 25px; - margin-bottom: 25px; + margin-right: 20px; + margin-bottom: 20px; } .dashboard-activity-poster { height: 200px; @@ -1891,7 +1891,7 @@ a .home-platforms-instance-list-oval:hover, } .home-platforms-instance .slider { background-color: #2d2d2d; - width: 350px; + width: calc(100% + 20px); display: none; position: absolute; top: 128px; @@ -2335,9 +2335,6 @@ a .home-platforms-instance-list-oval:hover, .home-platforms-instance { width: calc(100% - 20px); } - .home-platforms-instance .slider { - width: calc(100% + 20px); - } .dashboard-instance { width: 100%; } From aaa1f0aa33206b46e9fa94ceb992988168247fde Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Sat, 5 Sep 2015 18:08:21 -0700 Subject: [PATCH 4/4] Change mobile layout for devices up to 400px wide --- data/interfaces/default/css/plexpy.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 1d563e98..d8379a65 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -2331,7 +2331,7 @@ a .home-platforms-instance-list-oval:hover, @media only screen and (min-device-width: 300px) - and (max-device-width: 375px) { + and (max-device-width: 400px) { .home-platforms-instance { width: calc(100% - 20px); }