diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js index edb51b83e..f403caaf5 100644 --- a/app/assets/javascripts/utilities/buildArticleHTML.js +++ b/app/assets/javascripts/utilities/buildArticleHTML.js @@ -25,8 +25,43 @@ function buildArticleHTML(article) { if (article) { var container = document.getElementById('index-container'); + + var flareTag = ''; + var currentTag = ''; + if (container) { + currentTag = JSON.parse(container.dataset.params).tag; + } + if (article.flare_tag && currentTag !== article.flare_tag.name) { + flareTag = + "#" + + article.flare_tag.name + + ''; + } + if (article.class_name === 'PodcastEpisode') { + flareTag = "podcast"; + } + if (article.class_name === 'Comment') { + flareTag = "comment"; + } + if (article.class_name === 'User') { + flareTag = + "person"; + } + var tagString = ''; - var tagList = article.tag_list || article.cached_tag_list_array; + var tagList = article.tag_list || article.cached_tag_list_array || []; + if (flareTag) { + tagList = tagList.filter(function (tag) { + return tag !== article.flare_tag.name; + }); + tagString += flareTag; + } if (tagList) { tagList.forEach(function buildTagString(t) { tagString = @@ -53,32 +88,6 @@ function buildArticleHTML(article) { ''; } - var flareTag = ''; - var currentTag = ''; - if (container) { - currentTag = JSON.parse(container.dataset.params).tag; - } - if (article.flare_tag && currentTag !== article.flare_tag.name) { - flareTag = - "#" + - article.flare_tag.name + - ''; - } - if (article.class_name === 'PodcastEpisode') { - flareTag = "podcast"; - } - if (article.class_name === 'Comment') { - flareTag = "comment"; - } - if (article.class_name === 'User') { - flareTag = - "person"; - } - var rc = article.public_reactions_count; var reactionsCount = rc || '0'; var reactionsDisplay = ''; @@ -278,7 +287,6 @@ function buildArticleHTML(article) { '" id="article-link-' + article.id + '">' + - flareTag + filterXSS(article.title) + '\
' + diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss index df15a11b0..03ba7299e 100644 --- a/app/assets/stylesheets/components/stories.scss +++ b/app/assets/stylesheets/components/stories.scss @@ -135,7 +135,7 @@ &__flare-tag { font-weight: normal; - font-size: 0.6em; + // font-size: 0.6em; padding: 0.3em; vertical-align: middle; position: relative; diff --git a/app/javascript/articles/Article.jsx b/app/javascript/articles/Article.jsx index fe0b7e1ae..871ade56c 100644 --- a/app/javascript/articles/Article.jsx +++ b/app/javascript/articles/Article.jsx @@ -77,7 +77,7 @@ export const Article = ({
- + {article.class_name === 'Article' && ( // eslint-disable-next-line no-underscore-dangle diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap index b2a4f174a..73e47b2e9 100644 --- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap +++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap @@ -83,12 +83,6 @@ Object { href="/some-post/path" id="article-link-62407" > - - #javascript - Unbranded Home Loan Account @@ -100,6 +94,7 @@ Object { - - #javascript - Unbranded Home Loan Account @@ -310,6 +299,7 @@ Object { (

- {article.flare_tag && ( - - {`#${article.flare_tag.name}`} - - )} {article.class_name === 'PodcastEpisode' && ( podcast )} diff --git a/app/javascript/articles/components/TagList.jsx b/app/javascript/articles/components/TagList.jsx index ff9a1c719..69726a1a8 100644 --- a/app/javascript/articles/components/TagList.jsx +++ b/app/javascript/articles/components/TagList.jsx @@ -1,16 +1,35 @@ import { h } from 'preact'; import { tagPropTypes } from '../../common-prop-types'; -export const TagList = ({ tags = [] }) => ( - -); +export const TagList = ({ tags = [], flare_tag }) => { + let tagsToDisplay = tags; + if (flare_tag) { + tagsToDisplay = tagsToDisplay.filter((tag) => tag !== flare_tag.name); + } + return ( +
+ {flare_tag && ( + + # + {flare_tag.name} + + )} + {tagsToDisplay.map((tag) => ( + + # + {tag} + + ))} +
+ ); +}; TagList.propTypes = { tags: tagPropTypes.isRequired, diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb index d0769d5b6..20cdaaef0 100644 --- a/app/views/articles/_single_story.html.erb +++ b/app/views/articles/_single_story.html.erb @@ -51,11 +51,19 @@

- <%= render "articles/tag_identifier", story: story, tag: @tag %> + <%= story.title %>