Fixed Responsive Menu

This commit is contained in:
Brian Buller 2015-11-09 19:23:23 -06:00
parent 2820263379
commit 23172a5115
6 changed files with 62 additions and 42 deletions

7
.gitignore vendored
View File

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

View File

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

View File

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

View File

@ -26,4 +26,22 @@ B(window).on('load',function() {
B(B_t.firstChild('.fa-toggle-down')).removeClass('fa-toggle-down').addClass('fa-toggle-up'); 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');
});
}); });

View File

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

View File

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