diff --git a/public/less/admin/mobile.less b/public/less/admin/mobile.less
index 21dd043b29..ed870595bb 100644
--- a/public/less/admin/mobile.less
+++ b/public/less/admin/mobile.less
@@ -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;
diff --git a/public/src/admin/admin.js b/public/src/admin/admin.js
index dd53664a87..2164de5bc6 100644
--- a/public/src/admin/admin.js
+++ b/public/src/admin/admin.js
@@ -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'
+ });
+ });
+ }
}());
\ No newline at end of file
diff --git a/src/views/admin/footer.tpl b/src/views/admin/footer.tpl
index e81d9e6a1a..02f80c73f0 100644
--- a/src/views/admin/footer.tpl
+++ b/src/views/admin/footer.tpl
@@ -1,4 +1,4 @@
-
+ </div>
</div>
</div>
diff --git a/src/views/admin/partials/menu.tpl b/src/views/admin/partials/menu.tpl
index 2e8bb3df00..a6e68d9ba1 100644
--- a/src/views/admin/partials/menu.tpl
+++ b/src/views/admin/partials/menu.tpl
@@ -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 & 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>
\ No newline at end of file
+ </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 & 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>
\ No newline at end of file