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 288 additions and 172 deletions
Show Stats Download Patch File Download Diff File

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

@ -8,30 +8,8 @@
@media (max-width: 980px) { @media (max-width: 980px) {
body { body {
padding-top: 90px; //padding-top: 90px;
} height: 100%;
#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;
}
} }
.header { .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 { .slideout-menu {
position: fixed; position: fixed;
left: 0; left: 0;

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

@ -22,6 +22,8 @@
$('[component="logout"]').on('click', app.logout); $('[component="logout"]').on('click', app.logout);
app.alert = launchSnackbar; app.alert = launchSnackbar;
configureSlidemenu();
}); });
socket.emit('admin.config.get', function(err, config) { socket.emit('admin.config.get', function(err, config) {
@ -113,4 +115,43 @@
bar.on('click', clickfn); 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>
</div> </div>

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

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