Add striped category badges under title

This commit is contained in:
Robin Ward 2014-10-06 15:58:43 -04:00
parent 43467a8aaa
commit 331e63e3af
3 changed files with 28 additions and 13 deletions

View file

@ -92,6 +92,9 @@ Discourse.HTML = {
html = "<" + elem + " href=\"" + (opts.link === false ? '' : url) + "\" ",
categoryStyle;
// Parent stripe implies onlyStripe
if (opts.onlyStripe) { opts.showParent = true; }
html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) +
(opts.onlyStripe ? ' clear-badge' : '') +
extraClasses + "\" ";
@ -113,8 +116,10 @@ Discourse.HTML = {
html += ">" + name + "</" + elem + ">";
}
if (opts.showParent && category.get('parent_category_id')) {
if (opts.onlyStripe || (opts.showParent && category.get('parent_category_id'))) {
var parent = Discourse.Category.findById(category.get('parent_category_id'));
if (!parent) { parent = category; }
categoryStyle = Discourse.HTML.categoryStyle(opts.onlyStripe ? category : parent) || '';
html = "<span class='badge-wrapper'><" + elem + " class='badge-category-parent" + extraClasses + "' style=\"" + categoryStyle +
"\" href=\"" + (opts.link === false ? '' : url) + "\"><span class='category-name'>" +

View file

@ -94,7 +94,7 @@
{{#if showExtraInfo}}
<div class="extra-info-wrapper">
<div class="extra-info">
<div {{bind-attr class=":extra-info topic.category.isUncategorizedCategory::has-category"}}>
{{#if showStarButton}}
<a {{bind-attr class=":star topic.starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
{{/if}}
@ -116,9 +116,9 @@
{{/if}}
</h1>
{{#if topic.category.parentCategory}}
{{bound-category-link topic.category.parentCategory}}
{{bound-category-link topic.category.parentCategory onlyStripe="true"}}
{{/if}}
{{bound-category-link topic.category}}
{{bound-category-link topic.category onlyStripe="true"}}
</div>
</div>
</div>

View file

@ -540,12 +540,17 @@ iframe {
}
}
.extra-info.has-category {
h1 {
line-height: 1.0em;
}
}
.extra-info {
h1 {
margin: 5px 0 0 0;
font-size: 1.6em;
line-height: 1.3em;
}
a.star {
@ -561,15 +566,20 @@ iframe {
margin-top: -2px;
}
.badge-category {
border-left: 5px solid;
border-color: #aaa;
font-weight: normal;
text-transform: lowercase;
padding: 0 0 0 5px;
margin: 0 5px 0 1px;
vertical-align: top;
.badge-wrapper {
margin: 0;
padding: 0;
.badge-category {
color: $primary;
padding: 0 0 0 3px;
margin-right: 5px;
}
.badge-category-parent {
margin: 0;
padding: 0px 1px;
}
}
.title-wrapper {