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

removed mobile menu until it can be pluginified. refactored topics UX a hell of a lot, looks much better on both desktop+mobile now.

Browse Source
v1.18.x
psychobunny 12 years ago
parent 13e13cd5a8
commit 346681ba27
6 changed files with 297 additions and 98 deletions
Show Stats Download Patch File Download Diff File

124
public/css/topic.less
Unescape Escape View File

@ -42,6 +42,9 @@
}
}
.post-signature {
margin-left: 5px;
}
.profile-block {
background: rgba(0, 0, 0, 0.02);
margin-right: -11px;
@ -50,9 +53,10 @@
margin-top: 15px;
border-radius: 0 0 5px 5px;
font-size: 10px;
line-height: 18px;
line-height: 15px;
padding: 5px;
padding-left: 10px;
color: #777;
img.hidden-desktop {
max-width: 10px;
@ -64,7 +68,7 @@
}
.post-content {
min-height: 50px;
padding: 2px 5px 0 5px;
padding: 10px 5px 0 5px;
word-wrap: break-word;
}
@ -74,6 +78,24 @@
.post-block {
.post-buttons {
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
margin-left: 0px;
margin-top: -5px;
padding-top: 8px;
padding-left: 23px;
padding-bottom: 0;
button.show {
display: inline-block !important;
}
@media (max-width: 767px) {
padding-left: 9px;
}
}
/*.post-buttons {
font-size: 12px;
float: right;
margin-right: 5px;
@ -100,7 +122,7 @@
.icon-star {
//theme this to make it yellow eventually
}
}
}*/
}
@ -129,7 +151,7 @@
left: -7px;
border-style: solid;
border-width: 7px 7px 7px 0;
border-color: transparent #FFFFFF;
border-color: transparent rgb(250,250,250);
display: block;
width: 0;
z-index: 1;
@ -150,6 +172,27 @@
}
}
.sub-posts {
.post-content {
margin-left: 10px;
}
.post-signature {
margin-left: 15px;
}
.img-thumbnail {
padding: 2px;
border-radius: 0;
margin-left: 16px;
}
.post-buttons {
margin-top: -11px;
margin-left: -10px;
margin-right: -10px;
border-right: 0;
border-top: 0;
border-left: 0;
}
}
.main-post {
h3 {
margin: 0;
@ -169,16 +212,20 @@
color: white;
position: relative;
float: left;
margin-right: 25px;
margin-right:10px;
margin-bottom: 0px;
padding-bottom: 0px;
text-align: center;
width:80px;
width:100px;
@media (max-width: 767px) {
display: none;
}
}
.img-thumbnail {
padding: 2px;
border-radius: 0;
}
.main-avatar:hover .hover-overlay {
opacity: 0.75;
@ -208,9 +255,10 @@
}
.post-block {
.post-buttons {
div {
border: 0;
button.show {
display: inline-block!important;
}
}
}
.favourite {
@ -220,7 +268,19 @@
display: inline-block;
}
.topic-buttons {
.topic-buttons { //mix up with post-buttons, needs to be looked at
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
margin-left: 92px;
padding: 10px;
margin-right: -11px;
border-right: 0;
@media (max-width: 767px) {
margin-left: -11px;
border-left: 0;
}
button.show {
display: inline-block!important;
}
@ -230,3 +290,49 @@
}
.topic-main-buttons {
@media (max-width: 767px) {
margin-bottom: 0px;
}
}
@media (max-width: 475px) {
.post-tools {
display: none;
}
.favourite-text {
display: none;
}
}
.post-author-info {
display: none;
@media (max-width: 767px) {
display: block;
position: fixed;
width: 100%;
margin-left: -15px;
bottom: -50px;
height: 50px;
background: rgba(0,0,0,0.8);
-webkit-transition: bottom 150ms linear;
-moz-transition: bottom 150ms linear;
-ms-transition: bottom 150ms linear;
-o-transition: bottom 150ms linear;
transition: bottom 150ms linear;
}
img {
padding: 5px;
}
h4 {
color: white;
margin-top:16px;
margin-left: -35px;
margin-bottom: 0px;
font-weight: 300;
font-size: 16px;
}
}

40
public/src/forum/topic.js
Unescape Escape View File

@ -600,4 +600,44 @@
deleteEl.addClass('none');
}
}
var postAuthorImage, postAuthorInfo;
function updateHeader() {
jQuery('.post-author-info').css('bottom', '0px');
postAuthorImage = postAuthorImage || document.getElementById('post-author-image');
postAuthorInfo = postAuthorInfo || document.getElementById('post-author-info');
var scrollTop = jQuery(window).scrollTop();
var scrollBottom = scrollTop + jQuery(window).height();
if (scrollTop < 50) {
postAuthorImage.src = (jQuery('.main-avatar img').attr('src'));
postAuthorInfo.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html();
return;
}
jQuery('.sub-posts').each(function() {
var el = jQuery(this);
var elTop = el.offset().top;
var height = Math.floor(el.height());
var elBottom = elTop + (height < 300 ? height : 300);
var inView = ((elBottom >= scrollTop) && (elTop <= scrollBottom)
&& (elBottom <= scrollBottom) && (elTop >= scrollTop) );
if (inView) {
postAuthorImage.src = (jQuery(this).find('.profile-image-block img').attr('src'));
postAuthorInfo.innerHTML = 'Posted by ' + jQuery(this).attr('data-username') + ', ' + jQuery(this).find('.relativeTimeAgo').html();
}
});
}
window.onscroll = updateHeader;
window.onload = updateHeader;
})();

