Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-01-06 23:52:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

mobile menu for ACP first pass

Browse Source
This commit is contained in:
psychobunny
2015-08-21 18:40:59 -04:00
parent 82429c10db
commit cc299f89e2
4 changed files with 288 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
public/less/admin/mobile.less
View File

@@ -8,30 +8,8 @@
@media (max-width: 980px) {
body {
padding-top: 90px;
}
#mobile-menu {
width: 31px;
background: none;
border: none;
vertical-align: 10%;
margin-right: 10px;
margin-left: -15px;
outline: none !important;
display: block;
position: absolute;
top: 22px;
left: 22px;
.bar {
width: 100%;
height: 2px;
background: #fff;
margin-bottom: 3px;
border-radius: 10px;
}
//padding-top: 90px;
height: 100%;
}
.header {
@@ -59,7 +37,84 @@
}
}
#mobile-menu {
width: 31px;
background: none;
border: none;
vertical-align: 10%;
margin-right: 10px;
margin-left: -15px;
outline: none !important;
display: block;
position: absolute;
top: 22px;
left: 22px;
.bar {
width: 100%;
height: 2px;
background: #fff;
margin-bottom: 3px;
border-radius: 10px;
}
}
#menu {
background-color: #1D1F20;
background-image: linear-gradient(145deg, #1D1F20, #404348);
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
.menu-header-title {
font-weight: 400;
letter-spacing: 0.5px;
margin: 0;
}
.menu-section {
margin: 25px 0;
}
.menu-section-title {
text-transform: uppercase;
color: #85888d;
font-weight: 200;
font-size: 13px;
letter-spacing: 1px;
padding: 0 20px;
margin:0;
}
.menu-section-list {
padding:0;
margin: 10px 0;
list-style:none;
a {
display: block;
padding: 10px 20px;
}
a:hover {
background-color: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
}
#panel {
background: white;
min-height: 100%;
}
.slideout-menu {
position: fixed;
left: 0;

41
public/src/admin/admin.js
View File

@@ -22,6 +22,8 @@
$('[component="logout"]').on('click', app.logout);
app.alert = launchSnackbar;
configureSlidemenu();
});
socket.emit('admin.config.get', function(err, config) {
@@ -113,4 +115,43 @@
bar.on('click', clickfn);
}
}
function configureSlidemenu() {
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
$('#mobile-menu').on('click', function() {
slideout.toggle();
});
$('#menu a').on('click', function() {
slideout.close();
});
$(window).on('resize', function() {
slideout.close();
});
function onOpeningMenu() {
$('#header').css({
'top': $('#panel').position().top * -1 + 'px',
'position': 'absolute'
});
}
slideout.on('beforeopen', onOpeningMenu);
slideout.on('open', onOpeningMenu);
slideout.on('translate', onOpeningMenu);
slideout.on('close', function() {
$('#header').css({
'top': '0px',
'position': 'fixed'
});
});
}
}());

2
src/views/admin/footer.tpl
View File

@@ -1,4 +1,4 @@
</div>
</div>
</div>

312
src/views/admin/partials/menu.tpl
View File

