Skip to content

Commit f6291bb

Browse files
tftf
authored
Merge pull request #2226 from tf/teaser-text-position-details
Fine tune teaser test positions
2 parents 5306216 + 2ae828b commit f6291bb

14 files changed

Lines changed: 224 additions & 72 deletions

File tree

‎entry_types/scrolled/config/locales/new/ext-link-options.de.yml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
de:
2-
pageflow:
3-
external_links_options:
4-
feature_name: "External Links Optionen"
52
pageflow_scrolled:
63
editor:
74
content_elements:

‎entry_types/scrolled/config/locales/new/ext-link-options.en.yml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
en:
2-
pageflow:
3-
external_links_options:
4-
feature_name: "External Links Options"
52
pageflow_scrolled:
63
editor:
74
content_elements:

‎entry_types/scrolled/lib/pageflow_scrolled/plugin.rb‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ def configure(config)
4848
c.features.register('frontend_v2')
4949
c.features.register('scrolled_entry_fragment_caching')
5050
c.features.register('backdrop_content_elements')
51-
c.features.register('external_links_options')
5251

5352
c.additional_frontend_seed_data.register(
5453
'frontendVersion',

‎entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ editor.contentElementTypes.register('externalLinkList', {
4242
});
4343

4444
this.input('textPosition', SelectInputView, {
45-
values: features.isEnabled('external_links_options') ?
46-
['below', 'right', 'overlay', 'none'] :
47-
['below', 'none']
45+
values: ['below', 'right', 'overlay', 'none']
4846
});
4947
this.group('ContentElementVariant', {entry});
5048
this.input('overlayOpacity', SliderInputView, {
@@ -85,6 +83,7 @@ editor.contentElementTypes.register('externalLinkList', {
8583
values: ['left', 'right', 'center']
8684
});
8785
this.input('displayButtons', CheckBoxInputView);
86+
this.group('ContentElementInlineFileRightsSettings');
8887
});
8988
}
9089
});

‎entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js‎

