From 331e63e3af34db231157df5276c97583d8b309fb Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 6 Oct 2014 15:58:43 -0400
Subject: [PATCH] Add striped category badges under title
---
app/assets/javascripts/discourse/lib/html.js | 7 ++++-
.../discourse/templates/header.hbs | 6 ++--
.../stylesheets/desktop/topic-post.scss | 28 +++++++++++++------
3 files changed, 28 insertions(+), 13 deletions(-)
diff --git a/app/assets/javascripts/discourse/lib/html.js b/app/assets/javascripts/discourse/lib/html.js
index 4ca0e163012..da587ff51c1 100644
--- a/app/assets/javascripts/discourse/lib/html.js
+++ b/app/assets/javascripts/discourse/lib/html.js
@@ -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'>" +
diff --git a/app/assets/javascripts/discourse/templates/header.hbs b/app/assets/javascripts/discourse/templates/header.hbs
index d8cf81f9cf9..4f2d596307a 100644
--- a/app/assets/javascripts/discourse/templates/header.hbs
+++ b/app/assets/javascripts/discourse/templates/header.hbs
@@ -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>
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 8d14530ede3..3b5bd9984aa 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -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 {