Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-03-22 20:32:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

BS3 sourcefiles + modified category row to new format. now mobile has two columns of categories, looks much neater.

Browse Source
This commit is contained in:
psychobunny
2013-08-22 03:13:49 +08:00
parent 2f70dd732d
commit 8834feac65
2 changed files with 105 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
public/css/style.less
View File

@@ -253,95 +253,9 @@ footer.footer {
}
}
.category-icon {
width: 100%;
height: 90px;
text-align: center;
border-radius: 0px;
margin: 0;
padding-top:25px;
cursor: pointer;
margin-bottom: 20px;
border-radius: 5px;
overflow:hidden;
}
.category-row h4 {
font-weight: 700;
text-align: left;
/*color: #555;*/ // NOTE: color for cat/topic header links should be grey in the default theme when we get around to it.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.category-row a {
text-decoration: none;
border: 0;
}
.category-purple {
@color: #ab1290;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-darkblue {
@color: #004C66;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-blue {
@color: #0059B2;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-darkgreen {
@color: #004000;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-orange {
@color: #FF7A4D;
color: white;
background: @color;
&:hover {
background: lighten(@color, 10%);
}
}
.category-list {
li {
.inline-block;
.pointer;
padding: 0.5em 0;
text-align: center;
margin: 0.5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0.5em;
}
}
.hero-unit {
// goes into theme
background: #56BCDA;
color: white;
padding: 30px;
@@ -877,4 +791,104 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
padding-right:10px;
}
}
}
//topic
.category-list {
li {
.inline-block;
.pointer;
padding: 0.5em 0;
text-align: center;
margin: 0.5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0.5em;
}
}
/*START: Goes into home.less */
.categories {
h4 {
font-weight: 700;
text-align: left;
/*color: #555;*/ // NOTE: color for cat/topic header links should be grey in the default theme when we get around to it.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a {
text-decoration: none;
border: 0;
}
.icon {
width: 100%;
height: 110px;
text-align: center;
border-radius: 0px;
margin: 0;
padding-top:25px;
cursor: pointer;
margin-bottom: 20px;
border-radius: 5px;
overflow:hidden;
}
}
.category-purple {
@color: #ab1290;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-darkblue {
@color: #004C66;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-blue {
@color: #0059B2;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-darkgreen {
@color: #004000;
background: @color;
color: white;
&:hover {
background: lighten(@color, 10%);
}
}
.category-orange {
@color: #FF7A4D;
color: white;
background: @color;
&:hover {
background: lighten(@color, 10%);
}
}
/*END: Goes into home.less */

6
public/templates/home.tpl
View File

@@ -2,12 +2,12 @@
{motd}
</div>
<div class="row category-row">
<div class="row categories">
<!-- BEGIN categories -->
<div class="span3">
<div class="col-md-3 col-xs-6">
<a href="category/{categories.slug}">
<h4><span class="badge {categories.badgeclass}">{categories.topic_count} </span> {categories.name}</h4>
<div class="category-icon {categories.blockclass}">
<div class="icon {categories.blockclass}">
<div id="category-{categories.cid}" class="category-slider-{categories.post_count}">
<div class="category-box"><i class="{categories.icon} icon-4x"></i></div>
<div class="category-box">{categories.description}</div>