github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 18:13:40 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

REFACTOR: CSS improvements to improve targetting and remove !important

Browse Source
This commit is contained in:
Robin Ward 2017-07-28 15:21:18 -04:00
parent 43fd90b2da
commit e4c2b5e430
6 changed files with 54 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/assets/javascripts/discourse/components/category-drop.js.es6
View File

@ -59,16 +59,28 @@ export default Ember.Component.extend({
}.property('category'),
badgeStyle: function() {
var category = this.get('category');
let category = this.get('category');
const categoryStyle = this.siteSettings.category_style;
if (categoryStyle === 'bullet') {
return;
}
if (category) {
var color = get(category, 'color'),
textColor = get(category, 'text_color');
let color = get(category, 'color');
let textColor = get(category, 'text_color');
if (color || textColor) {
var style = "";
if (color) { style += "background-color: #" + color + "; border-color: #" + color + ";"; }
if (textColor) { style += "color: #" + textColor + "; "; }
let style = "";
if (color) {
if (categoryStyle === "bar") {
style += `border-color: #${color};`;
} else if (categoryStyle === "box") {
style += `background-color: #${color};`;
if (textColor) { style += "color: #" + textColor + "; "; }
}
}
return style.htmlSafe();
}
}

2
app/assets/javascripts/discourse/components/tag-drop.js.es6
View File

@ -69,7 +69,7 @@ export default Ember.Component.extend({
@computed('tag')
dropdownButtonClass() {
var result = 'badge-category category-dropdown-button';
let result = 'badge-category category-dropdown-button';
if (Em.isNone(this.get('tag'))) {
result += ' home';
}

46
app/assets/javascripts/discourse/helpers/category-link.js.es6
View File

@ -24,20 +24,20 @@ export function categoryBadgeHTML(category, opts) {
if ((!category) ||
(!opts.allowUncategorized &&
Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
Ember.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") &&
Discourse.SiteSettings.suppress_uncategorized_badge
)
) return "";
var description = get(category, 'description_text'),
restricted = get(category, 'read_restricted'),
url = opts.url ? opts.url : Discourse.getURL("/c/") + Discourse.Category.slugFor(category),
href = (opts.link === false ? '' : url),
tagName = (opts.link === false || opts.link === "false" ? 'span' : 'a'),
extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : ''),
color = get(category, 'color'),
html = "",
parentCat = null;
let description = get(category, 'description_text');
let restricted = get(category, 'read_restricted');
let url = opts.url ? opts.url : Discourse.getURL("/c/") + Discourse.Category.slugFor(category);
let href = (opts.link === false ? '' : url);
let tagName = (opts.link === false || opts.link === "false" ? 'span' : 'a');
let extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : '');
let color = get(category, 'color');
let html = "";
let parentCat = null;
if (!opts.hideParent) {
parentCat = Discourse.Category.findById(get(category, 'parent_category_id'));
@ -49,32 +49,36 @@ export function categoryBadgeHTML(category, opts) {
html += categoryStripe(color, "badge-category-bg");
var classNames = "badge-category clear-badge";
let classNames = "badge-category clear-badge";
if (restricted) { classNames += " restricted"; }
var textColor = "#" + get(category, 'text_color');
const categoryStyle = Discourse.SiteSettings.category_style;
html += "<span" + ' style="color: ' + textColor + ';" '+
let style = "";
if (categoryStyle === "box") {
style = `style="color: #${get(category, 'text_color')};"`;
}
html += `<span ${style} ` +
'data-drop-close="true" class="' + classNames + '"' +
(description ? 'title="' + escapeExpression(description) + '" ' : '') +
">";
var name = escapeExpression(get(category, 'name'));
let categoryName = escapeExpression(get(category, 'name'));
if (restricted) {
html += iconHTML('lock') + " " + name;
html += iconHTML('lock') + " " + categoryName;
} else {
html += name;
html += categoryName;
}
html += "</span>";
if(href){
href = " href='" + href + "' ";
if (href) {
href = ` href="${href}" `;
}
extraClasses = Discourse.SiteSettings.category_style ? Discourse.SiteSettings.category_style + extraClasses : extraClasses;
return "<" + tagName + " class='badge-wrapper " + extraClasses + "' " + href + ">" + html + "</" + tagName + ">";
extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses;
return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>`;
}
export function categoryLinkHTML(category, options) {

2
app/assets/javascripts/discourse/templates/navigation/categories.hbs
View File

@ -1,4 +1,4 @@
{{#d-section bodyClass="navigation-categories"}}
{{#d-section bodyClass="navigation-categories" class="navigation-categories"}}
{{bread-crumbs categories=categories}}
{{navigation-bar navItems=navItems filterMode=filterMode}}

2
app/assets/javascripts/discourse/templates/navigation/default.hbs
View File

@ -1,4 +1,4 @@
{{#d-section bodyClass="navigation-topics" scrollTop="false"}}
{{#d-section bodyClass="navigation-topics" class="navigation-topics" scrollTop="false"}}
{{bread-crumbs categories=categories}}
{{navigation-bar navItems=navItems filterMode=filterMode}}

16
app/assets/stylesheets/common/components/badges.scss
View File

@ -28,7 +28,7 @@
display: inline-flex;
span.badge-category {
color: $primary !important;
color: $primary;
padding: 3px;
vertical-align: text-top;
margin-top: -2px; //vertical alignment fix
@ -37,7 +37,7 @@
text-overflow: ellipsis;
.extra-info-wrapper & {
color: $header-primary !important;
color: $header-primary;
}
}
@ -59,7 +59,7 @@
line-height: 15px;
span.badge-category {
color: $primary !important;
color: $primary;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
@ -69,7 +69,7 @@
}
.extra-info-wrapper & {
color: $header-primary !important;
color: $header-primary;
}
}
@ -169,13 +169,13 @@
}
li.bar>.badge-category {
background: $primary-low !important;
color: $primary !important;
background: $primary-low;
color: $primary;
}
li.bullet>.badge-category {
background: $primary-low !important;
color: $primary !important;
background: $primary-low;
color: $primary;
.badge-category-bg {
width: 10px;