tags display: instead of limiting to 5 tags, limit by container width %

This commit is contained in:
Andrew Dolgov 2023-03-01 21:41:52 +03:00
parent 04c2fa9f15
commit b7a6c948d0
No known key found for this signature in database
GPG Key ID: 1A56B4FA25D4AF2A
9 changed files with 87 additions and 3 deletions

View File

@ -146,10 +146,8 @@ const Article = {
</div>`;
},
renderTags: function (id, tags) {
const tags_short = tags.length > 5 ? tags.slice(0, 5) : tags;
return `<span class="tags" title="${tags.join(", ")}" data-tags-for="${id}">
${tags_short.length > 0 ? tags_short.map((tag) => `
${tags.length > 0 ? tags.map((tag) => `
<a href="#" onclick="Feeds.open({feed: '${tag.trim()}'})" class="tag">${tag}</a>`
).join(", ") : `${__("no tags")}`}</span>`;
},

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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 {

View File

@ -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;

View File

@ -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;