Merge pull request #2226 from tf/teaser-text-position-details

Fine tune teaser test positions

Author: tf

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:

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:

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',

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');
     });
   }
 });

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 (
     <li className={classNames(styles.item,
                               styles[`textPosition-${props.textPosition}`],
@@ -101,53 +106,66 @@ export function ExternalLink({id, configuration, ...props}) {
             href={href}
             openInNewTab={openInNewTab}
             onChange={handleLinkChange}>
-        <div className={classNames(
-          styles.card,
-          styles[`thumbnailSize-${props.thumbnailSize}`]
-        )}>
-          <div className={styles.thumbnail}>
-            <Thumbnail imageFile={thumbnailImageFile}
-                       aspectRatio={props.thumbnailAspectRatio}
-                       cropPosition={props.thumbnailCropPosition}
-                       load={props.loadImages}>
-              <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
-            </Thumbnail>
-          </div>
-          <div className={classNames(styles.background,
-                                     styles[`align-${configuration.textAlign}`],
-                                     props.darkBackground ? styles.light : styles.dark)}
-               style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
-            <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
-            <div className={styles.details}>
-              {presentOrEditing('tagline') &&
-               <Text scaleCategory={`teaserTagline-${scaleCategorySuffix}`}>
-                 <EditableInlineText value={itemTexts[id]?.tagline}
-                                     placeholder={t('pageflow_scrolled.inline_editing.type_tagline')}
-                                     onChange={value => handleTextChange('tagline', value)} />
-               </Text>}
-              <Text scaleCategory={`teaserTitle-${scaleCategorySuffix}`}>
-                <EditableInlineText value={itemTexts[id]?.title || legacyTexts.title}
-                                    placeholder={t('pageflow_scrolled.inline_editing.type_heading')}
-                                    onChange={value => handleTextChange('title', value)} />
-              </Text>
-              {presentOrEditing('description') &&
-               <div className={styles.link_desc}>
+        <div className={styles.cardWrapper}>
+          <div className={classNames(
+            styles.card,
+            styles[`thumbnailSize-${props.thumbnailSize}`]
+          )}>
+            <div className={styles.thumbnail}>
+              <Thumbnail imageFile={thumbnailImageFile}
+                         aspectRatio={props.thumbnailAspectRatio}
+                         cropPosition={props.thumbnailCropPosition}
+                         load={props.loadImages}>
+                <InlineFileRights configuration={configuration}
+                                  context="insideElement"
+                                  position={props.textPosition === 'overlay' ? 'top': 'bottom'}
+                                  items={inlineFileRightsItems} />
+              </Thumbnail>
+            </div>
+            <div className={classNames(styles.background,
+                                       styles[`align-${configuration.textAlign}`],
+                                       props.darkBackground ? styles.light : styles.dark)}
+                 style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
+              {!inlineFileRightsAfterCard &&
+               <InlineFileRights configuration={configuration}
+                                 context="afterElement"
+                                 items={inlineFileRightsItems} />}
+              <div className={styles.details}>
+                {presentOrEditing('tagline') &&
+                 <Text scaleCategory={`teaserTagline-${scaleCategorySuffix}`}>
+                   <EditableInlineText value={itemTexts[id]?.tagline}
+                                       placeholder={t('pageflow_scrolled.inline_editing.type_tagline')}
+                                       onChange={value => handleTextChange('tagline', value)} />
+                 </Text>}
+                <Text scaleCategory={`teaserTitle-${scaleCategorySuffix}`}>
+                  <EditableInlineText value={itemTexts[id]?.title || legacyTexts.title}
+                                      placeholder={t('pageflow_scrolled.inline_editing.type_heading')}
+                                      onChange={value => handleTextChange('title', value)} />
+                </Text>
+                {presentOrEditing('description') &&
                  <EditableText value={itemTexts[id]?.description || legacyTexts.description}
                                scaleCategory={`teaserDescription-${scaleCategorySuffix}`}
                                placeholder={t('pageflow_scrolled.inline_editing.type_text')}
-                               onChange={value => handleTextChange('description', value)} />
-               </div>}
-              {configuration.displayButtons && presentOrEditing('link') &&
-               <LinkButton className={styles.link}
-                           href={href}
-                           openInNewTab={openInNewTab}
-                           value={itemTexts[id]?.link}
-                           linkPreviewDisabled={true}
-                           actionButtonVisible={false}
-                           onTextChange={value => handleTextChange('link', value)}
-                           onLinkChange={value => handleLinkChange(value)} />}
+                               onChange={value => handleTextChange('description', value)} />}
+                {configuration.displayButtons && presentOrEditing('link') &&
+                 <div className={styles.button}>
+                   <LinkButton href={href}
+                               openInNewTab={openInNewTab}
+                               value={itemTexts[id]?.link}
+                               linkPreviewDisabled={true}
+                               actionButtonVisible={false}
+                               onTextChange={value => handleTextChange('link', value)}
+                               onLinkChange={value => handleLinkChange(value)} />
+                 </div>}
+              </div>
             </div>
           </div>
+          {inlineFileRightsAfterCard &&
+           <div className={styles.inlineFileRightsAfterCard}>
+             <InlineFileRights configuration={configuration}
+                               context="afterElement"
+                               items={inlineFileRightsItems} />
+           </div>}
         </div>
       </Link>
     </li>

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,15 +169,28 @@
 }
 
 .textPosition-right .details {
-  padding: 10px 10px 10px 15px;
+  justify-content: center;
+  padding: max(10px, 10%) max(20px, 3%);
 }
 
 .details p,
 .textPosition-overlay .title:last-child {
   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;
+}

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;
+}

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

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