5
public/src/modules/mobileMenu.js
Unescape Escape View File

@ -99,10 +99,11 @@ define(function() {
mobileMenu.init = function() {
return; // disabling until this can be pluginified.
overlay = overlay || document.getElementById('mobile-menu-overlay');
menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
postBtn = postBtn || document.getElementById('mobile-post-btn');
menuBtn.onclick = function() {
animateIcons();
}
@ -111,7 +112,7 @@ define(function() {
displayCategories();
mobileMenu.onNavigate();
});
}
return {

12
public/templates/footer.tpl
Unescape Escape View File

@ -28,8 +28,8 @@
<div id="alert_window"></div>
<div id="mobile-sidebar">
</div>
<!--<div id="mobile-sidebar"> disabling until this can be pluginified.
</div>-->
<!-- START Forum Info -->
<div id="footer" class="container hidden-xs" style="padding-top: 50px; display: none">
@ -41,15 +41,15 @@
<footer class="footer">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.org">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></footer>
</div>
<div id="mobile-menu">
<!--<div id="mobile-menu"> disabling until this can be pluginified.
<button id="mobile-menu-btn" type="button" class="btn btn-none"><i class="icon-th icon-2x"></i></button>
<button id="mobile-post-btn" type="button" class="btn btn-none"><i class="icon-plus icon-2x"></i></button>
</div>
</div>-->
<!-- END Forum Info -->
<script>
$.getScript(RELATIVE_PATH + '/src/forum/footer.js');
</script>
</body>
</html>

24
public/templates/header.tpl
Unescape Escape View File

@ -31,28 +31,8 @@
</head>
<body>
<div id="mobile-menu-overlay">
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!--<div id="mobile-menu-overlay"> disabling until this can be pluginified.
</div>-->
<div class="navbar navbar-inverse navbar-fixed-top" id="header-menu">
<div class="container">

190
public/templates/topic.tpl
Unescape Escape View File

@ -17,49 +17,54 @@
<!-- BEGIN main_posts -->
<a id="post_anchor_{main_posts.pid}" name="{main_posts.pid}"></a>
<li class="row post-row main-post" data-pid="{main_posts.pid}" data-uid="{main_posts.uid}" data-deleted="{main_posts.deleted}">
<li class="row post-row main-post" data-pid="{main_posts.pid}" data-uid="{main_posts.uid}" data-username="{main_posts.username}" data-deleted="{main_posts.deleted}">
<div class="col-md-12">
<div class="post-block">
<a class="main-avatar" href="/users/{main_posts.userslug}">
<img src="{main_posts.picture}" align="left" class="img-thumbnail"/><br />
<div class="hover-overlay">
{main_posts.username}<br />
<i class="icon-star"></i><span class="user_rep_{main_posts.uid}">{main_posts.user_rep}</span>
<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">{main_posts.user_postcount}</span>
</div>
</a>
<h3><p id="topic_title_{main_posts.pid}" class="topic-title">{topic_name}</p></h3>
<div class="main-post-buttons">
<a class="main-avatar" href="/users/{main_posts.userslug}">
<img src="{main_posts.picture}" align="left" class="img-thumbnail" width=150 height=150 /><br />
<!--<div class="hover-overlay">
{main_posts.username}<br />
<i class="icon-star"></i><span class="user_rep_{main_posts.uid}">{main_posts.user_rep}</span>
<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">{main_posts.user_postcount}</span>
</div>-->
</a>
<h3><p id="topic_title_{main_posts.pid}" class="topic-title">{topic_name}</p></h3>
<div class="topic-buttons pull-left">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {main_posts.username}">
<span class="username-field" href="/users/{main_posts.userslug}">{main_posts.username}</span>
<span class="caret"></span>
</button>
<div class="topic-buttons" >
<div class="btn-group">
<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {main_posts.username}">
<span class="username-field" href="/users/{main_posts.userslug}">{main_posts.username}&nbsp;</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Chat</a></li>
</ul>
</div>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Chat</a></li>
</ul>
</div>
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-default edit {main_posts.display_moderator_tools}" type="button" title="Edit"><i class="icon-pencil"></i></button>
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-default delete {main_posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button>
<div class="btn-group">
<button class="btn btn-default follow" type="button" title="Be notified of new replies in this topic"><i class="icon-eye-open"></i></button>
<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn btn-default {main_posts.fav_button_class}" type="button">
<span>Favourite</span>
<span class="post_rep_{main_posts.pid}">{main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i>
</button>
</div>
<div class="btn-group">
<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn btn-default quote" type="button" title="Quote"><i class="icon-quote-left"></i></button>
<button class="btn btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
<div class="btn-group">
<button class="btn btn-sm btn-default follow" type="button" title="Be notified of new replies in this topic"><i class="icon-eye-open"></i></button>
<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn btn-sm btn-default {main_posts.fav_button_class}" type="button">
<span class="favourite-text">Favourite</span>
<span class="post_rep_{main_posts.pid}">{main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i>
</button>
</div>
<div class="btn-group">
<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn btn-sm btn-default quote" type="button" title="Quote"><i class="icon-quote-left"></i></button>
<button class="btn btn-sm btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
</div>
<div class="btn-group pull-right post-tools">
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-sm btn-default edit {main_posts.display_moderator_tools}" type="button" title="Edit"><i class="icon-pencil"></i></button>
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-sm btn-default delete {main_posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button>
</div>
</div>
<div style="clear:both; margin-bottom: 10px;"></div>
</div>
<div style="clear:both; margin-bottom: 10px;"></div>
<div id="content_{main_posts.pid}" class="post-content">{main_posts.content}</div>
<div id="images_{main_posts.pid}" class="post-images">
@ -69,16 +74,24 @@
</div>
<div class="post-signature">{main_posts.signature}</div>
<div class="profile-block">
posted {main_posts.relativeTime} ago
<span class="pull-right">
posted <span class="relativeTimeAgo">{main_posts.relativeTime} ago</span>
<span class="{main_posts.edited-class}">| last edited by <strong><a href="/users/{main_posts.editorslug}">{main_posts.editorname}</a></strong> {main_posts.relativeEditTime} ago</span>
</span>
<div style="clear:both;"></div>
</div>
<!--<div class="profile-block">-->
<!--Posted {main_posts.relativeTime} ago
<span class="{main_posts.edited-class} hidden-xs">| last edited by <strong><a href="/users/{main_posts.editorslug}">{main_posts.editorname}</a></strong> {main_posts.relativeEditTime} ago</span>
<span class="{main_posts.edited-class}"><i class="icon-edit visible-xs" title="edited by {main_posts.editorname} {main_posts.relativeEditTime} ago"></i></span>
<div class="post-buttons visible-xs">
<button class="post_reply btn-link"><i class="icon-reply"></i></button>
</div>
<div class="post-buttons">
</div>-->
<!--<div class="post-buttons">
<a href="../{topic_id}.rss" target="_blank"><i class="icon-rss"></i></a>
</div>
</div>
</div>-->
<!--</div>-->
</div>
</div>
</li>
@ -86,20 +99,56 @@
<!-- BEGIN posts -->
<a id="post_anchor_{posts.pid}" name="{posts.pid}"></a>
<li class="row post-row" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}">
<li class="row post-row sub-posts" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}">
<div class="col-md-1 profile-image-block hidden-xs hidden-sm">
<!--<i class="icon-spinner icon-spin icon-2x pull-left"></i>-->
<a href="/users/{posts.userslug}">
<img src="{posts.picture}" align="left" class="img-thumbnail"/>
<img src="{posts.picture}" align="left" class="img-thumbnail" />
</a>
<div class="stats">
<!--<div class="stats">
<i class="icon-star"></i><span class="user_rep_{posts.uid} formatted-number">{posts.user_rep}</span>
<div id="ids_{posts.pid}_{posts.uid}" class="chat hidden-xs" title="Chat"><i class="icon-comment"></i></div>
</div>
</div>-->
<span class="label label-danger {posts.show_banned}">banned</span>
</div>
<div class="col-md-11">
<div class="post-block speech-bubble">
<div class="post-buttons">
<div class="topic-buttons
">
<div class="btn-group">
<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {posts.username}">
<span class="username-field" href="/users/{posts.userslug}">{posts.username}&nbsp;</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Chat</a></li>
</ul>
</div>
<div class="btn-group">
<button id="favs_{posts.pid}_{posts.uid}" class="favourite btn btn-sm btn-default {posts.fav_button_class}" type="button">
<span class="favourite-text">Favourite</span>
<span class="post_rep_{posts.pid}">{posts.post_rep} </span><i class="{posts.fav_star_class}"></i>
</button>
</div>
<div class="btn-group">
<button id="quote_{posts.pid}_{posts.uid}" class="btn btn-sm btn-default quote" type="button" title="Quote"><i class="icon-quote-left"></i></button>
<button class="btn btn-sm btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
</div>
<div class="btn-group pull-right post-tools">
<button id="ids_{posts.pid}_{posts.uid}" class="btn btn-sm btn-default edit {posts.display_moderator_tools}" type="button" title="Edit"><i class="icon-pencil"></i></button>
<button id="ids_{posts.pid}_{posts.uid}" class="btn btn-sm btn-default delete {posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button>
</div>
</div>
<div style="clear:both; margin-bottom: 7px;"></div>
</div>
<div id="content_{posts.pid}" class="post-content">{posts.content}</div>
<div id="images_{posts.pid}" class="post-images">
<!-- BEGIN uploadedImages -->
@ -108,35 +157,58 @@
</div>
<div class="post-signature">{posts.signature}</div>
<div class="profile-block">
<span class="post-buttons">
<span class="pull-right">
posted <span class="relativeTimeAgo">{posts.relativeTime} ago</span>
<span class="{posts.edited-class}">| last edited by <strong><a href="/users/{posts.editorslug}">{posts.editorname}</a></strong> {posts.relativeEditTime} ago</span>
</span>
<div style="clear:both;"></div>
</div>
<!--<div class="profile-block">-->
<!--<span class="post-buttons">
<button id="ids_{posts.pid}_{posts.uid}" class="edit {posts.display_moderator_tools} btn-link" title="Edit"><i class="icon-pencil"></i></button>
<button id="ids_{posts.pid}_{posts.uid}" class="delete {posts.display_moderator_tools} btn-link" title="Delete"><i class="icon-trash"></i></button>
<button id="favs_{posts.pid}_{posts.uid}" class="favourite btn-link" title="Favourite"><span class="post_rep_{posts.pid}">{posts.post_rep} </span><i class="{posts.fav_star_class}"></i></button>
<button id="quote_{posts.pid}_{posts.uid}" class="quote btn-link" title="Quote"><i class="icon-quote-left"></i></button>
<button class="post_reply btn-link" title="Reply"><i class="icon-reply"></i></button>
</span>
<img class="hidden-lg hidden-md" src="{posts.picture}" align="left" /> posted by <strong><a class="username-field" href="/users/{posts.userslug}">{posts.username}</a></strong> {posts.relativeTime} ago
<span class="{posts.edited-class}">| last edited by <strong><a href="/users/{posts.editorslug}">{posts.editorname}</a></strong> {posts.relativeEditTime} ago</span>
</span>-->
<!--Posted by <strong><a class="username-field" href="/users/{posts.userslug}">{posts.username}</a></strong> {posts.relativeTime} ago-->
<!--<span class="{posts.edited-class}">| last edited by <strong><a href="/users/{posts.editorslug}">{posts.editorname}</a></strong> {posts.relativeEditTime} ago</span>
<span class="{posts.edited-class}"><i class="icon-edit visible-xs" title="edited by {posts.editorname} {posts.relativeEditTime} ago"></i></span>
</div>
</div>-->
</div>
</div>
</li>
<!-- END posts -->
</ul>
<hr />
<button id="post_reply" class="btn btn-primary btn-lg post_reply" type="button">Reply</button>
<div class="btn-group pull-right" id="thread-tools" style="visibility: hidden;">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">Thread Tools <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" id="pin_thread"><i class="icon-pushpin"></i> Pin Thread</a></li>
<li><a href="#" id="lock_thread"><i class="icon-lock"></i> Lock Thread</a></li>
<li class="divider"></li>
<li><a href="#" id="move_thread"><i class="icon-move"></i> Move Thread</a></li>
<li class="divider"></li>
<li><a href="#" id="delete_thread"><span class="text-error"><i class="icon-trash"></i> Delete Thread</span></a></li>
</ul>
<div class="topic-main-buttons">
<button id="post_reply" class="btn btn-primary btn-lg post_reply" type="button">Reply</button>
<div class="btn-group pull-right" id="thread-tools" style="visibility: hidden;">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">Thread Tools <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" id="pin_thread"><i class="icon-pushpin"></i> Pin Thread</a></li>
<li><a href="#" id="lock_thread"><i class="icon-lock"></i> Lock Thread</a></li>
<li class="divider"></li>
<li><a href="#" id="move_thread"><i class="icon-move"></i> Move Thread</a></li>
<li class="divider"></li>
<li><a href="#" id="delete_thread"><span class="text-error"><i class="icon-trash"></i> Delete Thread</span></a></li>
</ul>
</div>
</div>
<div class="post-author-info">
<div class="row">
<div class="col-xs-3">
<img id="post-author-image" src="http://www.gravatar.com/avatar/ec001b26766105ea038160c98a317956?size=128&default=identicon&rating=pg" width=50 height=50 />
</div>
<div class="col-xs-9">
<h4><div id="post-author-info"></div></h4>
</div>
</div>
</div>
<div id="move_thread_modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

Write Preview
Loading…
Cancel
Save