Hide slider buttons if not required

GsAimeos · Nov 1, 2019 · 8736f56 · 8736f56
1 parent 4af5f14
commit 8736f56
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/client/html/templates/catalog/detail/image-partial-bottom.php b/client/html/templates/catalog/detail/image-partial-bottom.php
@@ -38,9 +38,11 @@
 ?>
 <div class="catalog-detail-image">
 
-	<?php if( count( $mediaItems ) > 1 ) : $class = 'item selected'; ?>
-		<div class="image-thumbs thumbs-vertical" data-slick='{"slidesToShow": 4, "slidesToScroll": 4, "vertical": true, "verticalSwiping": true}'>
-			<button type="button" class="slick-prev"><?= $enc->html( $this->translate( 'client', 'Previous' ) ); ?></button><!--
+	<?php if( ( $num = count( $mediaItems ) ) > 1 ) : $class = 'item selected'; ?>
+		<div class="image-thumbs thumbs-vertical" data-slick='{"slidesToShow": 4, "slidesToScroll": 4, "vertical": true, "verticalSwiping": true}'><!--
+			<?php if( $num > 4 ) : ?>
+				--><button type="button" class="slick-prev"><?= $enc->html( $this->translate( 'client', 'Previous' ) ); ?></button><!--
+			<?php endif ?>
 			--><div class="thumbs"><!--
 
 				<?php foreach( $mediaItems as $id => $mediaItem ) : ?>
@@ -51,7 +53,9 @@
 				<?php endforeach; ?>
 
 			--></div><!--
-			--><button type="button" class="slick-next"><?= $enc->html( $this->translate( 'client', 'Next' ) ); ?></button><!--
+			<?php if( $num > 4 ) : ?>
+				--><button type="button" class="slick-next"><?= $enc->html( $this->translate( 'client', 'Next' ) ); ?></button><!--
+			<?php endif ?>
 		--></div>
 	<?php endif; ?><!--
 

diff --git a/client/html/templates/catalog/detail/image-partial-standard.php b/client/html/templates/catalog/detail/image-partial-standard.php
@@ -62,9 +62,11 @@
 
 	</div><!--
 
-	--><?php if( count( $mediaItems ) > 1 ) : $class = 'item selected'; ?>
+	--><?php if( ( $num = count( $mediaItems ) ) > 1 ) : $class = 'item selected'; ?>
 		<div class="image-thumbs thumbs-horizontal" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'><!--
-			--><button type="button" class="slick-prev"><?= $enc->html( $this->translate( 'client', 'Previous' ) ); ?></button><!--
+			<?php if( $num > 4 ) : ?>
+				--><button type="button" class="slick-prev"><?= $enc->html( $this->translate( 'client', 'Previous' ) ); ?></button><!--
+			<?php endif ?>
 			--><div class="thumbs"><!--
 
 				<?php foreach( $mediaItems as $id => $mediaItem ) : ?>
@@ -78,7 +80,9 @@
 				<?php endforeach; ?>
 
 			--></div><!--
-			--><button type="button" class="slick-next"><?= $enc->html( $this->translate( 'client', 'Next' ) ); ?></button><!--
+			<?php if( $num > 4 ) : ?>
+				--><button type="button" class="slick-next"><?= $enc->html( $this->translate( 'client', 'Next' ) ); ?></button><!--
+			<?php endif ?>
 		--></div>
 	<?php endif; ?>
 

diff --git a/client/html/themes/elegance/aimeos.css b/client/html/themes/elegance/aimeos.css
@@ -1182,6 +1182,9 @@ html.no-js .catalog-filter-supplier:hover .supplier-lists {
 	width: 80px;
 }
 
+.catalog-detail-image .thumbs-horizontal:not(button) {
+	margin: 40px 0;
+}
 .catalog-detail-image .thumbs-vertical button {
 	height: 40px;
 	width: 80px;
@@ -1201,6 +1204,10 @@ html.no-js .catalog-filter-supplier:hover .supplier-lists {
 	height: 105px;
 }
 
+.catalog-detail-image .thumbs-horizontal:not(button) {
+	margin: 0 40px;
+}
+
 .catalog-detail-image .thumbs-horizontal button {
 	display: inline-block;
 	vertical-align: top;