From e6e7cf44f57159725620e58a1d2851feaf6b79f2 Mon Sep 17 00:00:00 2001
From: jorge-vitrubio <jorge@vitrubio.net>
Date: Wed, 8 Sep 2021 09:32:58 +0200
Subject: [PATCH] moved styles into css file, modified slider heigth for proper
 rendering

---
 asset/css/carousel.css                        |  6 ++++-
 .../common/block-layout/simple-carousel.phtml | 26 +++++++------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/asset/css/carousel.css b/asset/css/carousel.css
index eb552d6..0fcd320 100644
--- a/asset/css/carousel.css
+++ b/asset/css/carousel.css
@@ -3,7 +3,7 @@
 	flex-wrap: nowrap !important;
 }
 .siema {
-	margin: 1rem 0;
+	margin: 0;
 	background-color: #000;
 	position: relative;
 }
@@ -12,6 +12,7 @@
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
+	width: 100%;
 }
 
 #siema-ui {
@@ -49,3 +50,6 @@
 	margin: 0;
 	align-self: center;
 }
+.archive-carousel-container { 
+	position: relative;
+}
diff --git a/view/common/block-layout/simple-carousel.phtml b/view/common/block-layout/simple-carousel.phtml
index 53567ee..86e9c99 100644
--- a/view/common/block-layout/simple-carousel.phtml
+++ b/view/common/block-layout/simple-carousel.phtml
@@ -7,12 +7,7 @@
 ?>
 
 <style>
-	.siema { margin: 0; }
-	.siema-wrap { height: <?php echo $height ?>; }
-	.siema-img { width: 100%; }
-	#siema-ui {
-		/* background-color: <?php echo $ui_background ?>; */
-	}
+/* styles placed in carousel.css */
 </style>
 
 <div class="archive-item-block archive-carousel">
@@ -23,15 +18,14 @@
 		</div>
 	<?php } ?>
 
-	<div style="position:relative;">
-		<div class="siema_<?= $carousel_id ?> siema">
+	<div class="archive-carousel-container">
+		<div class="siema_<?php $carousel_id ?> siema">
 			<?php foreach ($images as $image) { ?>
-					<div class="siema-wrap"
-							 style="<?= $wrapStyle ?>"
+					<div class="siema-wrap" style="<?php // $wrapStyle ?>"
 					>
 						<img class="siema-img"
-								 style="<?= $imgStyle ?>"
-								 src="<?= $image['media_url'] ?>"
+								 style="<?php $imgStyle ?>"
+								 src="<?php $image['media_url'] ?>"
 						/>
 					</div>
 			<?php } ?>
@@ -41,7 +35,7 @@
 
 	<?php if ($title) { ?>
 	<div class="item_title">
-		<?= $title ?>
+		<?php $title ?>
 	</div>
 	<?php } ?>
 </div>
@@ -50,12 +44,12 @@
 
 var sourceURLs = [];
 <?php foreach ($images as $image) { ?>
-	sourceURLs.push("<?= $image['item_url'] ?>")
+	sourceURLs.push("<?php $image['item_url'] ?>")
 <?php } ?>
 
 $(document).ready(function() {
 	let siema = new Siema({
-		selector: '.siema_<?= $carousel_id ?>',
+		selector: '.siema_<?php $carousel_id ?>',
 		easing: 'ease-out',
 		duration: <?php echo $duration ?>,
 		perPage: <?php echo $perPage ?>,
@@ -86,7 +80,7 @@ function changeSourceURL(){
 	if (slide_idx < 0) {
 		slide_idx = sourceURLs.length -1;
 	}
-	var source_link = $(".siema_<?= $carousel_id ?>")
+	var source_link = $(".siema_<?php $carousel_id ?>")
 										.closest(".archive-carousel")
 										.find(".source-link")
 										.find('a');