Discource-C
/
discourse-category-banners
mirror of https://github.com/discourse/discourse-category-banners
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Font Awesome 5 support, slug class

This commit is contained in:
Kris 2019-01-11 13:19:51 -05:00
parent 3a49327865
commit 82812ff1dd
2 changed files with 65 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
common/common.scss
View File

@ -1,4 +1,4 @@
.category-title-header { div[class^="category-title-header"] {
padding-top: 60px; padding-top: 60px;
display: flex; display: flex;
text-align: center; text-align: center;
@ -7,9 +7,10 @@
.category-title-contents { .category-title-contents {
max-width: 500px; max-width: 500px;
padding: 40px 40px 30px; padding: 40px 40px 30px;
i { svg {
height: 1.5em;
width: 1.1em;
margin-right: .25em; margin-right: .25em;
font-size: 1.5em;
} }
h1 { h1 {
text-transform: capitalize; text-transform: capitalize;

100
common/header.html
View File

@ -1,66 +1,68 @@
<script type="text/discourse-plugin" version="0.8"> <script type="text/discourse-plugin" version="0.8">
const container = Discourse.__container__; const container = Discourse.__container__;
const { h } = require('virtual-dom'); const { h } = require('virtual-dom');
const { iconNode } = require("discourse-common/lib/icon-library");
let lockIcon = iconNode('lock');
api.createWidget('category-header-widget', { api.createWidget('category-header-widget', {
tagName: 'span', tagName: 'span',
html(attrs, state) { html(attrs, state) {
const path = window.location.pathname; const path = window.location.pathname;
let category; let category;
const controller = container.lookup('controller:navigation/category'); const controller = container.lookup('controller:navigation/category');
category = controller.get("category"); category = controller.get("category");
const isException = category && const isException = category &&
settings.exceptions.split("|").includes(category.name); settings.exceptions.split("|").includes(category.name);
if(/^\/c\//.test(path)) { if(/^\/c\//.test(path)) {
const hideMobile = (!settings.show_mobile && this.site.mobileView) ? "true" : hideMobile; const hideMobile = (!settings.show_mobile && this.site.mobileView) ? "true" : hideMobile;
const subCat = (!settings.show_subcategory && category.parentCategory) ? "true" : subCat; const subCat = (!settings.show_subcategory && category.parentCategory) ? "true" : subCat;
const noDesc = (settings.hide_if_no_description && !category.description_text) ? "true" : noDesc; const noDesc = (settings.hide_if_no_description && !category.description_text) ? "true" : noDesc;
if(!isException && !noDesc && !subCat && !hideMobile) { if(!isException && !noDesc && !subCat && !hideMobile) {
$("body").addClass("category-header"); $("body").addClass("category-header");
function catDesc() { function catDesc() {
if(settings.show_description) { if(settings.show_description) {
return h('p', category.description_text); return h('p', category.description_text);
} }
} }
function ifProtected() { function ifProtected() {
if(category.read_restricted) { if(category.read_restricted) {
return h('i.fa.fa-lock'); return lockIcon;
}
}
return h('div.category-title-header' + " ." + category.slug, {
"attributes" : {
"style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
}
}, h('div.category-title-contents', [
ifProtected(),
h('h1', category.name),
h('div.category-title-description',catDesc())
]),
);
} }
} else {
$("body").removeClass("category-header");
} }
}
}),
return h('div.category-title-header', { api.decorateWidget('category-header-widget:after', helper => {
"attributes" : { helper.widget.appEvents.on('page:changed', () => {
"style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";" helper.widget.scheduleRerender();
} });
}, h('div.category-title-contents', [ });
ifProtected(),
h('h1', category.name),
h('div.category-title-description',catDesc())
]),
);
}
} else {
$("body").removeClass("category-header");
}
}
}),
api.decorateWidget('category-header-widget:after', helper => {
helper.widget.appEvents.on('page:changed', () => {
helper.widget.scheduleRerender();
});
});
</script> </script>
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'> <script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'>
{{mount-widget widget="category-header-widget"}} {{mount-widget widget="category-header-widget"}}
</script> </script>