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

Merge branch 'mobile-menu'

Browse Source
main
psychobunny 10 years ago
parent a65429269b e40d38c0c7
commit c0180f6985
11 changed files with 359 additions and 213 deletions
Show Stats Download Patch File Download Diff File

211
less/header.less
Unescape Escape View File

@ -1,3 +1,113 @@
#menu, .header {
#notif-list {
overflow-x: hidden;
overflow-y: auto;
max-height: 250px;
padding: 0;
li {
font-size: 12px;
width: 300px;
text-align: left;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
padding: 0.5em;
clear: both;
img {
max-width: 32px;
max-height: 32px;
float: left;
border-radius: 50%;
}
a {
color: @text-color;
white-space: normal;
overflow: hidden;
margin: 0;
// padding: 3px 5px 3px 20px;
text-overflow: ellipsis;
.text {
margin-left: 40px;
margin-right: 50px;
display: block;
min-height: 32px;
}
}
&.unread {
.bg-variant(@state-warning-bg);
.mark-read:after {
content: "\f111";
}
.mark-read:hover:after {
content: "\f10c";
}
}
.mark-read {
color: @text-muted;
&:after {
font-family: "FontAwesome";
content: "\f10c";
padding: 4px 1rem;
position: relative;
top: 1px;
}
&:hover {
color: @gray-dark;
.pointer;
&:after {
content: "\f111";
}
}
}
}
}
.chat-list {
#notif-list;
li {
.pointer;
width: 200px;
font-size: 16px;
a {
white-space: nowrap;
line-height: 30px;
position: relative;
i {
position: absolute;
left: -26px;
}
img {
width: 32px;
margin-right: 1em;
border-radius: 50%;
}
}
&.no_active a {
text-align: center;
white-space: normal;
}
}
}
}
.header {
[component="navbar/title"] {
@ -108,81 +218,6 @@
}
}
#notif-list {
overflow-x: hidden;
overflow-y: auto;
max-height: 250px;
padding: 0;
li {
font-size: 12px;
width: 300px;
text-align: left;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
padding: 0.5em;
clear: both;
img {
max-width: 32px;
max-height: 32px;
float: left;
border-radius: 50%;
}
a {
color: @text-color;
white-space: normal;
overflow: hidden;
margin: 0;
// padding: 3px 5px 3px 20px;
text-overflow: ellipsis;
.text {
margin-left: 40px;
margin-right: 50px;
display: block;
min-height: 32px;
}
}
&.unread {
.bg-variant(@state-warning-bg);
.mark-read:after {
content: "\f111";
}
.mark-read:hover:after {
content: "\f10c";
}
}
.mark-read {
color: @text-muted;
&:after {
font-family: "FontAwesome";
content: "\f10c";
padding: 4px 1rem;
position: relative;
top: 1px;
}
&:hover {
color: @gray-dark;
.pointer;
&:after {
content: "\f111";
}
}
}
}
}
.notif-dropdown-link {
// margin-top: 1em;
border-top: 1px solid rgba(163, 163, 163, 0.5);
@ -194,34 +229,8 @@
font-weight: 600;
}
}
#chat-list {
#notif-list;
li {
.pointer;
width: 200px;
a {
white-space: nowrap;
line-height: 30px;
img {
width: 32px;
margin-right: 1em;
border-radius: 50%;
}
}
&.no_active a {
text-align: center;
white-space: normal;
}
}
}
}
.breadcrumb {
li {
max-width: 100%;

143
less/mobile.less
Unescape Escape View File

@ -0,0 +1,143 @@
@media (max-width: 980px) {
html {
height: 100%;
overflow-y: hidden;
}
body {
height: 100%;
padding-top: 0;
padding-bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
#panel {
background: @body-bg;
min-height: 100%;
padding-top: 80px;
}
#menu {
padding-top: 100px;
background-color: #1D1F20;
background-image: linear-gradient(145deg, #1D1F20, #404348);
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.chat-list li {
width: auto;
a {
color: white;
i {
left: 42px;
}
}
}
}
.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;
}
}
.slideout-menu {
position: fixed;
left: auto;
top: 0;
bottom: 0;
right: 0;
z-index: 0;
width: 256px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: none;
}
.slideout-panel {
position: relative;
z-index: 1;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
overflow-y: hidden !important;
}
.slideout-open .slideout-menu {
display: block;
}
.slideout-open {
overflow-y: hidden;
height: 100%;
}
.menu-profile {
text-align: center;
background: #101010;
position: fixed;
height: 75px;
width: 100%;
top: 0px;
z-index: 1;
img {
position: absolute;
bottom: -22px;
left: 93px;
width: 70px;
height: 70px;
border-radius: 50%;
}
i {
position: absolute;
left: 145px;
font-size: 21px;
top: 28px;
}
}
}

