diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.de.yml b/entry_types/scrolled/config/locales/new/ext-link-options.de.yml index c8e7691116..2ffbec8f9d 100644 --- a/entry_types/scrolled/config/locales/new/ext-link-options.de.yml +++ b/entry_types/scrolled/config/locales/new/ext-link-options.de.yml @@ -28,7 +28,14 @@ de: values: below: "Unter dem Bild" right: "Rechts neben dem Bild" + overlay: "Auf dem Bild" none: "Keine" + overlayOpacity: + label: Abblendung + inline_help: |- + Intensität des Farbverlaufs, der hinter den Text + gelegt wird, um den Kontrast auf unruhigen + Hintergründen zu verbessern. thumbnailSize: label: "Thumbnail-Breite" inline_help: |- diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.en.yml b/entry_types/scrolled/config/locales/new/ext-link-options.en.yml index c58c0bc73d..91197a2bcf 100644 --- a/entry_types/scrolled/config/locales/new/ext-link-options.en.yml +++ b/entry_types/scrolled/config/locales/new/ext-link-options.en.yml @@ -27,7 +27,13 @@ en: values: below: "Below image" right: "Right from image" + overlay: "On Image" none: "None" + overlayOpacity: + label: Shadow opacity + inline_help: |- + Intensity of the color gradient that is placed behind + the text to improve contrast on busy backgrounds thumbnailSize: label: "Thumbnail width" inline_help: |- diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js index f810aebffd..e177b281d0 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js @@ -43,10 +43,15 @@ editor.contentElementTypes.register('externalLinkList', { this.input('textPosition', SelectInputView, { values: features.isEnabled('external_links_options') ? - ['below', 'right', 'none'] : + ['below', 'right', 'overlay', 'none'] : ['below', 'none'] }); this.group('ContentElementVariant', {entry}); + this.input('overlayOpacity', SliderInputView, { + defaultValue: 70, + visibleBinding: 'textPosition', + visibleBindingValue: 'overlay' + }); this.view(SeparatorView); this.group('ContentElementPosition'); this.view(SeparatorView); diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css index 5388a62b6a..2dcfd28149 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css @@ -79,28 +79,61 @@ width: 66%; } +.textPosition-overlay .thumbnail { + width: 100%; +} + .background { --padding-inline: var(--theme-external-links-card-padding-inline, 15px); - flex: 1; - color: var(--theme-external-links-card-text-color, darkContentTextColor); --content-text-color: var(--theme-external-links-card-text-color, darkContentTextColor); - background-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor); + --card-surface-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor); + color: var(--content-text-color); + background-color: var(--card-surface-color); + flex: 1; padding-left: min(var(--padding-inline), 5px); padding-right: min(var(--padding-inline), 5px); } +.invert > .background { + --card-surface-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor); + --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor); +} + +.textPosition-overlay .background { + position: absolute; + bottom: 0; + width: 100%; + background: transparent; + z-index: 1; +} + +.textPosition-overlay .background::after { + content: ""; + position: absolute; + z-index: -1; + top: -2rem; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(0deg, var(--card-surface-color), transparent); + opacity: calc(0.9 * var(--overlay-opacity, 0.7)); +} + + .textPosition-none .background { display: none; } -.textPosition-below .details { +.textPosition-below .details, +.textPosition-overlay .details { padding-top: 15px; padding-bottom: 20px; padding-left: calc(var(--padding-inline) - 5px); padding-right: calc(var(--padding-inline) - 5px); } -.textPosition-below .details:first-child { +.textPosition-below .details:first-child, +.textPosition-overlay .details:first-child { padding-top: 20px; } @@ -108,12 +141,6 @@ padding: 10px 10px 10px 15px; } -.invert > .background { - background-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor); - color: var(--theme-external-links-card-text-color, lightContentTextColor); - --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor); -} - .tagline { composes: typography-externalLinkTagline from global; line-height: 1.3; @@ -127,6 +154,10 @@ margin: 0 0 1rem; } +.textPosition-overlay .title:last-child { + margin-bottom: 0; +} + .details p { margin-bottom: 0; } diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js index 6d63e92488..fb1e461a7d 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js @@ -88,6 +88,7 @@ export function ExternalLinkList(props) { textPositionStyles[`linkAlignment-${props.configuration.linkAlignment}`], textPositionStyles[`textPosition-${textPosition}`] )} + style={{'--overlay-opacity': (props.configuration.overlayOpacity || 70) / 100}} onClick={handleListClick}> {linkList.map((link, index) => +[['below'], ['right'], ['overlay', 'square']].forEach(([textPosition, thumbnailAspectRatio]) => storiesOf(`Content Elements/externalLinkList`, module) .add( `Text Position - ${textPosition}`, - () => ( - - - - ) + () => ( + + + + ) ) ); -function exampleSeed({textPosition, linkCount}) { +function exampleSeed({textPosition, thumbnailAspectRatio}) { const sectionConfiguration = { transition: 'scroll' }; @@ -255,9 +255,9 @@ function exampleSeed({textPosition, linkCount}) { } ], contentElements: [ - ...exampleContentElements(1, 'left', textPosition, linkCount), - ...exampleContentElements(2, 'center', textPosition, linkCount), - ...exampleContentElements(3, 'right', textPosition, linkCount), + ...exampleContentElements(1, 'left', textPosition, thumbnailAspectRatio), + ...exampleContentElements(2, 'center', textPosition, thumbnailAspectRatio), + ...exampleContentElements(3, 'right', textPosition, thumbnailAspectRatio), ] }); } @@ -274,7 +274,7 @@ function linkCount({layout, textPosition, width, linkWidth}) { } } -function exampleContentElements(sectionId, layout, textPosition) { +function exampleContentElements(sectionId, layout, textPosition, thumbnailAspectRatio) { return [ exampleHeading({sectionId, text: `Layout ${layout}`}), ...([ @@ -293,6 +293,7 @@ function exampleContentElements(sectionId, layout, textPosition) { textPosition, width, linkWidth, + thumbnailAspectRatio, ...links({ count: linkCount({layout, textPosition, width, linkWidth}) })