more changes to category view

v1.18.x
psychobunny 12 years ago
parent 3fa0f7c8b5
commit 35974ed6b9

@ -122,49 +122,85 @@ footer.footer {
.sidebar-block {
.block-header {
padding: 8px;
padding-left: 13px;
display: block;
background: rgb(245,245,245);
color: #676;
font-weight: 400;
font-size: 14px;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #ddd;
}
.block-content {
padding: 10px;
}
border-radius: 5px;
background: white;
padding: 0;
margin-bottom: 20px;
.img-polaroid {
margin-top: 2px;
}
}
.category { .category {
.block { a {
strong { li {
list-style: none;
border-bottom: 1px solid #eee;
margin-bottom: 10px; margin-bottom: 10px;
display: block padding-bottom: 10px;
} }
border: 1px solid #eee;
background: white;
padding: 10px;
.img-polaroid {
margin-top: 2px;
&:last-child li {
border-bottom: 0;
}
color: #333;
&:hover {
color: #333
} }
} }
li { @media (max-width: 767px)
list-style: none; {
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
} }
}
}
@media (max-width: 767px) .category {
{ ul {
.topic-row-icon { margin-left: 0;
border-radius: 5px 5px 0 0;
} }
} }
.topic-row {
border-radius: 5px;
}
.top-posters { .latest-post {
float: right; float: right;
padding-top: 2px; padding-top: 2px;
margin-right: 30px; margin-right: 30px;
width: 50%;
div.latest-post { .pull-right {
width: 100%; width: 100%;
height: 50px; height: 50px;
line-height: 16px; line-height: 16px;
margin-left: 1px;
padding: 5px;
border-left: 1px solid #bbb;
padding-left: 20px;
img { img {
display: block; display: block;
float: left; float: left;
@ -172,35 +208,32 @@ footer.footer {
p { p {
display: block; display: block;
float: left; float: left;
width: 400px; width: 70%;
margin-left: 10px; margin-left: 10px;
overflow: hidden; overflow: hidden;
height: 50px; height: 50px;
} }
} }
.latest-post {
margin-left: 1px;
border: 1px solid rgba(0,0,0,0.05);
padding: 5px;
}
} }
.topic-row { .topic-row {
width: 100%; width: 100%;
padding-left: 20px; padding-left: 20px;
}
.topic-row h3 { h3 {
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-top: 4px; margin-top: 4px;
line-height: 30px; line-height: 30px;
} color: rgb(0, 136, 204);
.topic-row h3 small { small {
vertical-align: 3px; vertical-align: 3px;
}
}
} }
.post-container { .post-container {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;

@ -6,34 +6,16 @@
</ul> </ul>
</div> </div>
<div class="category row"> <div class="category row">
<div class="span3">
<div class="block">
<strong>Top posters in {category_name}</strong>
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
</div>
</div>
<div class="span9"> <div class="span9">
<ul class="topic-container"> <ul>
<!-- BEGIN topics --> <!-- BEGIN topics -->
<a href="../../topic/{topics.slug}"><li> <a href="../../topic/{topics.slug}"><li>
<div class="row-fluid"> <div class="row-fluid">
<div class="span12 topic-row img-polaroid"> <div class="span12 topic-row img-polaroid">
<div class="top-posters"> <div class="latest-post visible-desktop visible-tablet">
<i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i> <div class="pull-right">
<!--<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=50" class="img-polaroid" /> <img class="hidden-tablet" src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=50" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=50" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=50" class="img-polaroid" />-->
<div class="latest-post pull-right">
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=50" />
<p><strong>psychobunny</strong>: Some post content goes here, the latest posts of course blah blahposts of course blah blahposts of course blah blahposts of course blah blah</p> <p><strong>psychobunny</strong>: Some post content goes here, the latest posts of course blah blahposts of course blah blahposts of course blah blahposts of course blah blah</p>
</div> </div>
</div> </div>
@ -47,6 +29,40 @@
<!-- END topics --> <!-- END topics -->
</ul> </ul>
</div> </div>
<div class="span3">
<div class="sidebar-block img-polaroid">
<div class="block-header">
Recent Replies
</div>
<div class="block-content">
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
</div>
</div>
<div class="sidebar-block img-polaroid">
<div class="block-header">
Top posters
</div>
<div class="block-content">
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=48" class="img-polaroid" />
<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=48" class="img-polaroid" />
</div>
</div>
</div>
</div> </div>

Loading…
Cancel
Save