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 {
padding-top: 100px;
background-color: #1D1F20;
background-image: linear-gradient(145deg, #1D1F20, #404348);
@ -114,29 +115,29 @@
height: 100%;
}
.menu-submenu {
.menu-profile {
text-align: center;
padding-top: 15px;
span {
margin: 5px;
position: relative;
i {
position: absolute;
right: -3px;
top: -6px;
}
}
background: #101010;
position: fixed;
height: 75px;
width: 100%;
top: 0px;
z-index: 1;
img {
width: 45px;
height: 45px;
position: absolute;
bottom: -22px;
left: 93px;
width: 70px;
height: 70px;
border-radius: 50%;
}
&.active img {
border: 2px solid white;
i {
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() {
if (!slideout.isOpen()) {
require(['chat'], function(chat) {
chat.loadChats($('#menu [data-section="chats"] ul'));
});
}
slideout.toggle();
});
@ -200,22 +206,5 @@ $(document).ready(function() {
$('#menu [data-section="navigation"] ul').html($('#main-nav').html());
$('#menu [data-section="profile"] ul').html($('#user-control-list').html())
.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>
<nav id="menu" class="visible-xs visible-sm">
<section class="menu-submenu">
<span class="pointer"><img data-submenu="navigation" src="{user.picture}"/></span>
<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>
<span class="pointer"><img data-submenu="chats" src="{user.picture}"/></span>
<span class="pointer"><img data-submenu="notifications" src="{user.picture}"/></span>
<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 hide" data-section="chats">
<h3 class="menu-section-title">[[global:header.chats]]</h3>
<ul class="menu-section-list chat-list"></ul>
<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 hide" data-section="profile">
<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="navigation">
<h3 class="menu-section-title">[[global:header.navigation]]</h3>
<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">

Write Preview
Loading…
Cancel
Save