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 cc36a56345..eacf3e18a9 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 @@ -1,7 +1,4 @@ de: - pageflow: - external_links_options: - feature_name: "External Links Optionen" pageflow_scrolled: editor: content_elements: 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 2f330ad4c4..536a64075f 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 @@ -1,7 +1,4 @@ en: - pageflow: - external_links_options: - feature_name: "External Links Options" pageflow_scrolled: editor: content_elements: diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb index 1b7d82c997..4251d305b5 100644 --- a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +++ b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb @@ -48,7 +48,6 @@ def configure(config) c.features.register('frontend_v2') c.features.register('scrolled_entry_fragment_caching') c.features.register('backdrop_content_elements') - c.features.register('external_links_options') c.additional_frontend_seed_data.register( 'frontendVersion', 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 e122329298..bb14d25c0d 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js @@ -42,9 +42,7 @@ editor.contentElementTypes.register('externalLinkList', { }); this.input('textPosition', SelectInputView, { - values: features.isEnabled('external_links_options') ? - ['below', 'right', 'overlay', 'none'] : - ['below', 'none'] + values: ['below', 'right', 'overlay', 'none'] }); this.group('ContentElementVariant', {entry}); this.input('overlayOpacity', SliderInputView, { @@ -85,6 +83,7 @@ editor.contentElementTypes.register('externalLinkList', { values: ['left', 'right', 'center'] }); this.input('displayButtons', CheckBoxInputView); + this.group('ContentElementInlineFileRightsSettings'); }); } }); diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js index 59ffb5d525..5cf5c3884d 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js @@ -87,6 +87,11 @@ export function ExternalLink({id, configuration, ...props}) { const scaleCategorySuffix = scaleCategorySuffixes[props.textSize || 'small']; + const inlineFileRightsAfterCard = props.textPosition === 'right' || + props.textPosition === 'overlay' || + props.textPosition === 'none'; + + const inlineFileRightsItems = [{file: thumbnailImageFile, label: 'image'}]; return (
  • -
    -
    - - - -
    -
    - -
    - {presentOrEditing('tagline') && - - handleTextChange('tagline', value)} /> - } - - handleTextChange('title', value)} /> - - {presentOrEditing('description') && -
    +
    +
    +
    + + + +
    +
    + {!inlineFileRightsAfterCard && + } +
    + {presentOrEditing('tagline') && + + handleTextChange('tagline', value)} /> + } + + handleTextChange('title', value)} /> + + {presentOrEditing('description') && handleTextChange('description', value)} /> -
    } - {configuration.displayButtons && presentOrEditing('link') && - handleTextChange('link', value)} - onLinkChange={value => handleLinkChange(value)} />} + onChange={value => handleTextChange('description', value)} />} + {configuration.displayButtons && presentOrEditing('link') && +
    + handleTextChange('link', value)} + onLinkChange={value => handleLinkChange(value)} /> +
    } +
    + {inlineFileRightsAfterCard && +
    + +
    }
  • 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 7398abda03..777688bfce 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 @@ -34,19 +34,34 @@ opacity: 1; } +.textPosition-below .cardWrapper, +.textPosition-right .cardWrapper{ + height: 100%; + display: flex; + flex-direction: column; +} + .card { display: flex; - vertical-align: top; border-radius: var(--theme-content-element-box-border-radius); overflow: hidden; will-change: transform; - height: 100%; + flex: 1; } .textPosition-below .card { flex-direction: column; } +.textPosition-overlay .card { + display: grid; +} + +.textPosition-overlay .card > * { + grid-row: 1; + grid-column: 1; +} + .textPosition-none { composes: textPosition-below; } @@ -96,19 +111,23 @@ } .background { - --padding-inline: var(--theme-external-links-card-padding-inline, 15px); color: var(--content-text-color); background-color: var(--card-surface-color); flex: 1; + display: flex; + flex-direction: column; +} + +.textPosition-below .background, +.textPosition-overlay .background { + --padding-inline: var(--theme-external-links-card-padding-inline, 15px); padding-left: min(var(--padding-inline), 5px); padding-right: min(var(--padding-inline), 5px); } .textPosition-overlay .background { - position: absolute; - bottom: 0; - width: 100%; - box-sizing: border-box; + position: relative; + align-self: end; background: transparent; z-index: 1; } @@ -123,12 +142,19 @@ bottom: 0; background: linear-gradient(0deg, var(--card-surface-color), transparent); opacity: calc(0.9 * var(--overlay-opacity, 0.7)); + pointer-events: none; } .textPosition-none .background { display: none; } +.details { + display: flex; + flex-direction: column; + flex: 1; +} + .textPosition-below .details, .textPosition-overlay .details { padding-top: 15px; @@ -143,7 +169,8 @@ } .textPosition-right .details { - padding: 10px 10px 10px 15px; + justify-content: center; + padding: max(10px, 10%) max(20px, 3%); } .details p, @@ -151,7 +178,19 @@ margin-bottom: 0; } -.link { +.details p { + margin-top: 1rem; +} + +.button { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.textPosition-below .button, +.textPosition-overlay .button { margin-bottom: -5px; } @@ -162,3 +201,7 @@ .align-right { text-align: right; } + +.textPosition-right .inlineFileRightsAfterCard { + display: flex; +} diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css index 95e7f369c1..81488aaf91 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css @@ -15,3 +15,7 @@ .textPosition-below { min-height: 240px; } + +.textPosition-overlay { + --link-width-s-phone-columns: 1; +} diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css index fdf0a2ce65..a4667770f9 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css @@ -24,11 +24,24 @@ width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns)); } +.linkWidth-s > * { + max-width: 240px; +} + @container (min-width: 315px) { - .linkWidth-xs, - .linkWidth-s { + .linkWidth-xs { --columns: 2 } + + .linkWidth-s { + --columns: var(--link-width-s-phone-columns, 2) + } +} + +@container (min-width: 400px) { + .linkWidth-s { + --columns: 2; + } } @container (min-width: 500px) { diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js index 048e09d5c2..ba96ba6ea8 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js @@ -166,6 +166,27 @@ storiesOfContentElement(module, { ] }, }, + { + name: 'Text inline file rights, text position right', + configuration: { + textPosition: 'right' + }, + inlineFileRightsWidgetTypeName: 'textInlineFileRights', + }, + { + name: 'Text inline file rights, text position overlay', + configuration: { + textPosition: 'overlay' + }, + inlineFileRightsWidgetTypeName: 'textInlineFileRights', + }, + { + name: 'Icon inline file rights, text position overlay', + configuration: { + textPosition: 'overlay' + }, + inlineFileRightsWidgetTypeName: 'iconInlineFileRights', + }, { name: 'With buttons', configuration: { @@ -202,6 +223,43 @@ storiesOfContentElement(module, { ] } }, + { + name: 'With buttons, text position right', + configuration: { + displayButtons: true, + textPosition: 'right', + itemTexts: { + 1: { + title: editableTextValue('Item 1'), + description: editableTextValue('This is description'), + link: editableTextValue('Read more') + }, + 2: { + title: editableTextValue('Item 2'), + description: editableTextValue('This is another description'), + link: editableTextValue('Read more') + } + }, + itemLinks: { + 1: { + href: 'https://www.pageflow.io/' + }, + 2: { + href: 'https://www.pageflow.io/' + } + }, + links: [ + { + id: '1', + thumbnail: filePermaId('imageFiles', 'turtle') + }, + { + id: '2', + thumbnail: filePermaId('imageFiles', 'turtle') + } + ] + } + }, { name: 'With legacy external links', configuration: { diff --git a/entry_types/scrolled/package/src/frontend/InlineFileRights.js b/entry_types/scrolled/package/src/frontend/InlineFileRights.js index 33f26aa367..40809e1eab 100644 --- a/entry_types/scrolled/package/src/frontend/InlineFileRights.js +++ b/entry_types/scrolled/package/src/frontend/InlineFileRights.js @@ -8,6 +8,7 @@ import styles from './InlineFileRights.module.css'; export function InlineFileRights({items = [], context = 'standAlone', + position, playerControlsFadedOut, playerControlsStandAlone, configuration = {}}) { @@ -22,7 +23,9 @@ export function InlineFileRights({items = [], return ( + props={{context, position, + playerControlsFadedOut, playerControlsStandAlone, + configuration}}>