diff --git a/assets/development/scripts/organization.js b/assets/development/scripts/organization.js index 3bd379e..ecb02c1 100644 --- a/assets/development/scripts/organization.js +++ b/assets/development/scripts/organization.js @@ -94,6 +94,10 @@ let loadMedias = () => { loadMedias() let openModal = (index) => { + if (index === 'extra') { + index = 5 + } + mediaModal.style.visibility = 'visible' mediaModal.style.opacity = 1 diff --git a/assets/development/styles/organization.css b/assets/development/styles/organization.css index 5292560..ac388dd 100644 --- a/assets/development/styles/organization.css +++ b/assets/development/styles/organization.css @@ -109,6 +109,10 @@ ********************************************************************************/ +.media-mosaic-container { + position: relative; +} + .media-mosaic { margin-top: .75em; width: 100%; @@ -317,6 +321,25 @@ right: 2em !important; } +/** +Extra count +**/ +.media-gallery-extra-count { + position: absolute; + width: 100%; + + margin-top: .25em; + font-size: 0.8em; + + display: flex; + justify-content: flex-end; +} + +.media-gallery-extra-count a { + cursor: pointer; + padding: .25em; +} + /* ***************************************************************************** diff --git a/src/controllers/PublicController.ts b/src/controllers/PublicController.ts index 6332552..b151175 100644 --- a/src/controllers/PublicController.ts +++ b/src/controllers/PublicController.ts @@ -200,10 +200,12 @@ export default class PublicController { * Parse gallery */ if (Array.isArray(version.gallery)) { - version.gallery = version.gallery.slice(0, 5).map((media: any) => { + version.gallery = version.gallery.map((media: any) => { media.isVideo = media.contentType.indexOf('video/') !== -1 return media }) + version.firstGallery = version.gallery.slice(0, 5) + version.secondGallery = version.gallery.slice(5) } /** diff --git a/views/organization.twig b/views/organization.twig index f6be8dd..f5e095c 100644 --- a/views/organization.twig +++ b/views/organization.twig @@ -45,54 +45,75 @@
- {% if data.gallery|length > 0 %} -
- {% for media in data.gallery %} -
+
+ {% if data.firstGallery|length > 0 %} +
+ {% for media in data.firstGallery %}
- {% if media.isVideo %} -
- + class="media-container" + data-video="{{ media.isVideo }}" + data-location="{{ media.location }}" + onclick="openModal({{ loop.index - 1 }})"> +
+ {% if media.isVideo %} +
+ +
+ {% endif %}
- {% endif %} + {% endfor %}
- {% endfor %} -
-
-
-
-
-
- + +
+
+
+
+
+ +
+
-
-
- +
+
+ +
+
+
+
+ +
-
-
- -
+ {% endif %} + {% if data.secondGallery|length == 1 %} + + {% endif %} + {% if data.secondGallery|length > 1 %} + + {% endif %}
- {% endif %} {# {% if data.descriptionLong|length > 0 %} #}