Fixed Responsive Menu

.gitignore

@@ -21,8 +21,15 @@ _testmain.go
 
 *.exe
 
+# vim swap files
+*.swp
+
 # The Slackbot API Key
 api-token
+# Slackbot Specifics
 statbot
 statbot.db
 statbot.log
+
+# Just a quick script that I wrote to sync css/js/template files to the server
+sync_lives.sh

assets/css/statbot.css

@@ -5,7 +5,7 @@ body {
 /* Stuff for the Side Menu */
 /* Add transition to containers so they can push in and out.  */
 #layout,
-#menu,
+#resp_menu,
 .menu-link {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
@@ -19,7 +19,7 @@ body {
   position: relative;
   padding-left: 0;
 }
-#layout.active #menu {
+#layout.active #resp_menu {
   left: 150px;
   width: 150px;
 }
@@ -63,12 +63,12 @@ body {
 }
 
 /*
-The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+The `#resp_menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
 appears on the left side of the page.
 */
 
-#menu {
-  margin-left: -150px; /* "#menu" width */
+#resp_menu {
+  margin-left: -150px; /* "#resp_menu" width */
   width: 150px;
   position: fixed;
   top: 0;
@@ -80,47 +80,47 @@ appears on the left side of the page.
   -webkit-overflow-scrolling: touch;
 }
 /* All anchors inside the menu should be styled like this.  */
-#menu a {
+#resp_menu a {
   color: #999;
   border: none;
   padding: 0.6em 0 0.6em 0.6em;
 }
 
-/* Remove all background/borders, since we are applying them to #menu.  */
-#menu .pure-menu,
-#menu .pure-menu ul {
+/* Remove all background/borders, since we are applying them to #resp_menu.  */
+#resp_menu .pure-menu,
+#resp_menu .pure-menu ul {
   border: none;
   background: transparent;
 }
 
 /* Add that light border to separate items into groups.  */
-#menu .pure-menu ul,
-#menu .pure-menu .menu-item-divided {
+#resp_menu .pure-menu ul,
+#resp_menu .pure-menu .menu-item-divided {
   border-top: 1px solid #333;
 }
 /* Change color of the anchor links on hover/focus.  */
-#menu .pure-menu li a:hover,
-#menu .pure-menu li a:focus {
+#resp_menu .pure-menu li a:hover,
+#resp_menu .pure-menu li a:focus {
   background: #333;
 }
 
 /* This styles the selected menu item `<li>`.  */
-#menu .pure-menu-selected {
+#resp_menu .pure-menu-selected {
   background: #0b4992;
 }
-#menu .pure-menu-heading {
+#resp_menu .pure-menu-heading {
   background: #1f8dd6;
 }
 
 /* This styles a link within a selected menu item `<li>`.  */
-#menu .pure-menu-selected a {
+#resp_menu .pure-menu-selected a {
   color: #fff;
 }
 
 /*
 This styles the menu heading.
 */
-#menu .pure-menu-heading {
+#resp_menu .pure-menu-heading {
   font-size: 110%;
   color: #fff;
   margin: 0;
@@ -141,7 +141,7 @@ small screens.
   position: fixed;
   display: block; /* show this only on small screens */
   top: 0;
-  left: 0; /* "#menu width" */
+  left: 0; /* "#resp_menu width" */
   background: #000;
   background: rgba(0,0,0,0.7);
   font-size: 10px; /* change this value to increase/decrease button size */
@@ -278,10 +278,10 @@ Hides the menu at `48em`, but modify this based on your app's needs.
   }
 
   #layout {
-    padding-left: 150px; /* left col width "#menu" */
+    padding-left: 150px; /* left col width "#resp_menu" */
     left: 0;
   }
-  #menu {
+  #resp_menu {
     left: 150px;
   }
 
@@ -294,11 +294,6 @@ Hides the menu at `48em`, but modify this based on your app's needs.
   #layout.active .menu-link {
     left: 150px;
   }
-
-
-  .levelup-user {
-    width: 48%;
-  }
 }
 
 @media (max-width: 48em) {
@@ -312,8 +307,4 @@ Hides the menu at `48em`, but modify this based on your app's needs.
     position: relative;
     left: 150px;
   }
