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

serious clean up of topic.less

Browse Source
v1.18.x
psychobunny 12 years ago
parent ac4803961a
commit 19be3bc55c
4 changed files with 185 additions and 213 deletions
Show Stats Download Patch File Download Diff File

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

@ -611,7 +611,7 @@
var postAuthorImage, postAuthorInfo, pagination; var postAuthorImage, mobileAuthorOverlay, pagination;
var postcount = templates.get('postcount'); var postcount = templates.get('postcount');
function updateHeader() { function updateHeader() {
@ -624,9 +624,9 @@
}); });
} }
jQuery('.mobile-author-info').css('bottom', '0px'); jQuery('.mobile-author-overlay').css('bottom', '0px');
postAuthorImage = postAuthorImage || document.getElementById('mobile-author-image'); postAuthorImage = postAuthorImage || document.getElementById('mobile-author-image');
postAuthorInfo = postAuthorInfo || document.getElementById('mobile-author-info'); mobileAuthorOverlay = mobileAuthorOverlay || document.getElementById('mobile-author-overlay');
pagination = pagination || document.getElementById('pagination'); pagination = pagination || document.getElementById('pagination');
pagination.parentNode.style.display = 'block'; pagination.parentNode.style.display = 'block';
@ -637,7 +637,7 @@
if (scrollTop < 50 && postcount > 1) { if (scrollTop < 50 && postcount > 1) {
postAuthorImage.src = (jQuery('.main-avatar img').attr('src')); postAuthorImage.src = (jQuery('.main-avatar img').attr('src'));
postAuthorInfo.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html(); mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html();
pagination.innerHTML = '0 out of ' + postcount; pagination.innerHTML = '0 out of ' + postcount;
return; return;
} }
@ -662,7 +662,7 @@
if (inView) { if (inView) {
pagination.innerHTML = this.postnumber + ' out of ' + postcount; pagination.innerHTML = this.postnumber + ' out of ' + postcount;
postAuthorImage.src = (jQuery(this).find('.profile-image-block img').attr('src')); 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(); mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery(this).attr('data-username') + ', ' + jQuery(this).find('.relativeTimeAgo').html();
} }
}); });

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

