diff --git a/local_packages/football/Resources/Private/Scss/Abstracts/Varibles/_variables.scss b/local_packages/football/Resources/Private/Scss/Abstracts/Varibles/_variables.scss index e0e9083..16d87d9 100644 --- a/local_packages/football/Resources/Private/Scss/Abstracts/Varibles/_variables.scss +++ b/local_packages/football/Resources/Private/Scss/Abstracts/Varibles/_variables.scss @@ -1 +1,2 @@ // Variables +$gallery-gutter-width: 1rem; diff --git a/local_packages/football/Resources/Private/Scss/Elements/_import.scss b/local_packages/football/Resources/Private/Scss/Elements/_import.scss index def02b3..140a62c 100644 --- a/local_packages/football/Resources/Private/Scss/Elements/_import.scss +++ b/local_packages/football/Resources/Private/Scss/Elements/_import.scss @@ -4,3 +4,4 @@ @import "form"; @import "news"; @import "game"; +@import "textmedia"; diff --git a/local_packages/football/Resources/Private/Scss/Elements/_textmedia.scss b/local_packages/football/Resources/Private/Scss/Elements/_textmedia.scss new file mode 100644 index 0000000..6c6a4e0 --- /dev/null +++ b/local_packages/football/Resources/Private/Scss/Elements/_textmedia.scss @@ -0,0 +1,107 @@ +.ce-gallery { + + figure { + margin-block-end: 1rem; + + .ce-center & { + margin-inline-start: auto; + margin-inline-end: auto; + } + } + + img { + display: block; + } +} + +@media (min-width: 500px) { + + .ce-intext { + + &::after { + display: block; + content: ''; + clear: both; + } + + &.ce-nowrap { + display: flex; + justify-content: space-between; + + .ce-bodytext { + width: calc(50% - (#{$gallery-gutter-width} / 2)); + } + + &.ce-right { + flex-direction: row-reverse; + } + } + } + + .ce-gallery { + + .ce-intext & { + width: calc(50% + (#{$gallery-gutter-width} / 2)); + } + + // use padding for flexbox + .ce-left:not(.ce-nowrap) & { + float: inline-start; + padding-inline-end: $gallery-gutter-width; + } + + .ce-right:not(.ce-nowrap) & { + float: inline-end; + padding-inline-start: $gallery-gutter-width; + } + + .ce-nowrap.ce-left & { + padding-inline-end: $gallery-gutter-width; + } + + .ce-nowrap.ce-right & { + padding-inline-start: $gallery-gutter-width; + } + } +} + +@media (min-width: 850px) { + + .ce-gallery { + // if columns greater 1 + &:not([data-ce-columns='1']) { + + .ce-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + &::after { + content: ''; + flex: auto; + } + } + + .ce-column { + width: 50%; + padding-block: 0; + padding-inline: calc(#{$gallery-gutter-width} / 2); + + &:first-child { + padding-inline-start: 0; + } + + &:last-child { + padding-inline-end: 0; + } + } + } + + &[data-ce-columns='3'] { + + .ce-column { + width: 33.333%; + } + } + } +} diff --git a/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Gallery.html b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Gallery.html new file mode 100644 index 0000000..9186fe9 --- /dev/null +++ b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Gallery.html @@ -0,0 +1,25 @@ + + +
+ +
+
+ + +
+ + +
+ +
+ + +
+ + +
+
+ +
+ + diff --git a/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Rendering/Image.html b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Rendering/Image.html new file mode 100644 index 0000000..2b5cf6b --- /dev/null +++ b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Rendering/Image.html @@ -0,0 +1,4 @@ + + + + diff --git a/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Type.html b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Type.html new file mode 100644 index 0000000..a60dd3a --- /dev/null +++ b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Type.html @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Type/Image.html b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Type/Image.html new file mode 100644 index 0000000..ffd1343 --- /dev/null +++ b/local_packages/football/Resources/Private/Templates/ContentElements/Partials/Media/Type/Image.html @@ -0,0 +1,19 @@ + +
+ + + + + + + + + + + +
+ {file.description -> f:format.nl2br()} +
+ +
+ diff --git a/local_packages/football/Resources/Private/Templates/ContentElements/TextMedia.html b/local_packages/football/Resources/Private/Templates/ContentElements/TextMedia.html index 2d18fde..575b8a4 100644 --- a/local_packages/football/Resources/Private/Templates/ContentElements/TextMedia.html +++ b/local_packages/football/Resources/Private/Templates/ContentElements/TextMedia.html @@ -1,25 +1,38 @@ - + - - -
- {data.bodytext} -
+ + - - -
- Image meta: -
    -
  • alt-text: {files.0.alternative}
    • -
  • title: {files.0.title}
    • -
  • description: {files.0.description}
    • -
  • position: {data.imageorient}
    • -
-
- +
+ + + + + + +
+ + + + {data.bodytext} +
+ + + + +
+ +
+ + + + + + + + +
diff --git a/local_packages/football/Resources/Public/Css/index.css b/local_packages/football/Resources/Public/Css/index.css index 1a49b46..885233e 100644 --- a/local_packages/football/Resources/Public/Css/index.css +++ b/local_packages/football/Resources/Public/Css/index.css @@ -11658,4 +11658,91 @@ textarea.form-control { color: #2D479A; font-size: 2.5rem; font-weight: bolder; +} + +.ce-gallery figure { + margin-block-end: 1rem; +} + +.ce-center .ce-gallery figure { + margin-inline-start: auto; + margin-inline-end: auto; +} + +.ce-gallery img { + display: block; +} + +@media (min-width: 500px) { + .ce-intext::after { + display: block; + content: ""; + clear: both; + } + + .ce-intext.ce-nowrap { + display: flex; + justify-content: space-between; + } + + .ce-intext.ce-nowrap .ce-bodytext { + width: calc(50% - 1rem / 2); + } + + .ce-intext.ce-nowrap.ce-right { + flex-direction: row-reverse; + } + + .ce-intext .ce-gallery { + width: calc(50% + 1rem / 2); + } + + .ce-left:not(.ce-nowrap) .ce-gallery { + float: inline-start; + padding-inline-end: 1rem; + } + + .ce-right:not(.ce-nowrap) .ce-gallery { + float: inline-end; + padding-inline-start: 1rem; + } + + .ce-nowrap.ce-left .ce-gallery { + padding-inline-end: 1rem; + } + + .ce-nowrap.ce-right .ce-gallery { + padding-inline-start: 1rem; + } +} + +@media (min-width: 850px) { + .ce-gallery:not([data-ce-columns="1"]) .ce-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + + .ce-gallery:not([data-ce-columns="1"]) .ce-row::after { + content: ""; + flex: auto; + } + + .ce-gallery:not([data-ce-columns="1"]) .ce-column { + width: 50%; + padding-block: 0; + padding-inline: calc(1rem / 2); + } + + .ce-gallery:not([data-ce-columns="1"]) .ce-column:first-child { + padding-inline-start: 0; + } + + .ce-gallery:not([data-ce-columns="1"]) .ce-column:last-child { + padding-inline-end: 0; + } + + .ce-gallery[data-ce-columns="3"] .ce-column { + width: 33.333%; + } } \ No newline at end of file