From 36ff1fb674313b0551cf1e37981a4a894dbbc816 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <JonnyWong16@users.noreply.github.com>
Date: Mon, 19 Feb 2018 08:39:27 -0800
Subject: [PATCH] Fix button layout on mobile site

---
 data/interfaces/default/css/plexpy.css | 41 +++++++++++++
 data/interfaces/default/graphs.html    |  2 +-
 data/interfaces/default/index.html     | 84 ++++++++++++++------------
 3 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index dcfea97d..df36488f 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -2395,6 +2395,9 @@ a .library-user-instance-box:hover {
     margin-top: 9px;
     width: 175px;
 }
+.home-padded-header .button-bar {
+    float: left;
+}
 .home-platforms {
 }
 .home-platforms ul,
@@ -3315,6 +3318,44 @@ pre::-webkit-scrollbar-thumb {
     .dashboard-stats-instance {
         width: 100%;
     }
+    .header-bar {
+        display: block;
+        float: none !important;
+    }
+    .button-bar {
+        float: left !important;
+        clear: both;
+        margin-top: 15px;
+    }
+    .button-bar > div,
+    .button-bar > button,
+    .button-bar > span {
+        float: left !important;
+        clear: both !important;
+        margin-bottom: 10px;
+    }
+    .button-bar > div > button.btn {
+        float: left !important;
+        clear: both !important;
+    }
+    .home-padded-header .button-bar {
+        margin-top: 10px;
+        margin-bottom: 15px;
+    }
+}
+@media only screen
+  and (min-device-width: 800px)
+  and (max-device-width: 1024px) {
+    .button-bar {
+        float: right !important;
+    }
+    .button-bar > div > button.btn {
+        float: left !important;
+        clear: both !important;
+    }
+    .home-padded-header .button-bar {
+        float: left !important;
+    }
 }
 #search_form {
     width: 300px;
diff --git a/data/interfaces/default/graphs.html b/data/interfaces/default/graphs.html
index ac6a8294..16265588 100644
--- a/data/interfaces/default/graphs.html
+++ b/data/interfaces/default/graphs.html
@@ -11,7 +11,7 @@
         <div class="header-bar">
             <span><i class="fa fa-bar-chart"></i> Graphs</span>
         </div>
-        <div class="button-bar hidden-xs">
+        <div class="button-bar">
             <div class="btn-group" id="user-selection">
                 <label>
                     <select name="graph-user" id="graph-user" class="btn" style="color: inherit;">
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 3b96b7aa..0ff07141 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -31,27 +31,29 @@
         <div class="col-md-12">
             <div class="home-padded-header padded-header">
                 <h3 class="pull-left">Watch Statistics</h3>
-                <div class="btn-group pull-left" data-toggle="buttons" id="watch-stats-toggles" style="margin-right: 3px">
-                    % if config['home_stats_type'] == 0:
-                    <label class="btn btn-dark active">
-                        <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-plays" value="0" autocomplete="off" checked> Play Count
-                    </label>
-                    <label class="btn btn-dark">
-                        <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-duration" value="1" autocomplete="off"> Play Duration
-                    </label>
-                    % else:
-                    <label class="btn btn-dark">
-                        <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-plays" value="0" autocomplete="off"> Play Count
-                    </label>
-                    <label class="btn btn-dark active">
-                        <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-duration" value="1" autocomplete="off" checked> Play Duration
-                    </label>
-                    % endif
-                </div>
-                <div class="input-group pull-left" style="width: 1px; margin-right: 3px" id="watched-stats-days-selection">
-                    <span class="input-group-addon btn-dark inactive">Last</span>
-                    <input type="number" class="form-control" name="watched-stats-days" id="watched-stats-days" value="${config['home_stats_length']}" min="1" data-default="30" data-toggle="tooltip" title="Min: 1 day" />
-                    <span class="input-group-addon btn-dark inactive">days</span>
+                <div class="button-bar">
+                    <div class="btn-group pull-left" data-toggle="buttons" id="watch-stats-toggles" style="margin-right: 3px">
+                        % if config['home_stats_type'] == 0:
+                        <label class="btn btn-dark active">
+                            <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-plays" value="0" autocomplete="off" checked> Play Count
+                        </label>
+                        <label class="btn btn-dark">
+                            <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-duration" value="1" autocomplete="off"> Play Duration
+                        </label>
+                        % else:
+                        <label class="btn btn-dark">
+                            <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-plays" value="0" autocomplete="off"> Play Count
+                        </label>
+                        <label class="btn btn-dark active">
+                            <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-duration" value="1" autocomplete="off" checked> Play Duration
+                        </label>
+                        % endif
+                    </div>
+                    <div class="input-group pull-left" style="width: 1px; margin-right: 3px" id="watched-stats-days-selection">
+                        <span class="input-group-addon btn-dark inactive">Last</span>
+                        <input type="number" class="form-control" name="watched-stats-days" id="watched-stats-days" value="${config['home_stats_length']}" min="1" data-default="30" data-toggle="tooltip" title="Min: 1 day" />
+                        <span class="input-group-addon btn-dark inactive">days</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -69,7 +71,9 @@
         <div class="col-md-12">
             <div class="home-padded-header padded-header" id="library-statistics-header">
                 <h3 class="pull-left">Library Statistics</h3>