Lines changed: 60 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,11 @@ export function ExternalLink({id, configuration, ...props}) {
8787

8888
const scaleCategorySuffix = scaleCategorySuffixes[props.textSize || 'small'];
8989

90+
const inlineFileRightsAfterCard = props.textPosition === 'right' ||
91+
props.textPosition === 'overlay' ||
92+
props.textPosition === 'none';
93+
94+
const inlineFileRightsItems = [{file: thumbnailImageFile, label: 'image'}];
9095
return (
9196
<li className={classNames(styles.item,
9297
styles[`textPosition-${props.textPosition}`],
@@ -101,53 +106,66 @@ export function ExternalLink({id, configuration, ...props}) {
101106
href={href}
102107
openInNewTab={openInNewTab}
103108
onChange={handleLinkChange}>
104-
<div className={classNames(
105-
styles.card,
106-
styles[`thumbnailSize-${props.thumbnailSize}`]
107-
)}>
108-
<div className={styles.thumbnail}>
109-
<Thumbnail imageFile={thumbnailImageFile}
110-
aspectRatio={props.thumbnailAspectRatio}
111-
cropPosition={props.thumbnailCropPosition}
112-
load={props.loadImages}>
113-
<InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
114-
</Thumbnail>
115-
</div>
116-
<div className={classNames(styles.background,
117-
styles[`align-${configuration.textAlign}`],
118-
props.darkBackground ? styles.light : styles.dark)}
119-
style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
120-
<InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
121-
<div className={styles.details}>
122-
{presentOrEditing('tagline') &&
123-
<Text scaleCategory={`teaserTagline-${scaleCategorySuffix}`}>
124-
<EditableInlineText value={itemTexts[id]?.tagline}
125-
placeholder={t('pageflow_scrolled.inline_editing.type_tagline')}
126-
onChange={value => handleTextChange('tagline', value)} />
127-
</Text>}
128-
<Text scaleCategory={`teaserTitle-${scaleCategorySuffix}`}>
129-
<EditableInlineText value={itemTexts[id]?.title || legacyTexts.title}
130-
placeholder={t('pageflow_scrolled.inline_editing.type_heading')}
131-
onChange={value => handleTextChange('title', value)} />
132-
</Text>
133-
{presentOrEditing('description') &&
134-
<div className={styles.link_desc}>
109+
<div className={styles.cardWrapper}>
110+
<div className={classNames(
111+
styles.card,
112+
styles[`thumbnailSize-${props.thumbnailSize}`]
113+
)}>
114+
<div className={styles.thumbnail}>
115+
<Thumbnail imageFile={thumbnailImageFile}
116+
aspectRatio={props.thumbnailAspectRatio}
117+
cropPosition={props.thumbnailCropPosition}
118+
load={props.loadImages}>
119+
<InlineFileRights configuration={configuration}
120+
context="insideElement"
121+
position={props.textPosition === 'overlay' ? 'top': 'bottom'}
122+
items={inlineFileRightsItems} />
123+
</Thumbnail>
124+
</div>
125+
<div className={classNames(styles.background,
126+
styles[`align-${configuration.textAlign}`],
127+
props.darkBackground ? styles.light : styles.dark)}
128+
style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
129+
{!inlineFileRightsAfterCard &&
130+
<InlineFileRights configuration={configuration}
131+
context="afterElement"
132+
items={inlineFileRightsItems} />}
133+
<div className={styles.details}>
134+
{presentOrEditing('tagline') &&
135+
<Text scaleCategory={`teaserTagline-${scaleCategorySuffix}`}>
136+
<EditableInlineText value={itemTexts[id]?.tagline}
137+
placeholder={t('pageflow_scrolled.inline_editing.type_tagline')}
138+
onChange={value => handleTextChange('tagline', value)} />
139+
</Text>}
140+
<Text scaleCategory={`teaserTitle-${scaleCategorySuffix}`}>
141+
<EditableInlineText value={itemTexts[id]?.title || legacyTexts.title}
142+
placeholder={t('pageflow_scrolled.inline_editing.type_heading')}
143+
onChange={value => handleTextChange('title', value)} />
144+
</Text>
145+
{presentOrEditing('description') &&
135146
<EditableText value={itemTexts[id]?.description || legacyTexts.description}
136147
scaleCategory={`teaserDescription-${scaleCategorySuffix}`}
137148
placeholder={t('pageflow_scrolled.inline_editing.type_text')}
138-
onChange={value => handleTextChange('description', value)} />
139-
</div>}
140-
{configuration.displayButtons && presentOrEditing('link') &&
141-
<LinkButton className={styles.link}
142-
href={href}
143-
openInNewTab={openInNewTab}
144-
value={itemTexts[id]?.link}
145-
linkPreviewDisabled={true}
146-
actionButtonVisible={false}
147-
onTextChange={value => handleTextChange('link', value)}
148-
onLinkChange={value => handleLinkChange(value)} />}
149+
onChange={value => handleTextChange('description', value)} />}
150+
{configuration.displayButtons && presentOrEditing('link') &&
151+
<div className={styles.button}>
152+
<LinkButton href={href}
153+
openInNewTab={openInNewTab}
154+
value={itemTexts[id]?.link}
155+
linkPreviewDisabled={true}
156+
actionButtonVisible={false}
157+
onTextChange={value => handleTextChange('link', value)}
158+
onLinkChange={value => handleLinkChange(value)} />
159+
</div>}
160+
</div>
149161
</div>
150162
</div>
163+
{inlineFileRightsAfterCard &&
164+
<div className={styles.inlineFileRightsAfterCard}>
165+
<InlineFileRights configuration={configuration}
166+
context="afterElement"
167+
items={inlineFileRightsItems} />
168+
</div>}
151169
</div>
152170
</Link>
153171
</li>

‎entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css‎

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,34 @@
3434
opacity: 1;
3535
}
3636

37+
.textPosition-below .cardWrapper,
38+
.textPosition-right .cardWrapper{
39+
height: 100%;
40+
display: flex;
41+
flex-direction: column;
42+
}
43+
3744
.card {
3845
display: flex;
39-
vertical-align: top;
4046
border-radius: var(--theme-content-element-box-border-radius);
4147
overflow: hidden;
4248
will-change: transform;
43-
height: 100%;
49+
flex: 1;
4450
}
4551

4652
.textPosition-below .card {
4753
flex-direction: column;
4854
}
4955

56+
.textPosition-overlay .card {
57+
display: grid;
58+
}
59+
60+
.textPosition-overlay .card > * {
61+
grid-row: 1;
62+
grid-column: 1;
63+
}
64+
5065
.textPosition-none {
5166
composes: textPosition-below;
5267
}
@@ -96,19 +111,23 @@
96111
}
97112

98113
.background {
99-
--padding-inline: var(--theme-external-links-card-padding-inline, 15px);
100114
color: var(--content-text-color);
101115
background-color: var(--card-surface-color);
102116
flex: 1;
117+
display: flex;
118+
flex-direction: column;
119+
}
120+
121+
.textPosition-below .background,
122+
.textPosition-overlay .background {
123+
--padding-inline: var(--theme-external-links-card-padding-inline, 15px);
103124
padding-left: min(var(--padding-inline), 5px);
104125
padding-right: min(var(--padding-inline), 5px);
105126
}
106127

107128
.textPosition-overlay .background {
108-
position: absolute;
109-
bottom: 0;
110-
width: 100%;
111-
box-sizing: border-box;
129+
position: relative;
130+
align-self: end;
112131
background: transparent;
113132
z-index: 1;
114133
}
@@ -123,12 +142,19 @@
123142
bottom: 0;
124143
background: linear-gradient(0deg, var(--card-surface-color), transparent);
125144
opacity: calc(0.9 * var(--overlay-opacity, 0.7));
145+
pointer-events: none;
126146
}
127147

128148
.textPosition-none .background {
129149
display: none;
130150
}
131151

152+
.details {
153+
display: flex;
154+
flex-direction: column;
155+
flex: 1;
156+
}
157+
132158
.textPosition-below .details,
133159
.textPosition-overlay .details {
134160
padding-top: 15px;
@@ -143,15 +169,28 @@
143169
}
144170

145171
.textPosition-right .details {
146-
padding: 10px 10px 10px 15px;
172+
justify-content: center;
173+
padding: max(10px, 10%) max(20px, 3%);
147174
}
148175

149176
.details p,
150177
.textPosition-overlay .title:last-child {
151178
margin-bottom: 0;
152179
}
153180

154-
.link {
181+
.details p {
182+
margin-top: 1rem;
183+
}
184+
185+
.button {
186+
flex: 1;
187+
display: flex;
188+
flex-direction: column;
189+
justify-content: flex-end;
190+
}
191+
192+
.textPosition-below .button,
193+
.textPosition-overlay .button {
155194
margin-bottom: -5px;
156195
}
157196

@@ -162,3 +201,7 @@
162201
.align-right {
163202
text-align: right;
164203
}
204+
205+
.textPosition-right .inlineFileRightsAfterCard {
206+
display: flex;
207+
}

‎entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,7 @@
1515
.textPosition-below {
1616
min-height: 240px;
1717
}
18+
19+
.textPosition-overlay {
20+
--link-width-s-phone-columns: 1;
21+
}

‎entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,24 @@
2424
width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
2525
}
2626

27+
.linkWidth-s > * {
28+
max-width: 240px;
29+
}
30+
2731
@container (min-width: 315px) {
28-
.linkWidth-xs,
29-
.linkWidth-s {
32+
.linkWidth-xs {
3033
--columns: 2
3134
}
35+
36+
.linkWidth-s {
37+
--columns: var(--link-width-s-phone-columns, 2)
38+
}
39+
}
40+
41+
@container (min-width: 400px) {
42+
.linkWidth-s {
43+
--columns: 2;
44+
}
3245
}
3346

3447
@container (min-width: 500px) {

‎entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,27 @@ storiesOfContentElement(module, {
166166
]
167167
},
168168
},
169+
{
170+
name: 'Text inline file rights, text position right',
171+
configuration: {
172+
textPosition: 'right'
173+
},
174+
inlineFileRightsWidgetTypeName: 'textInlineFileRights',
175+
},
176+
{
177+
name: 'Text inline file rights, text position overlay',
178+
configuration: {
179+
textPosition: 'overlay'
180+
},
181+
inlineFileRightsWidgetTypeName: 'textInlineFileRights',
182+
},
183+
{
184+
name: 'Icon inline file rights, text position overlay',
185+
configuration: {
186+
textPosition: 'overlay'
187+
},
188+
inlineFileRightsWidgetTypeName: 'iconInlineFileRights',
189+
},
169190
{
170191
name: 'With buttons',
171192
configuration: {
@@ -202,6 +223,43 @@ storiesOfContentElement(module, {
202223
]
203224
}
204225
},
226+
{
227+
name: 'With buttons, text position right',
228+
configuration: {
229+
displayButtons: true,
230+
textPosition: 'right',
231+
itemTexts: {
232+
1: {
233+
title: editableTextValue('Item 1'),
234+
description: editableTextValue('This is description'),
235+
link: editableTextValue('Read more')
236+
},
237+
2: {
238+
title: editableTextValue('Item 2'),
239+
description: editableTextValue('This is another description'),
240+
link: editableTextValue('Read more')
241+
}
242+
},
243+
itemLinks: {
244+
1: {
245+
href: 'https://www.pageflow.io/'
246+
},
247+
2: {
248+
href: 'https://www.pageflow.io/'
249+
}
250+
},
251+
links: [
252+
{
253+
id: '1',
254+
thumbnail: filePermaId('imageFiles', 'turtle')
255+
},
256+
{
257+
id: '2',
258+
thumbnail: filePermaId('imageFiles', 'turtle')
259+
}
260+
]
261+
}
262+
},
205263
{
206264
name: 'With legacy external links',
207265
configuration: {

0 commit comments

Comments
 (0)