Fixed Responsive Menu
This commit is contained in:
parent
2820263379
commit
23172a5115
7
.gitignore
vendored
7
.gitignore
vendored
@ -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
|
||||||
|
@ -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%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -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'));
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user