-
-  .levelup-user {
-    width: 98%;
-  }
 }

assets/js/B.js

@@ -29,7 +29,7 @@ function B(els, attrs) {
   // Map a function to the first element in 'this'
   B.prototype.mapOne = function(callback) {
     var m = this.map(callback);
-    return m.length > 1 ? m[0] : m;
+    return Object.prototype.toString.call(m) === '[object Array]' ? m[0] : m;
   };
 
   // Update css for each element in 'this'
@@ -49,11 +49,11 @@ function B(els, attrs) {
   };
 
   // Update the innerText for each element in 'this'
-  B.prototype.html = function(text) {
+  B.prototype.text = function(text) {
     if(typeof text !== "undefined") {
-      return this.forEach(function(el){el.innerHTML=text;});
+      return this.forEach(function(el){el.textContent=text;});
     } else {
-      return this.mapOne(function(el){return el.innerHTML;});
+      return this.mapOne(function(el){return el.textContent;});
     }
   };
 
@@ -103,7 +103,7 @@ function B(els, attrs) {
         });
       }
     } else {
-      // And getting the value
+      // And clearing the value
       if(this[0].tagName=="INPUT" && attr.toUpperCase()=="VALUE") {
         return this.mapOne(function(el){
           return el.value;

assets/js/B_purecss.js

@@ -26,4 +26,22 @@ B(window).on('load',function() {
       B(B_t.firstChild('.fa-toggle-down')).removeClass('fa-toggle-down').addClass('fa-toggle-up');
     }
   });
+
+  // For responsive menu click
+  var mainLayout = B('#layout'),
+      menu = B('#resp_menu'),
+      menuLink = B('#resp_menu_link');
+  menuLink.on('click', function(e) {
+    e.preventDefault();
+
+    if(mainLayout.hasClass('active')) {
+      mainLayout.removeClass('active');
+      menu.removeClass('active');
+      menuLink.removeClass('active');
+      return;
+    }
+    mainLayout.addClass('active');
+    menu.addClass('active');
+    menuLink.addClass('active');
+  });
 });

assets/js/levelup_main.js

@@ -112,11 +112,15 @@ function buildList() {
         idName = userName.replace('.','_');
     
     B("#userXpList").append(B('<div>').attr('id',"levelup-user-"+idName).addClass('levelup-user pure-u-1 pure-u-md-11-24').attr('data-username',userName));
-    var userNameSpan = B("<span>").attr('id','levelup-user-'+idName+'-name').addClass('levelup-username');
-    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-level').addClass('levelup-level').html(userLevel));
-    B("#levelup-user-"+idName).append(userNameSpan.html(userName));
-    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-smalllevel').addClass('levelup-smalllevel').html("Level "+userLevel));
-    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-xp').addClass('levelup-xp').html("("+xp+"/"+toNext+")"));
+    var userNameSpan = B("<span>").attr('id','levelup-user-'+idName+'-name');
+    userNameSpan.addClass('levelup-username');
+    var levelDiv = B("<div>").attr('id','levelup-user-'+idName+'-level');
+    levelDiv.addClass('levelup-level');
+    levelDiv.text(userLevel);
+    B("#levelup-user-"+idName).append(levelDiv);
+    B("#levelup-user-"+idName).append(userNameSpan.text(userName));
+    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-smalllevel').addClass('levelup-smalllevel').text("Level "+userLevel));
+    B("#levelup-user-"+idName).append(B("<div>").attr('id','levelup-user-'+idName+'-xp').addClass('levelup-xp').text("("+xp+"/"+toNext+")"));
 
     B('.levelup-user').on('click', function() {
       console.log("Load User Profile: "+B(this).attr('data-username'));

templates/menu.html

@@ -1,9 +1,9 @@
       <!-- Menu Toggle -->
-      <a id="menuLink" class="menu-link" href="#menu">
+      <a id="resp_menu_link" class="menu-link" href="#menu">
         <!-- Hamburger icon -->
         <span></span>
       </a>
-      <div id="menu">
+      <div id="resp_menu">
         <div class="pure-menu">
           <a class="pure-menu-heading" href="/">{{.Title}}</a>
           <ul class="pure-menu-list">