-                <span class="btn btn-dark active" style="cursor: default">${config['pms_name']}</span>
+                <div class="button-bar">
+                    <span class="btn btn-dark active" style="cursor: default">${config['pms_name']}</span>
+                </div>
             </div>
         </div>
     </div>
@@ -94,23 +98,25 @@
                         <a href="#" id="recently-added-page-right" class="paginate btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
                     </li>
                 </ul>
-                <div class="btn-group pull-left" data-toggle="buttons" id="recently-added-toggles" style="margin-right: 3px">
-                    <label class="btn btn-dark active" id="recently-added-label-all">
-                        <input type="radio" name="recently-added-toggle" id="recently-added-toggle-all" value="" autocomplete="off"> All
-                    </label>
-                    <label class="btn btn-dark" id="recently-added-label-movies">
-                        <input type="radio" name="recently-added-toggle" id="recently-added-toggle-movie" value="movie" autocomplete="off"> Movies
-                    </label>
-                    <label class="btn btn-dark" id="recently-added-label-tv">
-                        <input type="radio" name="recently-added-toggle" id="recently-added-toggle-show" value="show" autocomplete="off"> TV Shows
-                    </label>
-                    <label class="btn btn-dark" id="recently-added-label-music">
-                        <input type="radio" name="recently-added-toggle" id="recently-added-toggle-music" value="artist" autocomplete="off"> Music
-                    </label>
-                </div>
-                <div class="input-group pull-left" style="width: 1px;" id="recently-added-count-selection">
-                    <input type="number" class="form-control" name="recently-added-count" id="recently-added-count" value="${config['home_stats_recently_added_count']}" min="1" max="100" data-default="50" data-toggle="tooltip" title="Min: 1 item<br>Max: 100 items" />
-                    <span class="input-group-addon btn-dark inactive">items</span>
+                <div class="button-bar">
+                    <div class="btn-group pull-left" data-toggle="buttons" id="recently-added-toggles" style="margin-right: 3px">
+                        <label class="btn btn-dark active" id="recently-added-label-all">
+                            <input type="radio" name="recently-added-toggle" id="recently-added-toggle-all" value="" autocomplete="off"> All
+                        </label>
+                        <label class="btn btn-dark" id="recently-added-label-movies">
+                            <input type="radio" name="recently-added-toggle" id="recently-added-toggle-movie" value="movie" autocomplete="off"> Movies
+                        </label>
+                        <label class="btn btn-dark" id="recently-added-label-tv">
+                            <input type="radio" name="recently-added-toggle" id="recently-added-toggle-show" value="show" autocomplete="off"> TV Shows
+                        </label>
+                        <label class="btn btn-dark" id="recently-added-label-music">
+                            <input type="radio" name="recently-added-toggle" id="recently-added-toggle-music" value="artist" autocomplete="off"> Music
+                        </label>
+                    </div>
+                    <div class="input-group pull-left" style="width: 1px;" id="recently-added-count-selection">
+                        <input type="number" class="form-control" name="recently-added-count" id="recently-added-count" value="${config['home_stats_recently_added_count']}" min="1" max="100" data-default="50" data-toggle="tooltip" title="Min: 1 item<br>Max: 100 items" />
+                        <span class="input-group-addon btn-dark inactive">items</span>
+                    </div>
                 </div>
             </div>
         </div>