From 0325a2ec9028fcd607719da46eb8c46518f46b5e Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Sun, 12 Mar 2023 00:53:47 +0100
Subject: [PATCH] EditAssetForm: make form look presentable

---
 templates/EditAssetForm.php | 85 +++++++++++++++++++++----------------
 1 file changed, 49 insertions(+), 36 deletions(-)

diff --git a/templates/EditAssetForm.php b/templates/EditAssetForm.php
index 8bdcdaf..d791dcd 100644
--- a/templates/EditAssetForm.php
+++ b/templates/EditAssetForm.php
@@ -22,9 +22,9 @@ class EditAssetForm extends Template
 		echo '
 			<form id="asset_form" action="" method="post" enctype="multipart/form-data">
 				<div class="content-box">
-					<div style="float: right">
+					<div class="float-end">
 						<a class="btn btn-danger" href="', BASEURL, '/', $this->asset->getSlug(), '?delete_confirmed">Delete asset</a>
-						<input class="btn btn-primary" type="submit" value="Save asset data">
+						<button class="btn btn-primary" type="submit">Save asset data</button>
 					</div>
 					<h2>Edit asset \'', $this->asset->getTitle(), '\' (', $this->asset->getFilename(), ')</h2>
 				</div>';
@@ -63,20 +63,32 @@ class EditAssetForm extends Template
 		echo '
 				<div class="content-box key_info">
 					<h3>Key info</h3>
-					<dl>
-						<dt>Title</dt>
-						<dd><input type="text" name="title" maxlength="255" size="70" value="', $this->asset->getTitle(), '">
 
-						<dt>URL slug</dt>
-						<dd><input type="text" name="slug" maxlength="255" size="70" value="', $this->asset->getSlug(), '">
-
-						<dt>Date captured</dt>
-						<dd><input type="text" name="date_captured" size="30" value="',
+					<div class="row mb-2">
+						<label class="col-form-label col-sm-3">Title (internal):</label>
+						<div class="col-sm">
+							<input class="form-control" type="text" name="title" maxlength="255" size="70" value="', $this->asset->getTitle(), '">
+						</div>
+					</div>
+					<div class="row mb-2">
+						<label class="col-form-label col-sm-3">URL slug:</label>
+						<div class="col-sm">
+							<input class="form-control" type="text" name="slug" maxlength="255" size="70" value="', $this->asset->getSlug(), '">
+						</div>
+					</div>
+					<div class="row mb-2">
+						<label class="col-form-label col-sm-3">Date captured:</label>
+						<div class="col-sm">
+							<input class="form-control" name="date_captured" size="30" value="',
 							$date_captured ? $date_captured->format('Y-m-d H:i:s') : '', '" placeholder="Y-m-d H:i:s">
-
-						<dt>Display priority</dt>
-						<dd><input type="number" name="priority" min="0" max="100" step="1" value="', $this->asset->getPriority(), '">
-					</dl>
+						</div>
+					</div>
+					<div class="row mb-2">
+						<label class="col-form-label col-sm-3">Display priority:</label>
+						<div class="col-sm-3">
+							<input class="form-control" type="number" name="priority" min="0" max="100" step="1" value="', $this->asset->getPriority(), '">
+						</div>
+					</div>
 				</div>';
 	}
 
@@ -85,7 +97,7 @@ class EditAssetForm extends Template
 		echo '
 				<div class="content-box linked_tags">
 					<h3>Linked tags</h3>
-					<ul id="tag_list">';
+					<ul class="list-unstyled" id="tag_list">';
 
 		foreach ($this->asset->getTags() as $tag)
 				echo '
@@ -95,7 +107,7 @@ class EditAssetForm extends Template
 						</li>';
 
 		echo '
-						<li id="new_tag_container"><input type="text" id="new_tag" placeholder="Type to link a new tag"></li>
+						<li id="new_tag_container"><input class="form-control" type="text" id="new_tag" placeholder="Type to link a new tag"></li>
 					</ul>
 				</div>
 				<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
@@ -138,7 +150,7 @@ class EditAssetForm extends Template
 		echo '
 				<div class="content-box linked_thumbs">
 					<h3>Thumbnails</h3>
-					View: <select id="thumbnail_src">';
+					View: <select class="form-select w-auto d-inline" id="thumbnail_src">';
 
 		$first = INF;
 		foreach ($this->thumbs as $i => $thumb)
@@ -220,38 +232,39 @@ class EditAssetForm extends Template
 	protected function section_asset_meta()
 	{
 		echo '
-				<div class="content-box asset_meta" style="margin-top: 2%">
-					<h3>Asset meta data</h3>
-					<ul>';
+				<div class="content-box asset_meta mt-2">
+					<h3>Asset meta data</h3>';
 
-		$i = -1;
+		$i = 0;
 		foreach ($this->asset->getMeta() as $key => $meta)
 		{
-			$i++;
 			echo '
-						<li>
-							<input type="text" name="meta_key[', $i, ']" value="', htmlentities($key), '">
-							<input type="text" name="meta_value[', $i, ']" value="', htmlentities($meta), '">
-						</li>';
+					<div class="input-group">
+						<input type="text" class="form-control" name="meta_key[', $i, ']" value="', htmlspecialchars($key), '" placeholder="key">
+						<input type="text" class="form-control" name="meta_value[', $i, ']" value="', htmlspecialchars($meta), '" placeholder="value">
+					</div>';
+			$i++;
 		}
 
+
 		echo '
-						<li>
-							<input type="text" name="meta_key[', $i + 1, ']" value="">
-							<input type="text" name="meta_value[', $i + 1, ']" value="">
-						</li>
-					</ul>
-					<p><input type="submit" value="Save metadata"></p>
+					<div class="input-group">
+						<input type="text" class="form-control" name="meta_key[', $i + 1, ']" value="" placeholder="key">
+						<input type="text" class="form-control" name="meta_value[', $i + 1, ']" value="" placeholder="value">
+					</div>
+					<div class="text-end mt-3">
+						<button class="btn btn-primary" type="submit">Save metadata</button>
+					</div>
 				</div>';
 	}
 
 	protected function section_replace()
 	{
 		echo '
-				<div class="content-box replace_asset" style="margin-bottom: 2%; display: block">
+				<div class="content-box replace_asset mt-2">
 					<h3>Replace asset</h3>
-					File: <input type="file" name="replacement">
-					Target: <select name="replacement_target">
+					File: <input class="form-control d-inline w-auto" type="file" name="replacement">
+					Target: <select class="form-select d-inline w-auto" name="replacement_target">
 						<option value="full">master file</option>';
 
 		foreach ($this->thumbs as $thumb)
@@ -287,7 +300,7 @@ class EditAssetForm extends Template
 
 		echo '
 					</select>
-					<input type="submit" value="Save asset">
+					<button class="btn btn-primary" type="submit">Save asset</button>
 				</div>';
 	}
 }