Skip to content

Commit 8e9bc7b

Browse files
tftf
committed
Fine tune teaser text positions
* Display icon inline file rights in upper corner for overlay text position. * Display text inline file rights below card for overlay, right and none text position. * Align buttons vertically. * Center card content vertically in text position right. REDMINE-20852
1 parent d4c2c06 commit 8e9bc7b

9 files changed

Lines changed: 183 additions & 60 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ editor.contentElementTypes.register('externalLinkList', {
8585
values: ['left', 'right', 'center']
8686
});
8787
this.input('displayButtons', CheckBoxInputView);
88+
this.group('ContentElementInlineFileRightsSettings');
8889
});
8990
}
9091
});

‎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/stories.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,43 @@ storiesOfContentElement(module, {
202202
]
203203
}
204204
},
205+
{
206+
name: 'With buttons, text position right',
207+
configuration: {
208+
displayButtons: true,
209+
textPosition: 'right',
210+
itemTexts: {
211+
1: {
212+
title: editableTextValue('Item 1'),
213+
description: editableTextValue('This is description'),
214+
link: editableTextValue('Read more')
215+
},
216+
2: {
217+
title: editableTextValue('Item 2'),
218+
description: editableTextValue('This is another description'),
219+
link: editableTextValue('Read more')
220+
}
221+
},
222+
itemLinks: {
223+
1: {
224+
href: 'https://www.pageflow.io/'
225+
},
226+
2: {
227+
href: 'https://www.pageflow.io/'
228+
}
229+
},
230+
links: [
231+
{
232+
id: '1',
233+
thumbnail: filePermaId('imageFiles', 'turtle')
234+
},
235+
{
236+
id: '2',
237+
thumbnail: filePermaId('imageFiles', 'turtle')
238+
}
239+
]
240+
}
241+
},
205242
{
206243
name: 'With legacy external links',
207244
configuration: {

‎entry_types/scrolled/package/src/frontend/InlineFileRights.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import styles from './InlineFileRights.module.css';
88

99
export function InlineFileRights({items = [],
1010
context = 'standAlone',
11+
position,
1112
playerControlsFadedOut,
1213
playerControlsStandAlone,
1314
configuration = {}}) {
@@ -22,7 +23,9 @@ export function InlineFileRights({items = [],
2223

2324
return (
2425
<Widget role="inlineFileRights"
25-
props={{context, playerControlsFadedOut, playerControlsStandAlone, configuration}}>
26+
props={{context, position,
27+
playerControlsFadedOut, playerControlsStandAlone,
28+
configuration}}>
2629
<ul className={styles.list}>
2730
{filteredItems.map(({label, file}) =>
2831
<li key={`${label}-${file.id}`}>

‎entry_types/scrolled/package/src/frontend/LinkButton.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
min-width: var(--theme-link-button-width, 100%);
1616
box-sizing: border-box;
1717
justify-content: center;
18+
align-items: center;
1819
gap: 0.5em;
1920
border-radius: var(--theme-link-button-border-radius, 5px);
2021
text-decoration: none;

‎entry_types/scrolled/package/src/frontend/Text.module.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,6 @@
224224
line-height: 1.3;
225225
font-weight: bold;
226226
font-size: text-s;
227-
margin-bottom: 1rem;
228227
}
229228

230229
.teaserTitle-md {
@@ -233,7 +232,6 @@
233232
line-height: 1.3;
234233
font-weight: bold;
235234
font-size: 19.8px;
236-
margin-bottom: 1rem;
237235
}
238236

239237
.teaserTitle-sm {
@@ -242,7 +240,6 @@
242240
line-height: 1.3;
243241
font-weight: bold;
244242
font-size: 19.2px;
245-
margin-bottom: 1rem;
246243
}
247244

248245
.teaserTagline-lg {

‎entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import {ThemeIcon} from 'pageflow-scrolled/frontend';
66
import styles from './IconInlineFileRights.module.css';
77

88
export function IconInlineFileRights({
9-
context, playerControlsStandAlone, playerControlsFadedOut, children
9+
context, position, playerControlsStandAlone, playerControlsFadedOut, children
1010
}) {
1111
if (context === 'afterElement') {
1212
return null;
1313
}
1414

1515
return (
16-
<div className={classNames(styles.wrapper, {
16+
<div className={classNames(styles.wrapper, styles[`position-${position || 'bottom'}`], {
1717
[styles.fadedOut]: context !== 'playerControls' || playerControlsFadedOut,
1818
[styles.standAlone]: context !== 'playerControls'
1919
})}>

0 commit comments

Comments
 (0)