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

View file

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

View file

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