From b05015e76e1a8d20a801bbcd059edf5166ab6b2c Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Sat, 1 Apr 2023 14:02:58 +0200
Subject: [PATCH] AlbumIndex: rewrite to use Bootstrap grid for tiles

---
 public/css/default.css   | 26 +++++++++--
 templates/AlbumIndex.php | 96 ++++++++++++++++++++--------------------
 2 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/public/css/default.css b/public/css/default.css
index 5f61392e..a2df598f 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -177,6 +177,13 @@ i.space-invader.alt-7::before {
 }
 
 
+/* Album index
+----------------*/
+.album-index {
+	clear: both;
+}
+
+
 /* Tiled grid
 ---------------*/
 .tiled_header {
@@ -199,23 +206,29 @@ i.space-invader.alt-7::before {
 	padding: 0;
 	list-style: none;
 }
+
+div.polaroid,
 .tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama,
 .tiled_grid div.duo, .tiled_grid div.single {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	float: left;
+	/*float: left;*/
 	line-height: 0;
-	margin: 0 3.5% 3.5% 0;
-	overflow: hidden;
+/*	margin: 0 3.5% 3.5% 0;*/
+/*	overflow: hidden;*/
 	position: relative;
-	width: 31%;
+	/*width: 31%;*/
 }
+
+div.polaroid img,
 .tiled_grid div img {
 	background: url('../images/nothumb.svg') center no-repeat;
 	border: none;
 	object-fit: cover;
 	width: 100%;
 }
+
+div.polaroid h4,
 .tiled_grid div h4 {
 	color: #000;
 	margin: 0;
@@ -226,9 +239,14 @@ i.space-invader.alt-7::before {
 	white-space: nowrap;
 	overflow: hidden;
 }
+
+div.polaroid a,
 .tiled_grid div a {
+	display: block;
 	text-decoration: none;
 }
+
+div.polaroid:hover,
 .tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover,
 .tiled_grid div.duo:hover, .tiled_grid div.single:hover {
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
diff --git a/templates/AlbumIndex.php b/templates/AlbumIndex.php
index ebfe9c1f..676b8717 100644
--- a/templates/AlbumIndex.php
+++ b/templates/AlbumIndex.php
@@ -15,6 +15,7 @@ class AlbumIndex extends Template
 
 	const TILE_WIDTH = 400;
 	const TILE_HEIGHT = 300;
+	const TILE_RATIO = self::TILE_WIDTH / self::TILE_HEIGHT;
 
 	public function __construct(array $albums, $show_edit_buttons = false, $show_labels = true)
 	{
@@ -26,57 +27,56 @@ class AlbumIndex extends Template
 	public function html_main()
 	{
 		echo '
-			<div class="tiled_grid clearfix">';
+			<div class="container album-index">
+				<div class="row g-5">';
 
-		foreach (array_chunk($this->albums, 3) as $photos)
-		{
-			echo '
-					<div class="tiled_row">';
-
-			foreach ($photos as $album)
-			{
-				echo '
-						<div class="landscape">';
-
-				if ($this->show_edit_buttons)
-					echo '
-							<a class="edit" href="#">Edit</a>';
-
-				echo '
-							<a href="', $album['link'], '">';
-
-				if (isset($album['thumbnail']))
-				{
-					$thumbs = [];
-					foreach ([1, 2] as $factor)
-						$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
-							static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
-
-					echo '
-								<img src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
-									' srcset="' . $thumbs[2] . ' 2x"' : '') .
-									' alt="" style="width: ', static::TILE_WIDTH,
-										'px; height: ', static::TILE_HEIGHT, 'px">';
-				}
-				else
-					echo '
-								<img src="', BASEURL, '/images/nothumb.svg" alt="" style="width: ',
-									static::TILE_WIDTH, 'px; height: ', static::TILE_HEIGHT, 'px; object-fit: unset">';
-
-				if ($this->show_labels)
-					echo '
-								<h4>', $album['caption'], '</h4>';
-
-				echo '
-							</a>
-						</div>';
-			}
-
-			echo '
-					</div>';
-		}
+		foreach ($this->albums as $album)
+			$this->renderAlbum($album);
 
 		echo '
+				</div>
 			</div>';
 	}
+
+	private function renderAlbum(array $album)
+	{
+		echo '
+					<div class="col-md-6 col-xl-4">
+						<div class="polaroid landscape">';
+
+		if ($this->show_edit_buttons)
+			echo '
+							<a class="edit" href="#">Edit</a>';
+
+		echo '
+							<a href="', $album['link'], '">';
+
+		if (isset($album['thumbnail']))
+		{
+			$thumbs = [];
+			foreach ([1, 2] as $factor)
+				$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
+					static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
+
+			echo '
+								<img alt="" src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
+									' srcset="' . $thumbs[2] . ' 2x"' : '') .
+									' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">';
+		}
+		else
+		{
+			echo '
+								<img alt="" src="', BASEURL, '/images/nothumb.svg"',
+									' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">';
+		}
+
+		if ($this->show_labels)
+			echo '
+								<h4>', $album['caption'], '</h4>';
+
+		echo '
+							</a>
+						</div>
+					</div>';
+	}
 }