mirror of
https://github.com/NodeBB/NodeBB.git
synced 2025-11-13 09:25:45 +01:00
mobileMenu module (categories menu), fixed bug I made in account.js when moving code to their own files,
This commit is contained in:
psychobunny
@@ -35,6 +35,10 @@ body {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
@media (max-width: 979px)
|
||||
{
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.none {
|
||||
@@ -521,4 +525,121 @@ 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 {
|
||||
@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%;
|
||||
opacity: 0;
|
||||
|
||||
&.menu-visible {
|
||||
margin-top: 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
}());
|
||||
81
public/src/modules/mobileMenu.js
Normal file
81
public/src/modules/mobileMenu.js
Normal file
@@ -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(overlay).toggleClass('menu-visible');
|
||||
|
||||
setTimeout(function() {
|
||||
jQuery('.mobile-menu-icon').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 © 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>
|
||||
|
||||
@@ -29,7 +29,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>
|
||||
|
||||
Reference in New Issue
Block a user