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

new profile header on mobile menu

Browse Source
main
psychobunny 10 years ago
parent dcad6fcd20
commit 25f36d8e32
3 changed files with 38 additions and 45 deletions
Show Stats Download Patch File Download Diff File

35
less/mobile.less
Unescape Escape View File

@ -19,6 +19,7 @@
} }
#menu { #menu {
padding-top: 100px;
background-color: #1D1F20; background-color: #1D1F20;
background-image: linear-gradient(145deg, #1D1F20, #404348); background-image: linear-gradient(145deg, #1D1F20, #404348);
@ -114,29 +115,29 @@
height: 100%; height: 100%;
} }
.menu-submenu { .menu-profile {
text-align: center; text-align: center;
padding-top: 15px; background: #101010;
position: fixed;
span { height: 75px;
margin: 5px; width: 100%;
position: relative; top: 0px;
z-index: 1;
i {
position: absolute;
right: -3px;
top: -6px;
}
}
img { img {
width: 45px; position: absolute;
height: 45px; bottom: -22px;
left: 93px;
width: 70px;
height: 70px;
border-radius: 50%; border-radius: 50%;
} }
&.active img { i {
border: 2px solid white; position: absolute;
left: 145px;
font-size: 21px;
top: 28px;
} }
} }
} }

23
lib/persona.js
Unescape Escape View File

@ -168,6 +168,12 @@ $(document).ready(function() {
}); });
$('#mobile-menu').on('click', function() { $('#mobile-menu').on('click', function() {
if (!slideout.isOpen()) {
require(['chat'], function(chat) {
chat.loadChats($('#menu [data-section="chats"] ul'));
});
}
slideout.toggle(); slideout.toggle();
}); });
@ -200,22 +206,5 @@ $(document).ready(function() {
$('#menu [data-section="navigation"] ul').html($('#main-nav').html()); $('#menu [data-section="navigation"] ul').html($('#main-nav').html());
$('#menu [data-section="profile"] ul').html($('#user-control-list').html()) $('#menu [data-section="profile"] ul').html($('#user-control-list').html())
.find('[component="user/status"]').remove(); .find('[component="user/status"]').remove();
$('#menu [data-submenu]').each(function() {
var submenuEl = $(this),
submenu = submenuEl.attr('data-submenu');
submenuEl.on('click', function() {
$('#menu [data-section]').addClass('hide');
$('#menu [data-section="' + submenu + '"]').removeClass('hide');
if (submenu === 'chats') {
require(['chat'], function(chat) {
chat.loadChats($('#menu [data-section="chats"] ul'));
});
}
});
});
} }
}); });

25
templates/header.tpl
Unescape Escape View File

@ -39,27 +39,30 @@
<body> <body>
<nav id="menu" class="visible-xs visible-sm"> <nav id="menu" class="visible-xs visible-sm">
<section class="menu-submenu"> <section class="menu-profile">
<span class="pointer"><img data-submenu="navigation" src="{user.picture}"/></span> <img src="{user.picture}"/>
<span class="pointer"><img data-submenu="profile" src="{user.picture}"/><i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i></span> <i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i></span>
<span class="pointer"><img data-submenu="chats" src="{user.picture}"/></span>
<span class="pointer"><img data-submenu="notifications" src="{user.picture}"/></span>
</section> </section>
<section class="menu-section hide" data-section="chats"> <section class="menu-section" data-section="navigation">
<h3 class="menu-section-title">[[global:header.chats]]</h3> <h3 class="menu-section-title">[[global:header.navigation]]</h3>
<ul class="menu-section-list chat-list"></ul> <ul class="menu-section-list"></ul>
</section> </section>
<section class="menu-section hide" data-section="profile"> <section class="menu-section" data-section="profile">
<h3 class="menu-section-title">[[global:header.profile]]</h3> <h3 class="menu-section-title">[[global:header.profile]]</h3>
<ul class="menu-section-list" component="header/usercontrol"></ul> <ul class="menu-section-list" component="header/usercontrol"></ul>
</section> </section>
<section class="menu-section" data-section="navigation"> <section class="menu-section" data-section="notifications">
<h3 class="menu-section-title">[[global:header.navigation]]</h3> <h3 class="menu-section-title">[[global:header.notifications]]</h3>
<ul class="menu-section-list"></ul> <ul class="menu-section-list"></ul>
</section> </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> </nav>
<main id="panel"> <main id="panel">

Write Preview
Loading…
Cancel
Save