diff --git a/Resources/Private/Templates/Vimeo/Index.html b/Resources/Private/Templates/Vimeo/Index.html index 7b9e9d8d84ec447d1da2a6671816f2f79fa22c47..12f71b03dcccf503747fc18bb6fd051065de5106 100644 --- a/Resources/Private/Templates/Vimeo/Index.html +++ b/Resources/Private/Templates/Vimeo/Index.html @@ -40,26 +40,64 @@ <f:else> <f:comment><!--Set the layout to single if there is only one item.--></f:comment> <form> - <div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}"> - <f:if condition="{feedCount} < 2"> + <div class="row"> + <f:if condition="{filtersTop} || {submitButton.position} == 'top' || {submitButton.position} == 'both'"> + <div class="sg-video-filters sg-video-filters-top"> + <f:for each="{filtersTop}" as="filter"> + <f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" /> + </f:for> + + <f:if condition="{submitButton.position} == top || {submitButton.position} == 'both'"> + <div class="sg-video-submit-filters sg-video-submit-filters-top"> + <button class="{submitButton.cssClass}" type="submit">{f:translate(key: submitButton.label)}</button> + </div> + </f:if> + </div> + </f:if> + + <f:if condition="{notFound}"> <f:then> - <f:render section="videoItem" arguments="{ - feedItem: response.items.0, - titleChars: settings.maxTitleChars, - descChars: settings.maxDescriptionChars - }" /> + <f:render partial="NotFound" arguments="{name: filter.name, label: filter.label}" /> </f:then> <f:else> - <f:switch expression="{settings.layout}"> - <f:case value="playlist"> - <f:render section="list-playlist" arguments="{_all}" /> - </f:case> - <f:defaultCase> - <f:render section="list" arguments="{_all}" /> - </f:defaultCase> - </f:switch> + + <div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}"> + <f:if condition="{feedCount} < 2"> + <f:then> + <f:render section="videoItem" arguments="{ + feedItem: response.items.0, + titleChars: settings.maxTitleChars, + descChars: settings.maxDescriptionChars + }" /> + </f:then> + <f:else> + <f:switch expression="{settings.layout}"> + <f:case value="playlist"> + <f:render section="list-playlist" arguments="{_all}" /> + </f:case> + <f:defaultCase> + <f:render section="list" arguments="{_all}" /> + </f:defaultCase> + </f:switch> + </f:else> + </f:if> + </div> </f:else> </f:if> + + <f:if condition="{filtersBottom} || {submitButton.position} == 'bottom' || {submitButton.position} == 'both'"> + <div class="sg-video-filters sg-video-filters-bottom"> + <f:for each="{filtersBottom}" as="filter"> + <f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" /> + </f:for> + + <f:if condition="{submitButton.position} == 'bottom' || {submitButton.position} == 'both'"> + <div class="sg-video-submit-filters sg-video-submit-filters-bottom"> + <button class="{submitButton.cssClass}" type="submit">{f:translate(key: submitButton.label)}</button> + </div> + </f:if> + </div> + </f:if> </div> </form> </f:else> @@ -113,10 +151,10 @@ </f:variable> <div class="sg-video__item"> <a class="sg-video__image-container sg-video-item" href="{feedItemUrl}" target="_blank" - data-disable-lightbox="{settings.disableLightbox}" - data-disable-lightbox-mobile="{settings.disableLightboxMobile}" - data-additional-url-parameters="{urlParameters}" - data-video-type="vimeo"> + data-disable-lightbox="{settings.disableLightbox}" + data-disable-lightbox-mobile="{settings.disableLightboxMobile}" + data-additional-url-parameters="{urlParameters}" + data-video-type="vimeo"> <span> <vi:renderSvg color="currentColor" name="solid-play"></vi:renderSvg> <f:if condition="{feedItem.thumbnail}"> @@ -180,8 +218,8 @@ <f:section name="readMoreButton"> <button type="button" class="sg-video__read-more" - data-button-open-text="{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}" - data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'sg_vimeo')}"><span class="sg-video__read-more-text">{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}</span> + data-button-open-text="{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}" + data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'sg_vimeo')}"><span class="sg-video__read-more-text">{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}</span> <vi:renderSvg color="currentColor" name="solid-chevron-down" class="sg-video__read-more-arrow"></vi:renderSvg> </button> </f:section>