From b7a6c948d078a59739f14de8454e0e7237d0722e Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Wed, 1 Mar 2023 21:41:52 +0300 Subject: [PATCH] tags display: instead of limiting to 5 tags, limit by container width % --- js/Article.js | 4 +--- themes/compact.css | 12 ++++++++++++ themes/compact_night.css | 12 ++++++++++++ themes/light-high-contrast.css | 12 ++++++++++++ themes/light.css | 12 ++++++++++++ themes/light/cdm.less | 7 +++++++ themes/light/tt-rss.less | 7 +++++++ themes/night.css | 12 ++++++++++++ themes/night_blue.css | 12 ++++++++++++ 9 files changed, 87 insertions(+), 3 deletions(-) diff --git a/js/Article.js b/js/Article.js index a3a75ba21..703b634d5 100644 --- a/js/Article.js +++ b/js/Article.js @@ -146,10 +146,8 @@ const Article = { `; }, renderTags: function (id, tags) { - const tags_short = tags.length > 5 ? tags.slice(0, 5) : tags; - return ` - ${tags_short.length > 0 ? tags_short.map((tag) => ` + ${tags.length > 0 ? tags.map((tag) => ` ${tag}` ).join(", ") : `${__("no tags")}`}`; }, diff --git a/themes/compact.css b/themes/compact.css index 952187e63..16cf6b5aa 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -73,6 +73,12 @@ body.ttrss_main .post .header .title { font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; } +body.ttrss_main .post .header .tags { + max-width: 25%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} body.ttrss_main .post div.content { padding: 10px; font-size: 16px; @@ -1293,6 +1299,12 @@ body.ttrss_utility hr { font-size: 11px; font-weight: normal; } +.cdm .header .tags { + max-width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .cdm .footer { height: 30px; padding-left: 5px; diff --git a/themes/compact_night.css b/themes/compact_night.css index 7342b5710..8da1cd32a 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -73,6 +73,12 @@ body.ttrss_main .post .header .title { font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; } +body.ttrss_main .post .header .tags { + max-width: 25%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} body.ttrss_main .post div.content { padding: 10px; font-size: 16px; @@ -1293,6 +1299,12 @@ body.ttrss_utility hr { font-size: 11px; font-weight: normal; } +.cdm .header .tags { + max-width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .cdm .footer { height: 30px; padding-left: 5px; diff --git a/themes/light-high-contrast.css b/themes/light-high-contrast.css index 0d7fcbaa0..ffd952f9f 100644 --- a/themes/light-high-contrast.css +++ b/themes/light-high-contrast.css @@ -73,6 +73,12 @@ body.ttrss_main .post .header .title { font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; } +body.ttrss_main .post .header .tags { + max-width: 25%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} body.ttrss_main .post div.content { padding: 10px; font-size: 16px; @@ -1293,6 +1299,12 @@ body.ttrss_utility hr { font-size: 11px; font-weight: normal; } +.cdm .header .tags { + max-width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .cdm .footer { height: 30px; padding-left: 5px; diff --git a/themes/light.css b/themes/light.css index f0218f659..cf2358c50 100644 --- a/themes/light.css +++ b/themes/light.css @@ -73,6 +73,12 @@ body.ttrss_main .post .header .title { font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; } +body.ttrss_main .post .header .tags { + max-width: 25%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} body.ttrss_main .post div.content { padding: 10px; font-size: 16px; @@ -1293,6 +1299,12 @@ body.ttrss_utility hr { font-size: 11px; font-weight: normal; } +.cdm .header .tags { + max-width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .cdm .footer { height: 30px; padding-left: 5px; diff --git a/themes/light/cdm.less b/themes/light/cdm.less index 05ba3c99a..bf677decf 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -79,6 +79,13 @@ font-size : @font-size-small; font-weight : normal; } + + .tags { + max-width : 50%; + overflow : hidden; + white-space : nowrap; + text-overflow : ellipsis; + } } .footer { diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index 1f1242f6b..3896665c8 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -56,6 +56,13 @@ body.ttrss_main { font-family : @fonts-ui; word-break : break-all; } + + .tags { + max-width : 25%; + overflow : hidden; + white-space : nowrap; + text-overflow : ellipsis; + } } div.content { diff --git a/themes/night.css b/themes/night.css index 4c6788c2e..b1d0f61ce 100644 --- a/themes/night.css +++ b/themes/night.css @@ -74,6 +74,12 @@ body.ttrss_main .post .header .title { font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; } +body.ttrss_main .post .header .tags { + max-width: 25%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} body.ttrss_main .post div.content { padding: 10px; font-size: 16px; @@ -1294,6 +1300,12 @@ body.ttrss_utility hr { font-size: 11px; font-weight: normal; } +.cdm .header .tags { + max-width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .cdm .footer { height: 30px; padding-left: 5px; diff --git a/themes/night_blue.css b/themes/night_blue.css index 90b365473..f77f04efb 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -74,6 +74,12 @@ body.ttrss_main .post .header .title { font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; } +body.ttrss_main .post .header .tags { + max-width: 25%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} body.ttrss_main .post div.content { padding: 10px; font-size: 16px; @@ -1294,6 +1300,12 @@ body.ttrss_utility hr { font-size: 11px; font-weight: normal; } +.cdm .header .tags { + max-width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .cdm .footer { height: 30px; padding-left: 5px;