Merge branch 'responsive_gallery' into dev10

module/gallery/view/gallery/gallery.css

@@ -17,8 +17,27 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 10px;
+	padding: 6px;
 	background: rgba(0, 0, 0, .6);
 	color: #FFF;
 	text-align: center;
-}
+}
+.galleryRow {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.colPicture {
+   width : 16em;
+   max-width: 50%;
+   margin: 0.5em;
+ }
+
+ @media (max-width: 432px) {
+	.colPicture {
+		width: 90%;
+		max-width: 90%;
+		margin: 0.5em;
+	  }
+ }

module/gallery/view/gallery/gallery.php

@@ -8,26 +8,19 @@
 		]); ?>
 	</div>
 </div>
-<?php $i = 1; ?>
-<?php $picturesNb = count($module::$pictures); ?>
+<div class="row galleryRow">
 <?php foreach($module::$pictures as $picture => $legend): ?>
-	<?php if($i % 4 === 1): ?>
-		<div class="row">
-	<?php endif; ?>
-		<div class="col3">
-			<a
-				href="<?php echo helper::baseUrl(false) . $picture; ?>"
-				class="galleryGalleryPicture"
-				style="background-image:url('<?php echo helper::baseUrl(false) . $module::$thumbs[$picture]; ?>')"
-				data-caption="<?php echo $legend; ?>"
-			>
-				<?php if($legend): ?>
-					<div class="galleryGalleryName"><?php echo $legend; ?></div>
-				<?php endif; ?>
-			</a>
-		</div>
-	<?php if($i % 4 === 0 OR $i === $picturesNb): ?>
-		</div>
-	<?php endif; ?>
-	<?php $i++; ?>
-<?php endforeach; ?>
+	<div class="colPicture">
+		<a
+			href="<?php echo helper::baseUrl(false) . $picture; ?>"
+			class="galleryGalleryPicture"
+			style="background-image:url('<?php echo helper::baseUrl(false) . $module::$thumbs[$picture]; ?>')"
+			data-caption="<?php echo $legend; ?>"
+		>
+			<?php if($legend): ?>
+				<div class="galleryGalleryName"><?php echo $legend; ?></div>
+			<?php endif; ?>
+		</a>
+	</div>
+<?php endforeach; ?>
+</div>

module/gallery/view/index/index.css

@@ -1,7 +1,7 @@
 .galleryPicture {
 	display: block;
 	border: 1px solid #DDD;
-	height: 200px;
+	height: 150px;
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: center;
@@ -17,8 +17,27 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 10px;
+	padding: 6px;
 	background: rgba(0, 0, 0, .6);
 	color: #FFF;
 	text-align: center;
-}
+}
+.galleryRow {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.colPicture {
+   width : 16em;
+   max-width: 50%;
+   margin: 0.5em;
+ }
+
+ @media (max-width: 432px) {
+	.colPicture {
+		width: 90%;
+		max-width: 90%;
+		margin: 0.5em;
+	  }
+ }

module/gallery/view/index/index.php

@@ -1,11 +1,8 @@
 <?php if($module::$galleries): ?>
-	<?php $i = 1; ?>
-	<?php $galleriesNb = count($module::$galleries); ?>
+	<div class="row galleryRow">
 	<?php foreach($module::$galleries as $galleryId => $gallery): ?>
-		<?php if($i % 2 === 1): ?>
-			<div class="row">
-		<?php endif; ?>		
-			<div class="col6" div="pos<?php echo $gallery['config']['position']; ?>" >
+	
+			<div class="colPicture" div="pos<?php echo $gallery['config']['position']; ?>" >
 				<a
 					href="<?php echo helper::baseUrl() . $this->getUrl(0); ?>/<?php echo $galleryId; ?>"
 					class="galleryPicture"
@@ -14,11 +11,8 @@
 					<div class="galleryName"><?php echo $gallery['config']['name']; ?></div>
 				</a>
 			</div>
-		<?php if($i % 2 === 0 OR $i === $galleriesNb): ?>
-			</div>
-		<?php endif; ?>
-		<?php $i++; ?>
 	<?php endforeach; ?>
+	</div>
 <?php else: ?>
 	<?php echo template::speech('Aucune galerie.'); ?>
 <?php endif; ?>