Fix Issue opensourcehk#41

Author: Tony Yip

src/css/_navbar.scss

@@ -25,6 +25,16 @@
   }
 }
 
+@media (min-width: 768px) and (max-width: 993px) {
+  .navbar .dropdown-menu a {
+    color: #333 !important;
+  }
+
+  .navbar-front .dropdown-menu {
+    background-color: $white;
+  }
+}
+
 @media (min-width: 992px) {
   .navbar.affix-top {
     bottom: 0;

src/scripts/client.js

@@ -27,7 +27,7 @@ var store = Store({
 });
 
 let ticketDiv = document.getElementById('ticket');
-if ((typeof ticketDiv != "undefined") && (ticketDiv != null)) {
+if ((typeof ticketDiv !== "undefined") && (ticketDiv !== null)) {
   render((
     <TicketButton
       className="btn btn-lg btn-hkosc button-front-mobile-ticket"
@@ -39,7 +39,7 @@ if ((typeof ticketDiv != "undefined") && (ticketDiv != null)) {
 }
 
 let timetableDiv = document.getElementById('timetable');
-if ((typeof timetableDiv != "undefined") && (timetableDiv != null)) {
+if ((typeof timetableDiv !== "undefined") && (timetableDiv !== null)) {
   console.log("run here");
   render((
       <Provider store={store}>

src/scripts/utils/navBar.js

@@ -1,21 +1,28 @@
 'use strict';
 
-export default function () {
+var largeScreen = screen.width > 993;
 
-  !function () {
-    let $navbar = $('.navbar-front');
-    if ($navbar.length === 0) return;
-    let drop = $('#navbar-collapse', $navbar);
-    $navbar.affix({
-      offset: {
-        top: $('.jumbotron').height() + $navbar.height()
-      }
-    });
-    $navbar.on('affixed.bs.affix', function () {
+export default function () {
+  let $navbar = $('.navbar-front');
+  if ($navbar.length === 0) return;
+  let drop = $('#navbar-collapse', $navbar);
+  if (!largeScreen)
+    drop.removeClass('dropup');
+  $navbar.affix({
+    offset: {
+      top: $('.jumbotron').height() + $navbar.height()
+    }
+  });
+  $navbar.on('affixed.bs.affix', function () {
+    if (largeScreen)
       drop.removeClass('dropup');
-    });
-    $navbar.on('affixed-top.bs.affix', function () {
+  });
+  $navbar.on('affixed-top.bs.affix', function () {
+    if (largeScreen)
       drop.addClass('dropup');
-    });
-  }(jQuery);
+  });
+
+  $(window).resize(function () {
+    largeScreen = screen.width > 993;
+  });
 }