tags display: instead of limiting to 5 tags, limit by container width %
This commit is contained in:
parent
04c2fa9f15
commit
b7a6c948d0
|
@ -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>`;
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue