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;
display: flex;
text-align: center;
@ -7,9 +7,10 @@
.category-title-contents {
max-width: 500px;
padding: 40px 40px 30px;
i {
svg {
height: 1.5em;
width: 1.1em;
margin-right: .25em;
font-size: 1.5em;
}
h1 {
text-transform: capitalize;

120
common/header.html
View File

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