[TASK] Slider Container, add option to control arrows position (#240)

* [TASK] Slider Container, add option to controll arrows position, remove unneeded styles and javascript * [FIX] clean up styles
t3kit · Jun 9, 2017 · b38183a · b38183a
1 parent 504f7f7
commit b38183a
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 48 deletions.
diff --git a/Configuration/GridElements/FlexForms/SliderContainer.xml b/Configuration/GridElements/FlexForms/SliderContainer.xml
@@ -37,6 +37,15 @@
 							</config>
 						</TCEforms>
 					</paginationPosition>
+					<arrowsPosition>
+						<TCEforms>
+							<label>LLL:EXT:theme_t3kit/Resources/Private/Language/GridElements.xlf:slider_container.flexform.arrowsPosition</label>
+							<config>
+								<type>check</type>
+								<default>1</default>
+							</config>
+						</TCEforms>
+					</arrowsPosition>
 					<loop>
 						<TCEforms>
 							<label>LLL:EXT:theme_t3kit/Resources/Private/Language/GridElements.xlf:slider_container.flexform.loop</label>

diff --git a/Resources/Private/Language/GridElements.xlf b/Resources/Private/Language/GridElements.xlf
@@ -309,6 +309,9 @@
 			<trans-unit id="slider_container.flexform.paginationPosition">
 				<source>Change pagination position (outside/inside of container)</source>
 			</trans-unit>
+			<trans-unit id="slider_container.flexform.arrowsPosition">
+				<source>Change arrows position (outside/inside of container)</source>
+			</trans-unit>
 			<trans-unit id="slider_container.flexform.loop">
 				<source>Loop (continuous loop mode)</source>
 			</trans-unit>

diff --git a/Resources/Private/Templates/GridElements/SliderContainer.html b/Resources/Private/Templates/GridElements/SliderContainer.html
@@ -5,7 +5,7 @@
 			<div class="row">
 				<div class="col-md-12">
 	</f:if>
-	<div class="slider-container slider-container-{f:if(condition: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', then: 'effect', else: 'default')} {f:if(condition: '{data.pi_flexform.data.columns.lDEF.paginationPosition.vDEF}', then: '_pagination-outside', else: '_pagination-inside')}">
+	<div class="slider-container slider-container-{f:if(condition: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', then: 'effect', else: 'default')} {f:if(condition: '{data.pi_flexform.data.columns.lDEF.paginationPosition.vDEF}', then: '_pagination-outside', else: '_pagination-inside')} {f:if(condition: '{data.pi_flexform.data.columns.lDEF.arrowsPosition.vDEF}', then: '_arrows-outside', else: '_arrows-inside')}">
 		<div class="swiper-container slider-container__container js__slider-container__container" data-autoplay="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.autoplay.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.autoplay.vDEF}')}" data-loop="{f:if(condition: data.pi_flexform.data.columns.lDEF.loop.vDEF, then: 'loop')}" data-effect="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.effect.vDEF}', else: 'slider')}" data-slidesperview="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.slidesPerView.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.slidesPerView.vDEF}', else: 3)}" data-speed="{f:if(condition: '{data.pi_flexform.data.columns.lDEF.speed.vDEF}', then: '{data.pi_flexform.data.columns.lDEF.speed.vDEF}', else: 300)}">
 			<div class="swiper-wrapper slider-container__wrapper js__slider-container__wrapper">
 				<f:format.raw>{data.tx_gridelements_view_column_0}</f:format.raw>

diff --git a/felayout_t3kit/dev/js/main/contentElements/heroImage.js b/felayout_t3kit/dev/js/main/contentElements/heroImage.js
@@ -20,10 +20,5 @@
         self.addClass('_animated')
       }
     })
-    $slider.each(function () {
-      if ($(this).find($frame).length) {
-        $(this).addClass('_full-width')
-      }
-    })
   })
 })(jQuery)
diff --git a/felayout_t3kit/dev/styles/main/contentElements/heroImage.less b/felayout_t3kit/dev/styles/main/contentElements/heroImage.less
@@ -89,18 +89,6 @@
     text-decoration: underline;
 }
 
-.slider-container._full-width {
-    max-width: 100% !important;
-    width: 100%;
-    overflow: hidden;
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
-
-.slider-container._full-width .slider-container__slide {
-    padding: 0;
-}
-
 .slider-container._full-width .swiper-slide-next .hero-image__caption > * {
     transition: none;
 }
@@ -126,26 +114,11 @@
 @media (min-width: 992px) {
     .slider-container._full-width .swiper-button-next,
     .slider-container._full-width .swiper-button-prev {
-        color: @main-body-bg;
         width: auto;
         display: block;
     }
-
-    .slider-container._full-width .swiper-button-next {
-        right: 10px;
-        left: auto;
-    }
-
-    .slider-container._full-width .swiper-button-prev {
-        left: 10px;
-        right: auto;
-    }
-
-    .slider-container._full-width .slider-container__container {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-    }
 }
+
 //--------------------------------------------------//
 // animation style 1 -------------------------------//
 //--------------------------------------------------//
@@ -184,6 +157,7 @@
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
+
 //--------------------------------------------------//
 // animation style 2 -------------------------------//
 //--------------------------------------------------//
@@ -216,6 +190,7 @@
 .hero-image._animated .hero-image__caption._caption-animated-2 > * {
     opacity: 1;
 }
+
 //--------------------------------------------------//
 // animation style 3 -------------------------------//
 //--------------------------------------------------//

diff --git a/felayout_t3kit/dev/styles/main/contentElements/sliderContainer.less b/felayout_t3kit/dev/styles/main/contentElements/sliderContainer.less
@@ -3,41 +3,33 @@
 }
 
 .slider-container__container {
-    margin: 0 45px;
     position: relative;
     overflow: hidden;
 }
 
-.slider-container-effect {
-    margin: 0 15px;
-}
-
 .slider-container-effect .slider-container__container {
     margin: 0;
     position: relative;
     overflow: hidden;
 }
 
-.slider-container-effect .slider-container__slide {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
 .slider-container__wrapper > .slider-container__slide {
     background-color: @main-body-bg;
 }
 
 .slider-container__button-next,
 .slider-container__button-prev {
     display: none;
+    width: auto;
+    height: auto;
 }
 
 .slider-container__button-next {
-    right: 5px;
+    right: 0;
 }
 
 .slider-container__button-prev {
-    left: -5px;
+    left: 0;
 }
 
 .slider-container__button-next:before {
@@ -62,6 +54,12 @@
     margin: 0 5px;
 }
 
+@media (min-width: 768px) {
+    ._arrows-outside {
+        padding: 0 40px;
+    }
+}
+
 @media (min-width: 992px) {
     .slider-container__button-next,
     .slider-container__button-prev {
@@ -76,15 +74,13 @@
     }
 
     .slider-container-effect .slider-container__container {
-        margin: 0 45px;
         position: relative;
         overflow: hidden;
     }
 }
 
 @media (min-width: 1280px) {
     .slider-container-effect {
-        max-width: 990px;
         margin: 0 auto;
     }
 }