@@ -1,147 +1,167 @@
<nav class="header">
<div class="pull-left">
<button id="mobile-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
<h1 id="main-page-title"></h1>
</div>
<ul id="user_label" class="pull-right">
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown">
<i class="fa fa-ellipsis-v"></i>
</a>
<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
<li>
<a href="{relative_path}/" target="_blank" title="View Forum">
View Forum
</a>
</li>
<li role="presentation" class="divider"></li>
<li>
<a href="#" class="reload" title="Reload Forum">
Reload Forum
</a>
</li>
<li>
<a href="#" class="restart" title="Restart Forum">
Restart Forum
</a>
</li>
<li role="presentation" class="divider"></li>
<li component="logout">
<a href="#">Log out</a>
</li>
</ul>
</li>
<form class="pull-right hidden-sm hidden-xs" role="search">
<div class="" id="acp-search" >
<div class="dropdown">
<input type="text" data-toggle="dropdown" class="form-control" placeholder="Search...">
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
<nav id="menu" class="visible-xs visible-sm">
<section class="menu-section">
<h3 class="menu-section-title">General</h3>
<ul class="menu-section-list">
<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
<li><a href="{relative_path}/admin/general/navigation">Navigation</a></li>
<li><a href="{relative_path}/admin/general/languages">Languages</a></li>
<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
</ul>
</section>
<section class="menu-section">
<h3 class="menu-section-title">Product</h3>
<ul class="menu-section-list">
</ul>
</section>
</nav>
<main id="panel">
<nav class="header">
<div class="pull-left">
<button id="mobile-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
<h1 id="main-page-title"></h1>
</div>
<ul id="user_label" class="pull-right">
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown">
<i class="fa fa-ellipsis-v"></i>
</a>
<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
<li>
<a href="{relative_path}/" target="_blank" title="View Forum">
View Forum
</a>
</li>
<li role="presentation" class="divider"></li>
<li>
<a href="#" class="reload" title="Reload Forum">
Reload Forum
</a>
</li>
<li>
<a href="#" class="restart" title="Restart Forum">
Restart Forum
</a>
</li>
<li role="presentation" class="divider"></li>
<li component="logout">
<a href="#">Log out</a>
</li>
</ul>
</li>
<form class="pull-right hidden-sm hidden-xs" role="search">
<div class="" id="acp-search" >
<div class="dropdown">
<input type="text" data-toggle="dropdown" class="form-control" placeholder="Search...">
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</div>
</div>
</div>
</form>
</ul>
<ul id="main-menu">
<li class="menu-item">
<a href="{relative_path}/admin/general/dashboard">Dashboard</a>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">General</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
<li><a href="{relative_path}/admin/general/navigation">Navigation</a></li>
<li><a href="{relative_path}/admin/general/languages">Languages</a></li>
<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/manage/categories">Categories</a></li>
<li><a href="{relative_path}/admin/manage/tags">Tags</a></li>
<li><a href="{relative_path}/admin/manage/users">Users</a></li>
<li><a href="{relative_path}/admin/manage/registration">Registration Queue</a></li>
<li><a href="{relative_path}/admin/manage/groups">Groups</a></li>
<li><a href="{relative_path}/admin/manage/flags">Flags</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Settings</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/settings/general">General</a></li>
<li><a href="{relative_path}/admin/settings/reputation">Reputation</a></li>
<li><a href="{relative_path}/admin/settings/email">Email</a></li>
<li><a href="{relative_path}/admin/settings/user">User</a></li>
<li><a href="{relative_path}/admin/settings/group">Group</a></li>
<li><a href="{relative_path}/admin/settings/guest">Guests</a></li>
<li><a href="{relative_path}/admin/settings/post">Post</a></li>
<li><a href="{relative_path}/admin/settings/pagination">Pagination</a></li>
<li><a href="{relative_path}/admin/settings/tags">Tags</a></li>
<li><a href="{relative_path}/admin/settings/notifications">Notifications</a></li>
<li><a href="{relative_path}/admin/settings/web-crawler">Web Crawler</a></li>
<li><a href="{relative_path}/admin/settings/sockets">Sockets</a></li>
<li><a href="{relative_path}/admin/settings/advanced">Advanced</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Appearance</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/appearance/themes">Themes</a></li>
<li><a href="{relative_path}/admin/appearance/skins">Skins</a></li>
<li><a href="{relative_path}/admin/appearance/customise">Custom HTML &amp; CSS</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Extend</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/extend/plugins">Plugins</a></li>
<li><a href="{relative_path}/admin/extend/widgets">Widgets</a></li>
<li><a href="{relative_path}/admin/extend/rewards">Rewards</a></li>
</ul>
</li>
<!-- IF authentication.length -->
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Social Authentication</a>
<ul class="dropdown-menu" role="menu">
<!-- BEGIN authentication -->
<li>
<a href="{relative_path}/admin{authentication.route}">{authentication.name}</a>
</li>
<!-- END authentication -->
</ul>
</li>
<!-- ENDIF authentication.length -->
<!-- IF plugins.length -->
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Plugins</a>
<ul class="dropdown-menu" role="menu">
<!-- BEGIN plugins -->
<li>
<a href="{relative_path}/admin{plugins.route}">{plugins.name}</a>
</li>
<!-- END plugins -->
<li class="divider"></li>
<li data-link="1">
<a href="{relative_path}/admin/extend/plugins">Install Plugins</a>
</li>
</ul>
</li>
<!-- ENDIF plugins.length -->
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Advanced</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/advanced/database">Database</a></li>
<li><a href="{relative_path}/admin/advanced/events">Events</a></li>
<li><a href="{relative_path}/admin/advanced/logs">Logs</a></li>
<li><a href="{relative_path}/admin/advanced/post-cache">Post Cache</a></li>
<!-- IF env -->
<li><a href="{relative_path}/admin/development/logger">Logger</a></li>
<!-- ENDIF env -->
</ul>
</li>
</ul>
</nav>
</form>
</ul>
<ul id="main-menu">
<li class="menu-item">
<a href="{relative_path}/admin/general/dashboard">Dashboard</a>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">General</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
<li><a href="{relative_path}/admin/general/navigation">Navigation</a></li>
<li><a href="{relative_path}/admin/general/languages">Languages</a></li>
<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/manage/categories">Categories</a></li>
<li><a href="{relative_path}/admin/manage/tags">Tags</a></li>
<li><a href="{relative_path}/admin/manage/users">Users</a></li>
<li><a href="{relative_path}/admin/manage/registration">Registration Queue</a></li>
<li><a href="{relative_path}/admin/manage/groups">Groups</a></li>
<li><a href="{relative_path}/admin/manage/flags">Flags</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Settings</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/settings/general">General</a></li>
<li><a href="{relative_path}/admin/settings/reputation">Reputation</a></li>
<li><a href="{relative_path}/admin/settings/email">Email</a></li>
<li><a href="{relative_path}/admin/settings/user">User</a></li>
<li><a href="{relative_path}/admin/settings/group">Group</a></li>
<li><a href="{relative_path}/admin/settings/guest">Guests</a></li>
<li><a href="{relative_path}/admin/settings/post">Post</a></li>
<li><a href="{relative_path}/admin/settings/pagination">Pagination</a></li>
<li><a href="{relative_path}/admin/settings/tags">Tags</a></li>
<li><a href="{relative_path}/admin/settings/notifications">Notifications</a></li>
<li><a href="{relative_path}/admin/settings/web-crawler">Web Crawler</a></li>
<li><a href="{relative_path}/admin/settings/sockets">Sockets</a></li>
<li><a href="{relative_path}/admin/settings/advanced">Advanced</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Appearance</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/appearance/themes">Themes</a></li>
<li><a href="{relative_path}/admin/appearance/skins">Skins</a></li>
<li><a href="{relative_path}/admin/appearance/customise">Custom HTML &amp; CSS</a></li>
</ul>
</li>
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Extend</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/extend/plugins">Plugins</a></li>
<li><a href="{relative_path}/admin/extend/widgets">Widgets</a></li>
<li><a href="{relative_path}/admin/extend/rewards">Rewards</a></li>
</ul>
</li>
<!-- IF authentication.length -->
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Social Authentication</a>
<ul class="dropdown-menu" role="menu">
<!-- BEGIN authentication -->
<li>
<a href="{relative_path}/admin{authentication.route}">{authentication.name}</a>
</li>
<!-- END authentication -->
</ul>
</li>
<!-- ENDIF authentication.length -->
<!-- IF plugins.length -->
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Plugins</a>
<ul class="dropdown-menu" role="menu">
<!-- BEGIN plugins -->
<li>
<a href="{relative_path}/admin{plugins.route}">{plugins.name}</a>
</li>
<!-- END plugins -->
<li class="divider"></li>
<li data-link="1">
<a href="{relative_path}/admin/extend/plugins">Install Plugins</a>
</li>
</ul>
</li>
<!-- ENDIF plugins.length -->
<li class="dropdown menu-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Advanced</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{relative_path}/admin/advanced/database">Database</a></li>
<li><a href="{relative_path}/admin/advanced/events">Events</a></li>
<li><a href="{relative_path}/admin/advanced/logs">Logs</a></li>
<li><a href="{relative_path}/admin/advanced/post-cache">Post Cache</a></li>
<!-- IF env -->
<li><a href="{relative_path}/admin/development/logger">Logger</a></li>
<!-- ENDIF env -->
</ul>
</li>
</ul>
</nav>