@ -18,15 +18,14 @@
<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}"> <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="col-md-12">
<div class="post-block"> <div class="post-block">
<div class="main-post-buttons"> <a class="avatar" href="/users/{main_posts.userslug}">
<a class="main-avatar" href="/users/{main_posts.userslug}">
<img src="{main_posts.picture}" align="left" class="img-thumbnail" width=150 height=150 /><br /> <img src="{main_posts.picture}" align="left" class="img-thumbnail" width=150 height=150 /><br />
</a> </a>
<h3> <h3>
<p id="topic_title_{main_posts.pid}" class="topic-title">{topic_name}</p> <p id="topic_title_{main_posts.pid}" class="topic-title">{topic_name}</p>
</h3> </h3>
<div class="topic-buttons" > <div class="topic-buttons">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {main_posts.username}"> <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="username-field" href="/users/{main_posts.userslug}">{main_posts.username}&nbsp;</span>
@ -55,8 +54,6 @@
<button class="btn btn-sm btn-default delete {main_posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button> <button 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> </div>
<div style="clear:both; margin-bottom: 10px;"></div>
</div>
<div id="content_{main_posts.pid}" class="post-content">{main_posts.content}</div> <div id="content_{main_posts.pid}" class="post-content">{main_posts.content}</div>
<div id="images_{main_posts.pid}" class="post-images"> <div id="images_{main_posts.pid}" class="post-images">
@ -88,7 +85,6 @@
</div> </div>
<div class="col-md-11"> <div class="col-md-11">
<div class="post-block"> <div class="post-block">
<div class="post-buttons">
<div class="topic-buttons"> <div class="topic-buttons">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {posts.username}"> <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {posts.username}">
@ -118,8 +114,6 @@
<button class="btn btn-sm btn-default delete {posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button> <button class="btn btn-sm btn-default delete {posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button>
</div> </div>
</div> </div>
<div style="clear:both; margin-bottom: 7px;"></div>
</div>
<div id="content_{posts.pid}" class="post-content">{posts.content}</div> <div id="content_{posts.pid}" class="post-content">{posts.content}</div>
<div id="images_{posts.pid}" class="post-images"> <div id="images_{posts.pid}" class="post-images">
@ -162,13 +156,13 @@
</div> </div>
</div> </div>
<div class="mobile-author-info"> <div class="mobile-author-overlay">
<div class="row"> <div class="row">
<div class="col-xs-3"> <div class="col-xs-3">
<img id="mobile-author-image" src="" width=50 height=50 /> <img id="mobile-author-image" src="" width=50 height=50 />
</div> </div>
<div class="col-xs-9"> <div class="col-xs-9">
<h4><div id="mobile-author-info"></div></h4> <h4><div id="mobile-author-overlay"></div></h4>
</div> </div>
</div> </div>
</div> </div>

9
public/themes/cerulean/topic.less
Unescape Escape View File

@ -35,6 +35,15 @@
} }
} }
.profile-block {
background: rgba(0, 0, 0, 0.02);
margin: 15px -11px -11px -11px;
border-radius: 0 0 5px 5px;
font-size: 10px;
line-height: 15px;
padding: 5px 8px 5px 5px;
color: #777;
}
.active-users { .active-users {
color: rgb(153,153,153); color: rgb(153,153,153);

131
public/themes/vanilla/topic.less
Unescape Escape View File

@ -14,45 +14,40 @@
&.deleted { &.deleted {
-moz-opacity: 0.30; -moz-opacity: 0.30;
opacity: 0.30; opacity: 0.30;
height:30px; height: 30px;
overflow-y:hidden; overflow-y: hidden;
} }
&.deleted-expanded { &.deleted-expanded {
height:100%; height: 100%;
overflow-y:default; overflow-y: default;
} }
} }
} }
@media (max-width: 767px) {
.topic-main-buttons {
margin-bottom: 0px;
}
}
@media (max-width: 475px) { @media (max-width: 475px) {
.post-tools { .post-tools {
display: none; display: none;
} }
.favourite-text { .favourite-text {
display: none; display: none;
} }
} }
// styling the chat button in the dropdown to match. surely there's a better way... @media (max-width: 767px) {
.chat { .topic-main-buttons {
display: block; margin-bottom: 0px;
padding: 3px 20px;
clear: both;
.pointer;
&:hover, &:focus {
color: white;
background-color: rgb(66, 139, 202);
} }
} }
.main-post, .sub-posts {
.profile-block, .post-block {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 5px;
padding: 10px;
.post-signature { .post-signature {
color: #666; color: #666;
font-size: 12px; font-size: 12px;
@ -60,36 +55,16 @@
display: inline-block; display: inline-block;
img { img {
max-width:200px; max-width: 200px;
max-height:60px; max-height: 60px;
} }
margin-left: 5px; margin-left: 5px;
} }
.profile-block, .post-block {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 5px;
padding: 10px;
p {
line-height: 1.75em;
}
}
.profile-block {
background: rgba(0, 0, 0, 0.02);
margin: 15px -11px -11px -11px;
border-radius: 0 0 5px 5px;
font-size: 10px;
line-height: 15px;
padding: 5px 8px 5px 5px;
color: #777;
} }
.post-block { .post-block {
.post-buttons { .topic-buttons {
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
margin: -5px 0 0 0; margin: -5px 0 0 0;
@ -103,10 +78,8 @@
padding-left: 9px; padding-left: 9px;
} }
} }
}
.post-content { .post-content {
min-height: 50px;
padding: 10px 5px 0 5px; padding: 10px 5px 0 5px;
word-wrap: break-word; word-wrap: break-word;
} }
@ -114,33 +87,35 @@
.post-images{ .post-images{
padding: 2px 5px 0 5px; padding: 2px 5px 0 5px;
} }
}
}
.sub-posts { .sub-posts {
.post-tools { .post-block {
margin-right: 9px; .post-signature {
margin-left: 15px;
}
.topic-buttons {
margin: -11px -10px 0px -10px;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 8px 9px 7px 23px;
} }
.post-content { .post-content {
margin-left: 10px; margin-left: 10px;
} }
.post-signature {
margin-left: 15px;
} }
.img-thumbnail { .img-thumbnail {
padding: 2px; padding: 2px;
border-radius: 0; border-radius: 0;
margin-left: 16px; margin-left: 16px;
} }
.post-buttons {
margin: -11px -10px 0 -10px;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
} }
.main-post { .main-post {
.main-post-buttons {
h3 { h3 {
margin: 0; margin: 0;
@ -152,14 +127,14 @@
} }
} }
.main-avatar { .avatar {
color: white; color: white;
position: relative; position: relative;
float: left; float: left;
margin: 0 10px 0 0; margin: 0 10px 0 0;
padding-bottom: 0px; padding-bottom: 0px;
text-align: center; text-align: center;
width:100px; width: 100px;
@media (max-width: 767px) { @media (max-width: 767px) {
display: none; display: none;
@ -170,7 +145,6 @@
border-radius: 0; border-radius: 0;
} }
} }
}
.post-content { .post-content {
min-height: 80px; min-height: 80px;
@ -181,22 +155,7 @@
} }
.post-block { .post-block {
.post-buttons { .topic-buttons {
button.show {
display: inline-block!important;
}
}
}
.favourite {
.pointer;
}
.btn {
display: inline-block;
}
.topic-buttons { //main-post version is called post-buttons, needs to be consolidated.
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
margin: 0 -11px 0 92px; margin: 0 -11px 0 92px;
@ -212,13 +171,10 @@
display: inline-block!important; display: inline-block!important;
} }
} }
}
} }
.mobile-author-overlay {
.mobile-author-info {
display: none; display: none;
z-index: 9999; z-index: 9999;
@ -248,4 +204,17 @@
font-size: 16px; font-size: 16px;
} }
} }
// styling the chat button in the dropdown to match. surely there's a better way...
.chat {
display: block;
padding: 3px 20px;
clear: both;
.pointer;
&:hover, &:focus {
color: white;
background-color: rgb(66, 139, 202);
}
}
} }
Write Preview
Loading…
Cancel
Save