Mobile CSS Fix

Closes programminghistorian#723
ianmilligan1 · Mar 8, 2018 · 33c6ce00a538a084913adb93cc6d4b26cfc87f6a · 33c6ce0
1 parent f29d78e
commit 33c6ce00a538a084913adb93cc6d4b26cfc87f6a
Unified Split

Showing with 64 additions and 28 deletions.

+28 −26 _includes/header.html

+2 −2 _includes/menu.html

+34 −0 js/bootstrap-4-navbar.js
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,37 +1,39 @@
-  
-  <head>
-  
-    <meta charset="utf-8">
-  
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  
+<head>
+  
+  <meta charset="utf-8">
+  
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  
-    {% include metadata.html %}
+  
+  {% include metadata.html %}
-  
-    {% include twitter-card.html %}
+  
+  {% include twitter-card.html %}
-  
-    <!-- Mobile viewport optimized: h5bp.com/viewport -->
-  
-    <meta name="viewport" content="width=device-width">
+  
+  <!-- Mobile viewport optimized: h5bp.com/viewport -->
+  
+  <meta name="viewport" content="width=device-width">
-  
-    <link href="{{site.baseurl}}/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
+  
+  <link href="{{site.baseurl}}/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
-  
-    <link href='{{site.baseurl}}/feed.xml' rel='alternate' type='application/atom+xml'>
+  
+  <link href='{{site.baseurl}}/feed.xml' rel='alternate' type='application/atom+xml'>
-  
-    <title>{{ page.title }} | {{ site.name }}</title>
+  
+  <title>{{ page.title }} | {{ site.name }}</title>
-  
-    <link href="https://fonts.googleapis.com/css?family=Crete+Round|Open+Sans|Quattrocento|Roboto|Roboto+Condensed" rel="stylesheet">
+  
+  <link href="https://fonts.googleapis.com/css?family=Crete+Round|Open+Sans|Quattrocento|Roboto|Roboto+Condensed" rel="stylesheet">
-  
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
-  
-    <link rel="stylesheet" href="{{site.baseurl}}/css/github.css">
-  
-    <link rel="stylesheet" href="{{site.baseurl}}/css/style.css">
+  
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+  
+  <link rel="stylesheet" href="{{site.baseurl}}/css/github.css">
+  
+  <link rel="stylesheet" href="{{site.baseurl}}/css/style.css">
-  
-    <script
-  
-      src="https://code.jquery.com/jquery-3.2.1.min.js"
-  
-      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-  
-      crossorigin="anonymous"></script>
-  
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
-  
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
+  
+  <script
+  
+    src="https://code.jquery.com/jquery-3.2.1.min.js"
+  
+    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+  
+    crossorigin="anonymous"></script>
+  
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+  
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
-  
-    <script type="text/javascript" src="{{site.baseurl}}/js/ext_links.js"></script>
-  
-    <script type="text/javascript" src="{{site.baseurl}}/js/header_links.js"></script>
-  
-    <script type="text/javascript" async
-  
-      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
-  
-    </script>
+  
+  <script type="text/javascript" src="{{site.baseurl}}/js/ext_links.js"></script>
+  
+  <script type="text/javascript" src="{{site.baseurl}}/js/header_links.js"></script>
+  
+  <script type="text/javascript" async
+  
+    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+  
+  </script>
+  
+  <script src="{{site.baseurl}}/js/bootstrap-4-navbar.js"></script>
-  
-  </head>
+  
+
+  
+</head>
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -6,7 +6,7 @@
  <a class="navbar-brand" href="{{site.baseurl}}{{site.data.snippets.menu-home[page.lang]}}">The Programming Historian</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
-  
-        <li class="nav-item dropdown">
+  
+        <li class="nav-item dropdown mobile-drop">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{site.data.snippets.menu-about[page.lang]}}
          </a>
@@ -17,7 +17,7 @@
          </div>
        </li>
-  
-      <li class="nav-item dropdown">
+  
+      <li class="nav-item dropdown mobile-drop">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{site.data.snippets.menu-contribute[page.lang]}}
        </a>
diff --git a/js/bootstrap-4-navbar.js b/js/bootstrap-4-navbar.js
@@ -0,0 +1,34 @@
+  
+
+  
+/*!
+  
+ * Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ )
+  
+ * Copyright 2017.
+  
+ * Licensed under the GPL license
+  
+ */
+  
+
+  
+
+  
+$( document ).ready( function () {
+  
+    $( '.mobile-drop a.dropdown-toggle' ).on( 'click', function ( e ) {
+  
+        var $el = $( this );
+  
+        var $parent = $( this ).offsetParent( ".mobile-drop" );
+  
+        if ($('.show.mobile-drop').length > 0){
+  
+          $('.show.mobile-drop').each(function(item){
+  
+            $(this).toggleClass('show');
+  
+          });
+  
+        }
+  
+
+  
+        var $subMenu = $( this ).next( ".mobile-drop" );
+  
+        $subMenu.toggleClass( 'show' );
+  
+
+  
+        $( this ).parent( "li" ).toggleClass( 'show' );
+  
+
+  
+        $( this ).parents( 'li.nav-item.dropdown.mobile-drop.show' ).on( 'click', function ( e ) {
+  
+            $( '.mobile-drop .show' ).removeClass( "show" );
+  
+        } );
+  
+
+  
+         if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
+  
+            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
+  
+        }
+  
+
+  
+        return false;
+  
+    } );
+  
+} );