hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile menu for ACP first pass

Browse Source
v1.18.x
psychobunny 10 years ago
parent 82429c10db
commit cc299f89e2
4 changed files with 282 additions and 166 deletions
Show Stats Download Patch File Download Diff File

93
public/less/admin/mobile.less
Unescape Escape View File

@ -8,7 +8,33 @@
@media (max-width: 980px) {
body {
padding-top: 90px;
//padding-top: 90px;
height: 100%;
}
.header {
height: 58px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
position: fixed;
top: 0px;
z-index: 1;
#main-page-title {
bottom: -31px;
font-size: 20px;
color: #FFF;
left: 52px;
font-weight: 400;
}
#user_label {
right: 0px;
bottom: 7px;
}
#main-menu {
display: none;
}
}
#mobile-menu {
@ -34,32 +60,61 @@
}
}
.header {
height: 58px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
position: fixed;
top: 0px;
z-index: 1;
#menu {
background-color: #1D1F20;
background-image: linear-gradient(145deg, #1D1F20, #404348);
#main-page-title {
bottom: -31px;
font-size: 20px;
color: #FFF;
left: 52px;
font-weight: 400;
a {
color: #fff;
text-decoration: none;
}
#user_label {
right: 0px;
bottom: 7px;
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;
}
#main-menu {
display: none;
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
Unescape Escape 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
Unescape Escape View File

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

312
src/views/admin/partials/menu.tpl
Unescape Escape 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>
Write Preview
Loading…
Cancel
Save