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

css some refactoring of topics and posts, made them properly responsive in general. added rep vote placeholders on category listing.

Browse Source
v1.18.x
psychobunny 12 years ago
parent 25b815bb43
commit 6492da0876
3 changed files with 136 additions and 40 deletions
Show Stats Download Patch File Download Diff File

139
public/css/style.less
Unescape Escape View File

@ -36,6 +36,12 @@ body {
&.composing {
margin-bottom: 350px;
}
@media (min-width: 979px)
{
padding-top: 70px;
}
}
.none {
@ -52,12 +58,6 @@ body {
vertical-align: 10%;
}
@media (min-width: 979px)
{ body {
padding-top: 70px;
}
}
#notification_window {
position: fixed;
right: 20px;
@ -160,7 +160,7 @@ footer.footer {
a {
li {
list-style: none;
border-bottom: 1px solid #eee;
//border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
@ -180,26 +180,73 @@ footer.footer {
margin-left: 0;
}
.thread-rating {
color: #444;
text-align: center;
margin-top: 7px;
span {
display: inline-block; margin-left: 5px;
i {
padding-left: 2.4px;
}
@media (max-width: 1200px)
{
margin-left: -1px;
}
}
}
.topic-row {
border-radius: 5px;
width: 100%;
padding-left: 20px;
small {
vertical-align: 2px;
strong {
color: #666;
}
color: #999;
font-size: 14px;
}
h3 {
padding: 0;
margin: 0;
margin-top: 4px;
line-height: 30px;
color: rgb(0, 136, 204);
line-height: 25px;
small {
vertical-align: 2px;
strong {
color: #666;
.topic-title {
width: 50%;
display: inline-block;
font-size: 20px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
.badge {
margin-right: 6px;
}
@media (max-width: 979px)
{
width: 100%;
}
}
}
@media (max-width: 979px)
{
width: 100%;
margin-left: 0px;
}
}
.latest-post {
@ -323,6 +370,49 @@ footer.footer {
.main-post {
h3 {
margin: 0;
.topic-title {
width: 60%;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
padding-top: 5px;
margin-bottom: -5px;
@media (max-width: 1200px) {
width: 500px;
}
@media (min-width: 768px) and (max-width: 979px) {
width: 320px;
}
@media (max-width: 767px) {
width: 75%;
}
}
}
.main-avatar {
color: white;
position: relative;
float: left;
margin-right: 15px;
margin-bottom: 0px;
padding-bottom: 0px;
text-align: center;
@media (max-width: 767px) {
width: 20%;
max-width: 85px;
}
@media (max-width: 400px) {
display: none;
}
}
.main-avatar:hover .hover-overlay {
opacity: 0.75;
}
@ -340,18 +430,7 @@ footer.footer {
opacity: 0;
transition: opacity 0.3s;
}
.profile-block {
//height: 100px;
}
.main-avatar {
color: white;
position: relative;
float: left;
margin-right: 15px;
margin-bottom: 0px;
padding-bottom: 0px;
text-align: center
}
.post-content {
min-height: 80px;
}
@ -602,4 +681,14 @@ a:hover {
span:focus {
outline: none;
}
}
.breadcrumb {
li {
max-width: 35%;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
}

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

@ -12,7 +12,13 @@
<!-- BEGIN topics -->
<a href="../../topic/{topics.slug}"><li>
<div class="row-fluid">
<div class="span12 topic-row img-polaroid">
<div class="span1 thread-rating hidden-phone hidden-tablet">
<span>
<i class="icon-star icon-3x"></i><br />
38
</span>
</div>
<div class="span11 topic-row img-polaroid">
<div class="latest-post visible-desktop">
<div class="pull-right">
<img style="width: 48px; height: 48px; /*temporary*/" src="/graph/users/{topics.recent_author}/picture" />
@ -20,10 +26,12 @@
</div>
</div>
<div>
<h3><span class="badge {topics.badgeclass}">{topics.post_count}</span> {topics.title} <small>24<i class="icon-star"></i><br />
<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.post_count}</span>{topics.title}</span></h3>
<small>
<strong><i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i></strong>
Posted {topics.relativeTime} ago by
<strong>{topics.username}</strong>.</small></h3>
<strong>{topics.username}</strong>.
</small>
</div>
</div>
</div>

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

@ -23,24 +23,23 @@
<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">8</span>
</div>
</a>
<h3>{topic_name}
<small>
posted {main_posts.relativeTime} ago by <strong><a href="/users/{main_posts.username}">{main_posts.username}</a></strong>
<span class="{main_posts.edited-class}"><i class="icon-edit visible-phone" title="edited by {main_posts.editor} {main_posts.relativeEditTime} ago"></i></span>
</small>
<div class="pull-right" style="margin-right: 10px;">
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools} hidden-phone"><i class="icon-pencil"></i></button>
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools} hidden-phone"><i class="icon-trash"></i></button>
<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote hidden-phone"><i class="icon-quote-left"></i></button>
<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite hidden-phone btn"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
<h3><p class="topic-title">{topic_name}</p>
<div class="pull-right hidden-phone" style="margin-right: 10px;">
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools}"><i class="icon-pencil"></i></button>
<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools}"><i class="icon-trash"></i></button>
<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote"><i class="icon-quote-left"></i></button>
<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
<button id="post_reply" class="btn btn-primary btn post_reply">Reply <i class="icon-reply"></i></button>
</div>
</h3>
<hr />
<span class="{main_posts.edited-class} hidden-phone" style="font-size:10px;"> last edited by <strong><a href="/users/{main_posts.editor}">{main_posts.editor}</a></strong> {main_posts.relativeEditTime} ago</span>
<small>
posted {main_posts.relativeTime} ago by <strong><a href="/users/{main_posts.username}">{main_posts.username}</a></strong>
<span class="{main_posts.edited-class}"><i class="icon-edit" title="edited by {main_posts.editor} {main_posts.relativeEditTime} ago"></i></span>
</small>
<div style="clear:both; margin-bottom: 10px;"></div>

Write Preview
Loading…
Cancel
Save