- {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}}>
{filteredItems.map(({label, file}) =>
-
diff --git a/entry_types/scrolled/package/src/frontend/LinkButton.module.css b/entry_types/scrolled/package/src/frontend/LinkButton.module.css
index 4583dfccdc..1e65bb0c45 100644
--- a/entry_types/scrolled/package/src/frontend/LinkButton.module.css
+++ b/entry_types/scrolled/package/src/frontend/LinkButton.module.css
@@ -15,6 +15,7 @@
min-width: var(--theme-link-button-width, 100%);
box-sizing: border-box;
justify-content: center;
+ align-items: center;
gap: 0.5em;
border-radius: var(--theme-link-button-border-radius, 5px);
text-decoration: none;
diff --git a/entry_types/scrolled/package/src/frontend/Text.module.css b/entry_types/scrolled/package/src/frontend/Text.module.css
index e1586d770f..248dad8709 100644
--- a/entry_types/scrolled/package/src/frontend/Text.module.css
+++ b/entry_types/scrolled/package/src/frontend/Text.module.css
@@ -224,7 +224,6 @@
line-height: 1.3;
font-weight: bold;
font-size: text-s;
- margin-bottom: 1rem;
}
.teaserTitle-md {
@@ -233,7 +232,6 @@
line-height: 1.3;
font-weight: bold;
font-size: 19.8px;
- margin-bottom: 1rem;
}
.teaserTitle-sm {
@@ -242,7 +240,6 @@
line-height: 1.3;
font-weight: bold;
font-size: 19.2px;
- margin-bottom: 1rem;
}
.teaserTagline-lg {
diff --git a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js
index 7fa7fb2ecf..34c023171e 100644
--- a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js
+++ b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js
@@ -6,14 +6,14 @@ import {ThemeIcon} from 'pageflow-scrolled/frontend';
import styles from './IconInlineFileRights.module.css';
export function IconInlineFileRights({
- context, playerControlsStandAlone, playerControlsFadedOut, children
+ context, position, playerControlsStandAlone, playerControlsFadedOut, children
}) {
if (context === 'afterElement') {
return null;
}
return (
-
diff --git a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css
index 6605a12f89..4e23a3ff01 100644
--- a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css
+++ b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css
@@ -2,11 +2,19 @@
color: #fff;
position: absolute;
right: 0;
- bottom: 0;
left: 0;
display: flex;
justify-content: flex-end;
pointer-events: none;
+ z-index: 2;
+}
+
+.position-top {
+ top: 0;
+}
+
+.position-bottom {
+ bottom: 0;
}
.standAlone > * {
@@ -57,7 +65,6 @@
font-family: sans-serif;
line-height: 1.4;
position: absolute;
- bottom: 38px;
right: 5px;
background-color: rgba(17, 17, 17, 0.9);
border-radius: 3px;
@@ -72,16 +79,32 @@
z-index: 1;
}
+.position-bottom .tooltip {
+ bottom: 38px;
+}
+
+.position-top .tooltip {
+ top: 38px;
+}
+
.tooltip::after {
content: "";
display: block;
border: solid 5px transparent;
- border-top-color: rgba(17, 17, 17, 0.9);
position: absolute;
right: 11px;
+}
+
+.position-bottom .tooltip::after {
+ border-top-color: rgba(17, 17, 17, 0.9);
top: 100%;
}
+.position-top .tooltip::after {
+ border-bottom-color: rgba(17, 17, 17, 0.9);
+ bottom: 100%;
+}
+
.tooltip a {
color: #fff;
text-decoration-color: rgba(255, 255, 255, 0.3);