Fix settings hover nav menu for mobile

data/interfaces/default/base.html

@@ -210,8 +210,8 @@ from plexpy.helpers import anon_url
                     % else:
                     <li class="dropdown">
                     % endif
-                        <a href="settings" class="dropdown-toggle disabled" aria-haspopup="true" data-toggle="dropdown" data-hover="dropdown"><i class="fa fa-lg fa-cogs"></i> <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
+                        <a href="#" class="dropdown-toggle" aria-haspopup="true" data-toggle="dropdown" data-hover="dropdown" data-href="settings"><i class="fa fa-lg fa-cogs"></i> <span class="caret"></span></a>
+                        <ul class="dropdown-menu" id="settings-dropdown-menu">
                             <li><a href="settings"><i class="fa fa-cogs"></i> Settings</a></li>
                             <li role="separator" class="divider"></li>
                             <li><a href="logs"><i class="fa fa-list-alt"></i> View Logs</a></li>
@@ -238,7 +238,8 @@ ${next.headerIncludes()}
 </div>
 
 <script src="${http_root}js/jquery-2.1.4.min.js"></script>
-<script src="${http_root}js/bootstrap3/bootstrap.min.js"></script>
+<script src="${http_root}js/bootstrap.min.js"></script>
+<script src="${http_root}js/bootstrap-hover-dropdown.min.js"></script>
 <script src="${http_root}js/script.js"></script>
 <script>
     $('#updateDismiss').click(function() {
@@ -269,8 +270,12 @@ ${next.headerIncludes()}
         window.location.href = "checkGithub";
     });
 
-</script>
-<script>
+    $('.dropdown-toggle').click(function (e) {
+        if (!(('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))) {
+            window.location.href = $(this).data('href');
+        }
+    });
+
     $('#search_form').submit(function (e) {
         if ($('#query').hasClass('active') && $('#query').val().trim() != '') {
             $.ajax({
@@ -291,8 +296,7 @@ ${next.headerIncludes()}
             }).removeClass('active');
         }
     });
-</script>
-<script>
+
     $(document).ready(function () {
         // Work around for iOS web app links opening in Safari
         if (("standalone" in window.navigator) && window.navigator.standalone) {
@@ -305,17 +309,6 @@ ${next.headerIncludes()}
                 }
             });
         }
-
-        // hack alert: if we don't have a touchscreen, and we are already hovering the mouse, then click should link instead of toggle
-        if ((navigator.maxTouchPoints || 0) < 2) {
-            $('.dropdown-toggle').on('click', function () {
-                var $this = $(this);
-                if ($this.attr('aria-expanded') === 'true') {
-                    window.location.href = $this.attr('href');
-                }
-            });
-        }
-
     });
 </script>
 ${next.javascriptIncludes()}

data/interfaces/default/css/plexpy.css

@@ -99,10 +99,9 @@ img {
 .navbar-toggle:focus {
     background-color: #2f2f2f;
 }
-@media screen and (min-width: 768px) {
-  .dropdown:hover > .dropdown-menu {
-    display: block;
-  }
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+    background-color: #2f2f2f;
+    border-color: none;
 }
 .dropdown-menu {
   background-color: #282828;

data/interfaces/default/js/bootstrap-hover-dropdown.min.js

@@ -0,0 +1,12 @@
+/**
+ * @preserve
+ * Project: Bootstrap Hover Dropdown
+ * Author: Cameron Spear
+ * Version: v2.2.1
+ * Contributors: Mattia Larentis
+ * Dependencies: Bootstrap's Dropdown plugin, jQuery
+ * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
+ * License: MIT
+ * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
+ */
+!function(e,n,o){var t=e();e.fn.dropdownHover=function(o){return"ontouchstart"in document?this:(t=t.add(this.parent()),this.each(function(){function r(e){d.parents(".navbar").find(".navbar-toggle").is(":visible")||(n.clearTimeout(a),n.clearTimeout(i),i=n.setTimeout(function(){t.find(":focus").blur(),f.instantlyCloseOthers===!0&&t.removeClass("open"),n.clearTimeout(i),d.attr("aria-expanded","true"),s.addClass("open"),d.trigger(l)},f.hoverDelay))}var a,i,d=e(this),s=d.parent(),u={delay:500,hoverDelay:0,instantlyCloseOthers:!0},h={delay:e(this).data("delay"),hoverDelay:e(this).data("hover-delay"),instantlyCloseOthers:e(this).data("close-others")},l="show.bs.dropdown",c="hide.bs.dropdown",f=e.extend(!0,{},u,o,h);s.hover(function(e){return s.hasClass("open")||d.is(e.target)?void r(e):!0},function(){n.clearTimeout(i),a=n.setTimeout(function(){d.attr("aria-expanded","false"),s.removeClass("open"),d.trigger(c)},f.delay)}),d.hover(function(e){return s.hasClass("open")||s.is(e.target)?void r(e):!0}),s.find(".dropdown-submenu").each(function(){var o,t=e(this);t.hover(function(){n.clearTimeout(o),t.children(".dropdown-menu").show(),t.siblings().children(".dropdown-menu").hide()},function(){var e=t.children(".dropdown-menu");o=n.setTimeout(function(){e.hide()},f.delay)})})}))},e(document).ready(function(){e(n).width()>769&&e(".navbar .dropdown > a").click(function(){location.href=this.href})}),e(document).ready(function(){e('[data-hover="dropdown"]').dropdownHover()})}(jQuery,window);

data/interfaces/default/welcome.html

@@ -192,7 +192,7 @@ from plexpy import common
 </div>
 
 <script src="${http_root}js/jquery-2.1.4.min.js"></script>
-<script src="${http_root}js/bootstrap3/bootstrap.min.js"></script>
+<script src="${http_root}js/bootstrap.min.js"></script>
 <script src="${http_root}js/selectize.min.js"></script>
 <script src="${http_root}js/script.js"></script>
 <script src="${http_root}js/bootstrap-wizard.min.js"></script>

plexpy/config.py

@@ -617,4 +617,4 @@ class Config(object):
                 home_sections = self.HOME_SECTIONS
                 home_sections.remove('library_stats')
                 self.HOME_SECTIONS = home_sections
-            self.CONFIG_VERSION = '4'
+            self.CONFIG_VERSION = '5'