From 6ac26fe963c9245a263d61a45f1d189b53df2351 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 26 Jul 2019 23:43:31 -0400 Subject: [PATCH] repurpose for tags --- README.md | 9 ++---- about.json | 8 +++--- common/common.scss | 20 ++++++++++---- common/header.html | 69 ++++++++++++++++++++++------------------------ settings.yml | 21 ++------------ 5 files changed, 55 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index f43dfc7..cd8f38a 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,3 @@ -# discourse-category-banners +# discourse-tag-banners -A theme component to add category banners to your Discourse community. - -More details here: https://meta.discourse.org/t/discourse-category-banners/86241 - - -![Category banner](https://discourse-meta.s3-us-west-1.amazonaws.com/original/3X/1/d/1d75ec58312e4a0b4d8b20b3272fca47f2b7247d.png) +A theme component to add tag banners to your Discourse community. diff --git a/about.json b/about.json index 657dab8..ee693c8 100755 --- a/about.json +++ b/about.json @@ -1,6 +1,6 @@ { - "name": "discourse-category-banners", - "about_url": "https://meta.discourse.org/t/discourse-category-banners/86241", + "name": "discourse-tag-banners", + "about_url": "", "component": true, - "license_url": "https://meta.discourse.org/t/discourse-category-banners/86241" -} \ No newline at end of file + "license_url": "" +} diff --git a/common/common.scss b/common/common.scss index 6af5329..7a0f087 100644 --- a/common/common.scss +++ b/common/common.scss @@ -1,12 +1,20 @@ -div[class^="category-title-header"] { +.tag-title-header { padding-top: 60px; display: flex; text-align: center; width: 100%; justify-content: center; - .category-title-contents { - max-width: 500px; - padding: 40px; + background: $primary-very-low; + min-height: 123px; + @media screen and (max-width: 450px) { + min-height: 70px; + } + .tag-title-contents { + max-width: 700px; + padding: 45px 40px 40px 40px; + @media screen and (max-width: 450px) { + padding: 20px; + } svg { height: 1.5em; width: 1.1em; @@ -16,7 +24,7 @@ div[class^="category-title-header"] { display: inline; } } - .category-title-description { + .tag-title-description { a, a:visited { color: inherit; @@ -24,7 +32,7 @@ div[class^="category-title-header"] { } } } -.category-header { +.tag-banner { #main-outlet { padding-top: 20px; } diff --git a/common/header.html b/common/header.html index 97dc5c1..9893c8b 100644 --- a/common/header.html +++ b/common/header.html @@ -4,58 +4,55 @@ const { iconNode } = require("discourse-common/lib/icon-library"); let lockIcon = iconNode('lock'); - api.createWidget('category-header-widget', { + api.createWidget('tag-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"); + if(/^\/tags\//.test(path)) { + const controller = container.lookup('controller:tags'); + const hideMobile = (!settings.show_on_mobile && this.site.mobileView) ? "true" : hideMobile; - const isException = category && - settings.exceptions.split("|").includes(category.name); + let tag; + let additionalTags; - 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; + tag = controller.get("target.currentRoute.params.tag_id"); + additionalTags = controller.get("target.currentRoute.params.additional_tags"); - if(!isException && !noDesc && !subCat && !hideMobile) { - $("body").addClass("category-header"); + if(!hideMobile && tag != "none") { - function catDesc() { - if(settings.show_description) { - return h('div.cooked', {innerHTML: category.description}); - } - } + document.querySelector("body").classList.add("tag-banner") - function ifProtected() { - if(category.read_restricted) { - return lockIcon; - } - } + if (additionalTags) { + var tagList = additionalTags.split("/"); + var additionalTagNames = h('span', " & " + tagList.join(' & ')); + var additionalNaming = tagList.map(function(e) {return 'tag-banner-' + e}); + var additionalClasses = additionalNaming.join('.'); + } else { + var additionalClasses = "single-tag"; + } - 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.tag-title-header' + + " .tag-banner-" + + tag + + " ." + + additionalClasses, h('div.tag-title-contents', [ + h('h1', [ + h('span', tag), + additionalTagNames ]), + ]), + ); - ); - } } else { - $("body").removeClass("category-header"); + document.querySelector("body").classList.remove("tag-banner") } + } } }), - api.decorateWidget('category-header-widget:after', helper => { + api.decorateWidget('tag-header-widget:after', helper => { helper.widget.appEvents.on('page:changed', () => { helper.widget.scheduleRerender(); }); @@ -64,7 +61,7 @@ diff --git a/settings.yml b/settings.yml index 2a655e6..61591d9 100644 --- a/settings.yml +++ b/settings.yml @@ -1,20 +1,3 @@ -show_description: +show_on_mobile: default: true - description: 'Show description from "About This Category" post' - -show_mobile: - default: true - description: 'Show banners on mobile' - -show_subcategory: - default: true - description: 'Show banners for subcategories' - -hide_if_no_description: - default: true - description: 'Hide banners if category description is not set' - -exceptions: - default: "" - type: list - description: "Banner will not show for these categories" + description: "Show tag banners on mobile devices"