diff options
| -rw-r--r-- | src/content/dependencies/generateQuickDescription.js | 49 | ||||
| -rw-r--r-- | src/static/css/site.css | 13 | ||||
| -rw-r--r-- | src/strings-default.yaml | 13 |
3 files changed, 69 insertions, 6 deletions
diff --git a/src/content/dependencies/generateQuickDescription.js b/src/content/dependencies/generateQuickDescription.js index f555af28..4c7c944a 100644 --- a/src/content/dependencies/generateQuickDescription.js +++ b/src/content/dependencies/generateQuickDescription.js @@ -34,16 +34,40 @@ export default { hasLongerDescription: query.hasLongerDescription, }), - generate(data, relations, {html, language}) { + slots: { + extraReadingLinks: { + validate: v => v.sparseArrayOf(v.isHTML), + }, + }, + + generate(data, relations, slots, {html, language}) { const prefix = 'misc.quickDescription'; + const actionsWithoutLongerDescription = + (data.hasLongerDescription + ? null + : slots.extraReadingLinks + ? language.$(prefix, 'readMore', { + links: + language.formatDisjunctionList(slots.extraReadingLinks), + }) + : null); + const wrapExpandCollapseLink = (expandCollapse, content) => html.tag('a', {class: `${expandCollapse}-link`}, {href: '#'}, content); const actionsWhenCollapsed = - (data.hasLongerDescription + (data.hasLongerDescription && slots.extraReadingLinks + ? language.$(prefix, 'expandDescription.orReadMore', { + links: + language.formatDisjunctionList(slots.extraReadingLinks), + expand: + wrapExpandCollapseLink('expand', + language.$(prefix, 'expandDescription.orReadMore.expand')), + }) + : data.hasLongerDescription ? language.$(prefix, 'expandDescription', { expand: wrapExpandCollapseLink('expand', @@ -52,7 +76,15 @@ export default { : null); const actionsWhenExpanded = - (data.hasLongerDescription + (data.hasLongerDescription && slots.extraReadingLinks + ? language.$(prefix, 'collapseDescription.orReadMore', { + links: + language.formatDisjunctionList(slots.extraReadingLinks), + collapse: + wrapExpandCollapseLink('collapse', + language.$(prefix, 'collapseDescription.orReadMore.collapse')), + }) + : data.hasLongerDescription ? language.$(prefix, 'collapseDescription', { collapse: wrapExpandCollapseLink('collapse', @@ -81,13 +113,22 @@ export default { data.hasLongerDescription && {class: 'collapsed'}, + !data.hasLongerDescription && + !slots.extraReadingLinks && + {class: 'has-content-only'}, + + !data.hasDescription && + slots.extraReadingLinks && + {class: 'has-external-links-only'}, + [ wrapContent(null, relations.description), wrapContent({class: 'short'}, relations.descriptionShort), wrapContent({class: 'long'}, relations.descriptionLong), + wrapActions(null, actionsWithoutLongerDescription), wrapActions({class: 'when-collapsed'}, actionsWhenCollapsed), wrapActions({class: 'when-expanded'}, actionsWhenExpanded), ])); - } + }, }; diff --git a/src/static/css/site.css b/src/static/css/site.css index 173c7910..1d0b8917 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1263,18 +1263,27 @@ ul.quick-info li:not(:last-child)::after { margin-top: 25px; } -.quick-description { +.quick-description:not(.has-external-links-only) { margin-left: 8%; margin-right: 8%; padding-left: 4%; padding-right: 4%; padding-top: 0.25em; - padding-bottom: 0.5em; + padding-bottom: 0.75em; border-left: 1px solid var(--dim-color); border-right: 1px solid var(--dim-color); line-height: 1.25em; } +.quick-description.has-external-links-only { + padding-left: 12%; + padding-right: 12%; +} + +.quick-description.has-content-only { + padding-bottom: 0.5em; +} + .quick-description p { text-align: center; } diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 96ec36ad..8429c4cd 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -625,6 +625,11 @@ misc: missingLinkContent: "(Missing link content)" + # quickDescription: + # Toggleable display where a shorter blurb from a description is + # initially visible, and a button can be clicked to display the + # rest. May also display "read more" links (to external sites). + quickDescription: moreInfo: _: "({LINK})" @@ -634,10 +639,18 @@ misc: _: "({EXPAND})" expand: "Expand description..." + expandDescription.orReadMore: + _: "({EXPAND}, or read more on {LINKS})" + expand: "Expand description" + collapseDescription: _: "({COLLAPSE})" collapse: "Collapse description" + collapseDescription.orReadMore: + _: "({COLLAPSE}, or read more on {LINKS})" + collapse: "Collapse description" + # nav: # Generic navigational elements. These usually only appear in the # wiki's nav bar, at the top of the page. |