2
less/persona.less
Unescape Escape View File

@ -18,7 +18,7 @@
@import "posts_list";
@import "register";
@import "slide-menu";
@import "mobile";
@import "helpers";
@import "keyframes";

50
less/slide-menu.less
Unescape Escape View File

@ -1,50 +0,0 @@
@media (max-width: @screen-xs-max) {
#header-menu #nav-dropdown.navbar-slide-in {
width: 45%;
background: @gray-dark;
right: -45%;
min-height: 1000px;
position: fixed;
margin-top: -20px;
padding: 20px;
box-shadow: inset 2px 0px 12px black;
top: 0px;
a, a:hover, a:focus, a:active {
color: @gray-lighter;
}
> ul {
overflow: hidden;
> li {
.transition(.40s ease-in-out transform);
transform: translate3d(-50px, 0, 0);
-webkit-transform: translate3d(-50px, 0, 0);
}
border-bottom: 1px solid lighten(@gray-dark, 10%);
}
}
#header-menu .navbar-nav>.active>a,
#header-menu .navbar-nav>.active>a:focus,
#header-menu .navbar-nav>.open>a,
#header-menu .navbar-nav>.open>a:focus {
background: inherit;
}
body {
.transition(.40s ease-in-out transform);
&.slide-in {
transform: translate3d(-45%, 0, 0);
-webkit-transform: translate3d(-45%, 0, 0);
#header-menu #nav-dropdown.navbar-slide-in > ul > li {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
}
}
}

1
lib/modules/slideout.min.js vendored
View File

File diff suppressed because one or more lines are too long

92
lib/persona.js
Unescape Escape View File

@ -3,9 +3,11 @@
/*globals ajaxify, config, utils, NProgress*/
$(document).ready(function() {
setupSlideMenu();
setupNProgress();
setupTaskbar();
setupEditedByIcon();
setupPaginator();
setupMobileMenu();
var env = utils.findBootstrapEnvironment();
@ -15,50 +17,17 @@ $(document).ready(function() {
});
}
function setupSlideMenu() {
$('[data-toggle="slide-in"]').on('click', function(ev) {
$('body').toggleClass('slide-in');
if ($('body').hasClass('slide-in')) {
var top = ($('html').scrollTop() || $('body').scrollTop()) + $('header-menu').height(),
transform = 'translate3d(0, ' + top + 'px, 0)';
$('#header-menu').css({
'-webkit-transform': transform,
'-moz-transform': transform,
'-ms-transform': transform,
'-o-transform': transform,
'transform': transform
});
$('html').css('overflow-y', 'hidden');
} else {
$('body').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
$('#header-menu').css({
'-webkit-transform': 'none',
'-moz-transform': 'none',
'-ms-transform': 'none',
'-o-transform': 'none',
'transform': 'none'
});
$('html').css('overflow-y', '');
});
}
});
function setupNProgress() {
$(window).on('action:ajaxify.start', function() {
if ($('body').hasClass('slide-in')) {
$('.navbar-header button').click();
}
NProgress.set(0.7);
});
$(window).on('action:ajaxify.end', function() {
NProgress.done();
});
}
function setupTaskbar() {
$(window).on('filter:taskbar.push', function(ev, data) {
data.options.className = 'taskbar-' + data.module;
@ -189,5 +158,54 @@ $(document).ready(function() {
$(window).on('action:posts.loading', appendPageNumber);
}
function setupMobileMenu() {
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
$('#mobile-menu').on('click', function() {
if (!slideout.isOpen()) {
require(['chat', 'notifications'], function(chat, notifications) {
chat.loadChats($('#menu [data-section="chats"] ul'));
notifications.loadNotifications($('#menu [data-section="notifications"] ul'));
});
}
slideout.toggle();
});
$('#menu a').on('click', function() {
slideout.close();
});
$(window).on('resize', function() {
slideout.close();
});
function onOpeningMenu() {
$('#header-menu').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-menu').css({
'top': '0px',
'position': 'fixed'
});
});
$('#menu [data-section="navigation"] ul').html($('#main-nav').html());
$('#menu [data-section="profile"] ul').html($('#user-control-list').html())
.find('[component="user/status"]').remove();
}
});

4
package.json
Unescape Escape View File

@ -1,8 +1,8 @@
{
"name": "nodebb-theme-persona",
"version": "2.0.28",
"version": "2.1.0",
"nbbpm": {
"compatibility": "^0.7.1"
"compatibility": "^0.7.4"
},
"description": "Persona theme for NodeBB",
"main": "theme.less",

3
plugin.json
Unescape Escape View File

@ -4,6 +4,7 @@
"scripts": [
"lib/persona.js",
"lib/modules/nprogress.js",
"lib/modules/autohidingnavbar.min.js"
"lib/modules/autohidingnavbar.min.js",
"lib/modules/slideout.min.js"
]
}

1
templates/footer.tpl
Unescape Escape View File

@ -1,4 +1,5 @@
</div><!--END container -->
</main>
<div class="hide tpl-500">
<!-- IMPORT 500.tpl -->

28
templates/header.tpl
Unescape Escape View File

@ -38,6 +38,34 @@
</head>
<body>
<nav id="menu" class="visible-xs visible-sm">
<section class="menu-profile">
<img src="{user.picture}"/>
<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i></span>
</section>
<section class="menu-section" data-section="navigation">
<h3 class="menu-section-title">[[global:header.navigation]]</h3>
<ul class="menu-section-list"></ul>
</section>
<section class="menu-section" data-section="profile">
<h3 class="menu-section-title">[[global:header.profile]]</h3>
<ul class="menu-section-list" component="header/usercontrol"></ul>
</section>
<section class="menu-section" data-section="notifications">
<h3 class="menu-section-title">[[global:header.notifications]]</h3>
<ul class="menu-section-list"></ul>
</section>
<section class="menu-section" data-section="chats">
<h3 class="menu-section-title">[[global:header.chats]]</h3>
<ul class="menu-section-list chat-list"></ul>
</section>
</nav>
<main id="panel">
<nav class="navbar navbar-default navbar-fixed-top header" role="navigation" id="header-menu" component="navbar">
<div class="container">
<!-- IMPORT partials/menu.tpl -->

23
templates/partials/menu.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="slide-in" data-target=".navbar-slide-in">
<button type="button" class="navbar-toggle" id="mobile-menu">
<span class="notification-icon fa fa-fw fa-bell-o" data-content="0"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@ -20,19 +20,19 @@
</div>
</div>
<div class="navbar-slide-in" id="nav-dropdown">
<div id="nav-dropdown" class="hidden-xs hidden-sm">
<!-- IF !maintenanceHeader -->
<!-- IF loggedIn -->
<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
<li id="user_label" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]">
<img id="user-header-picture" src="{user.picture}"/> <span id="user-header-name" class="visible-xs-inline">{user.username}</span>
<img component="header/userpicture" src="{user.picture}"/> <span id="user-header-name" class="visible-xs-inline">{user.username}</span>
</a>
<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown">
<li>
<a id="user-profile-link" href="{relative_path}/user/{user.userslug}">
<i class="fa fa-fw fa-circle status {user.status}"></i> <span id="user-header-name">{user.username}</span>
<a component="header/profilelink" href="{relative_path}/user/{user.userslug}">
<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i> <span component="header/username">{user.username}</span>
</a>
</li>
<li role="presentation" class="divider"></li>
@ -88,13 +88,13 @@
</li>
<!-- IF !disableChat -->
<li class="chats dropdown hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown">
<li class="chats dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown">
<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
</a>
<ul class="dropdown-menu" aria-labelledby="chat_dropdown">
<li>
<ul id="chat-list">
<ul component="chat/list" class="chat-list">
<li>
<a href="#"><i class="fa fa-refresh fa-spin"></i> [[global:chats.loading]]</a>
</li>
@ -103,11 +103,6 @@
<li class="notif-dropdown-link"><a href="{relative_path}/chats">[[modules:chat.see_all]]</a></li>
</ul>
</li>
<li class="visible-xs">
<a href="{relative_path}/chats" id="chat_dropdown">
<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
</a>
</li>
<!-- ENDIF !disableChat -->
</ul>
<!-- ELSE -->

Write Preview
Loading…
Cancel
Save