Merge branch 'master' of github.com:psychobunny/node-forum

v1.18.x
Julian Lam 12 years ago
commit bffa8828df

@ -35,6 +35,10 @@ body {
padding-top: 70px;
}
@media (max-width: 979px)
{
padding-bottom: 50px;
}
}
.none {
@ -521,4 +525,122 @@ body .navbar .nodebb-inline-block {
.post-window {
position: static;
}
}
#mobile-menu {
position: fixed;
bottom: 0px;
height: 50px;
background: #333;
width: 100%;
left: 0px;
}
#mobile-menu, #mobile-menu-overlay {
z-index: 999;
@media (min-width: 979px)
{
display: none !important;
}
}
.btn-none,
.btn-none:active,
.btn-none[disabled] {
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-none {
cursor: pointer;
border-color: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-none:hover,
.btn-none:focus {
text-decoration: none;
background-color: transparent;
}
.btn-none[disabled]:hover,
.btn-none[disabled]:focus {
text-decoration: none;
}
.btn-none {
.icon-white {
color: white;
}
}
#mobile-menu {
#mobile-menu-btn {
color: #eee;
padding: 10px;
text-shadow: none;
}
}
#mobile-menu-overlay {
display: none;
background: rgba(0, 0, 0, 0.85);
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
//margin-top: 50px;
padding-top: 20px;
opacity: 0;
-webkit-transition: opacity 150ms ease;
-moz-transition: opacity 150ms ease;
-ms-transition: opacity 150ms ease;
-o-transition: opacity 150ms ease;
transition: opacity 150ms ease;
&.menu-visible {
display: block;
opacity: 1;
}
.mobile-menu-icon {
color: white;
width: 20%;
min-width: 85px;
height: auto;
text-align: center;
padding: 10px;
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-transition: margin-top 250ms ease;
-moz-transition: margin-top 250ms ease;
-ms-transition: margin-top 250ms ease;
-o-transition: margin-top 250ms ease;
transition: margin-top 250ms ease;
margin-top: 20%;
&.menu-visible {
margin-top: 0%;
}
i {
width: 100%;
}
}
}

@ -1,8 +1,7 @@
(function() {
var yourid = templates.get('yourid'),
theirid = templates.get('theirid');
var isFriend = {isFriend};
theirid = templates.get('theirid'),
isFriend = templates.get('isFriend');
$(document).ready(function() {

@ -13,7 +13,7 @@
socket.emit('user.latest', {});
socket.on('user.latest', function(data) {
if (data.username == '') {
latest_user.innerHTML = '';
latest_user.innerHTML = '';y
} else {
latest_user.innerHTML = "The most recent user to register is <b><a href='/users/"+data.username+"'>" + data.username + "</a></b>.";
}
@ -112,4 +112,9 @@
document.querySelector('.notifications a i').className = 'icon-circle active';
});
socket.emit('api:notifications.counts');
require(['mobileMenu'], function(mobileMenu) {
mobileMenu.init();
});
}());

@ -0,0 +1,81 @@
define(function() {
var mobileMenu = {};
var categories = null,
overlay = null,
menuBtn = null;
function loadCategories(callback) {
if (categories) {
displayCategories();
return;
}
jQuery.getJSON('/api/home', function(data) {
categories = data.categories;
displayCategories();
});
}
function displayCategories() {
var baseIcon = document.createElement('a'),
baseImage = document.createElement('i'),
baseName = document.createElement('span');
baseIcon.className = 'mobile-menu-icon';
for (var i=0, ii=categories.length; i<ii; i++) {
var icon = baseIcon.cloneNode(true),
image = baseImage.cloneNode(true),
name = baseName.cloneNode(true);
var category = categories[i];
image.className = category.icon + ' icon-3x';
name.innerHTML = '<br />' + category.name;
icon.appendChild(image);
icon.appendChild(name);
icon.src = 'category/' + category.slug;
icon.onclick = function() {
jQuery('.mobile-menu-icon').toggleClass('menu-visible');
setTimeout(function() {
jQuery(overlay).toggleClass('menu-visible');
}, 200);
ajaxify.go(this.src);
}
overlay.appendChild(icon);
}
}
function animateIcons() {
jQuery(overlay).toggleClass('menu-visible');
setTimeout(function() {
jQuery('.mobile-menu-icon').toggleClass('menu-visible');
}, 100);
}
mobileMenu.init = function() {
overlay = overlay || document.getElementById('mobile-menu-overlay');
menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
menuBtn.onclick = function() {
animateIcons();
}
loadCategories(displayCategories);
}
return {
init: mobileMenu.init
}
});

@ -74,5 +74,6 @@
<input type="hidden" template-variable="yourid" value="{yourid}" />
<input type="hidden" template-variable="theirid" value="{theirid}" />
<input type="hidden" template-variable="isFriend" value="{isFriend}" />
<script type="text/javascript" src="/src/forum/account.js"></script>

@ -11,6 +11,9 @@
<footer class="footer">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.com">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></footer>
</div>
<div id="mobile-menu">
<button id="mobile-menu-btn" type="button" class="btn btn-none"><i class="icon-th icon-2x"></i></button>
</div>
<script type="text/javascript" src="/src/forum/footer.js"></script>
<!-- END Forum Info -->
</body>

@ -31,7 +31,9 @@
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div id="mobile-menu-overlay">
</div>
<div class="navbar navbar-inverse navbar-fixed-top" id="header-menu">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">NodeBB</a>

Loading…
Cancel
Save