Merge pull request 'New bootstrap-based layout' (#30) from bootstrap into master

Reviewed-on: Public/pics#30

composer.json

@@ -19,6 +19,9 @@
         "ext-mysqli": "*",
         "ext-imagick": "*",
         "ext-gd": "*",
-        "ext-fileinfo": "*"
+        "ext-imagick": "*",
+        "ext-mysqli": "*",
+        "twbs/bootstrap": "^5.3",
+        "twbs/bootstrap-icons": "^1.10"
     }
 }

controllers/AccountSettings.php

@@ -0,0 +1,135 @@
+<?php
+/*****************************************************************************
+ * AccountSettings.php
+ * Contains the account settings controller.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2023
+ *****************************************************************************/
+
+class AccountSettings extends HTMLController
+{
+	public function __construct()
+	{
+		// Not logged in yet?
+		if (!Registry::get('user')->isLoggedIn())
+			throw new NotAllowedException('You need to be logged in to view this page.');
+
+		parent::__construct('Account settings');
+		$form_title = 'Account settings';
+
+		// Session checking!
+		if (empty($_POST))
+			Session::resetSessionToken();
+		else
+			Session::validateSession();
+
+		$fields = [
+			'first_name' => [
+				'type' => 'text',
+				'label' => 'First name',
+				'size' => 50,
+				'maxlength' => 255,
+			],
+			'surname' => [
+				'type' => 'text',
+				'label' => 'Family name',
+				'size' => 50,
+				'maxlength' => 255,
+			],
+			'emailaddress' => [
+				'type' => 'text',
+				'label' => 'Email address',
+				'size' => 50,
+				'maxlength' => 255,
+			],
+			'password1' => [
+				'before_html' => '<div class="offset-sm-2 mt-4"><p>To change your password, please fill out the fields below.</p></div>',
+				'type' => 'password',
+				'label' => 'Password',
+				'size' => 50,
+				'maxlength' => 255,
+				'is_optional' => true,
+			],
+			'password2' => [
+				'type' => 'password',
+				'label' => 'Password (repeat)',
+				'size' => 50,
+				'maxlength' => 255,
+				'is_optional' => true,
+			],
+		];
+
+		$form = new Form([
+			'request_url' => BASEURL . '/' . $_GET['action'] . '/',
+			'fields' => $fields,
+			'submit_caption' => 'Save details',
+		]);
+
+		$user = Registry::get('user');
+
+		// Create the form, add in default values.
+		$form->setData(empty($_POST) ? $user->getProps() : $_POST);
+		$formview = new FormView($form, $form_title);
+		$this->page->adopt($formview);
+
+		// Fetch user tags
+		$tags = Tag::getAllByOwner($user->getUserId());
+		if (!empty($tags))
+			$this->page->adopt(new MyTagsView($tags));
+
+		// Left a message?
+		if (isset($_SESSION['account_msg']))
+		{
+			$alert = $_SESSION['account_msg'];
+			$formview->adopt(new Alert($alert[0], $alert[1], $alert[2]));
+			unset($_SESSION['account_msg']);
+		}
+
+		// Just updating account settings?
+		if (!empty($_POST))
+		{
+			$form->verify($_POST);
+
+			// Anything missing?
+			if (!empty($form->getMissing()))
+			{
+				$missingFields = array_intersect_key($fields, array_flip($form->getMissing()));
+				$missingFields = array_map(function($field) { return strtolower($field['label']); }, $missingFields);
+				return $formview->adopt(new Alert('Some data missing', 'Please fill out the following fields: ' . implode(', ', $missingFields), 'danger'));
+			}
+
+			$data = $form->getData();
+
+			// Just to be on the safe side.
+			$data['first_name'] = htmlspecialchars(trim($data['first_name']));
+			$data['surname'] = htmlspecialchars(trim($data['surname']));
+			$data['emailaddress'] = trim($data['emailaddress']);
+
+			// If it looks like an e-mail address...
+			if (!empty($data['emailaddress']) && !preg_match('~^[^ ]+@[^ ]+\.[a-z]+$~', $data['emailaddress']))
+				return $formview->adopt(new Alert('Email addresses invalid', 'The email address you entered is not a valid email address.', 'danger'));
+			// Check whether email address is already linked to an account in the database -- just not to the account we happen to be editing, of course.
+			elseif (!empty($data['emailaddress']) && $user->getEmailAddress() !== $data['emailaddress'] && Member::exists($data['emailaddress']))
+				return $formview->adopt(new Alert('Email address already in use', 'Another account is already using this e-mail address.', 'danger'));
+
+			// Changing passwords?
+			if (!empty($data['password1']) && !empty($data['password2']))
+			{
+				if (strlen($data['password1']) < 6 || !preg_match('~[^A-z]~', $data['password1']))
+					return $formview->adopt(new Alert('Password not acceptable', 'Please use a password that is at least six characters long and contains at least one non-alphabetic character (e.g. a number or symbol).', 'danger'));
+				elseif ($data['password1'] !== $data['password2'])
+					return $formview->adopt(new Alert('Passwords do not match', 'The passwords you entered do not match. Please try again.', 'danger'));
+
+				// Keep just the one.
+				$data['password'] = $data['password1'];
+				unset($data['password1'], $data['password2']);
+				$formview->adopt(new Alert('Your password has been changed', 'Next time you log in, you can use your new password to authenticate yourself.', 'success'));
+			}
+			else
+				$formview->adopt(new Alert('Your account settings have been saved', 'Thank you for keeping your information current.', 'success'));
+
+			$user->update($data);
+		}
+	}
+}

controllers/EditAlbum.php

@@ -18,6 +18,9 @@ class EditAlbum extends HTMLController
 		if (empty($id_tag) && !isset($_GET['add']) && $_GET['action'] !== 'addalbum')
 			throw new UnexpectedValueException('Requested album not found or not requesting a new album.');
 
+		if (!empty($id_tag))
+			$album = Tag::fromId($id_tag);
+
 		// Adding an album?
 		if (isset($_GET['add']) || $_GET['action'] === 'addalbum')
 		{
@@ -29,7 +32,6 @@ class EditAlbum extends HTMLController
 		elseif (isset($_GET['delete']))
 		{
 			// So far so good?
-			$album = Tag::fromId($id_tag);
 			if (Session::validateSession('get') && $album->kind === 'Album' && $album->delete())
 			{
 				header('Location: ' . BASEURL . '/managealbums/');
@@ -41,7 +43,6 @@ class EditAlbum extends HTMLController
 		// Editing one, then, surely.
 		else
 		{
-			$album = Tag::fromId($id_tag);
 			if ($album->kind !== 'Album')
 				trigger_error('Cannot edit album: not an album.', E_USER_ERROR);
 
@@ -61,41 +62,68 @@ class EditAlbum extends HTMLController
 		elseif (!$id_tag)
 			$after_form = '<button name="submit_and_new" class="btn">Save and add another</button>';
 
+		// Gather possible parents for this album to be filed into
+		$parentChoices = [0 => '-root-'];
+		foreach (PhotoAlbum::getHierarchy('tag', 'up') as $parent)
+		{
+			if (!empty($id_tag) && $parent['id_tag'] == $id_tag)
+				continue;
+
+			$parentChoices[$parent['id_tag']] = $parent['tag'];
+		}
+
+		$fields = [
+			'id_parent' => [
+				'type' => 'select',
+				'label' => 'Parent album',
+				'options' => $parentChoices,
+			],
+			'id_asset_thumb' => [
+				'type' => 'numeric',
+				'label' => 'Thumbnail asset ID',
+				'is_optional' => true,
+			],
+			'tag' => [
+				'type' => 'text',
+				'label' => 'Album title',
+				'size' => 50,
+				'maxlength' => 255,
+			],
+			'slug' => [
+				'type' => 'text',
+				'label' => 'URL slug',
+				'size' => 50,
+				'maxlength' => 255,
+			],
+			'description' => [
+				'type' => 'textbox',
+				'label' => 'Description',
+				'size' => 50,
+				'maxlength' => 255,
+				'is_optional' => true,
+			],
+		];
+
+		// Fetch image assets for this album
+		if (!empty($id_tag))
+		{
+			list($assets, $num_assets) = AssetIterator::getByOptions([
+				'direction' => 'desc',
+				'limit' => 500,
+				'id_tag' => $id_tag,
+			], true);
+
+			if ($num_assets > 0)
+				unset($fields['id_asset_thumb']);
+		}
+
 		$form = new Form([
 			'request_url' => BASEURL . '/editalbum/?' . ($id_tag ? 'id=' . $id_tag : 'add'),
 			'content_below' => $after_form,
-			'fields' => [
+			'fields' => $fields,
-				'id_parent' => [
-					'type' => 'numeric',
-					'label' => 'Parent album ID',
-				],
-				'id_asset_thumb' => [
-					'type' => 'numeric',
-					'label' => 'Thumbnail asset ID',
-					'is_optional' => true,
-				],
-				'tag' => [
-					'type' => 'text',
-					'label' => 'Album title',
-					'size' => 50,
-					'maxlength' => 255,
-				],
-				'slug' => [
-					'type' => 'text',
-					'label' => 'URL slug',
-					'size' => 50,
-					'maxlength' => 255,
-				],
-				'description' => [
-					'type' => 'textbox',
-					'label' => 'Description',
-					'size' => 50,
-					'maxlength' => 255,
-					'is_optional' => true,
-				],
-			],
 		]);
 
+		// Add defaults for album if none present
 		if (empty($_POST) && isset($_GET['tag']))
 		{
 			$parentTag = Tag::fromId($_GET['tag']);
@@ -117,16 +145,46 @@ class EditAlbum extends HTMLController
 		$formview = new FormView($form, $form_title ?? '');
 		$this->page->adopt($formview);
 
+		// If we have asset images, show the thumbnail manager
+		if (!empty($id_tag) && $num_assets > 0)
+			$this->page->adopt(new FeaturedThumbnailManager($assets, $id_tag ? $album->id_asset_thumb : 0));
+
+		if (isset($_POST['changeThumbnail']))
+			$this->processThumbnail($album);
+		elseif (!empty($_POST))
+			$this->processTagDetails($form, $id_tag, $album ?? null);
+	}
+
+	private function processThumbnail($tag)
+	{
+		if (empty($_POST))
+			return;
+
+		$tag->id_asset_thumb = $_POST['featuredThumbnail'];
+		$tag->save();
+
+		header('Location: ' . BASEURL . '/editalbum/?id=' . $tag->id_tag);
+		exit;
+	}
+
+	private function processTagDetails($form, $id_tag, $album)
+	{
 		if (!empty($_POST))
 		{
 			$form->verify($_POST);
 
 			// Anything missing?
 			if (!empty($form->getMissing()))
-				return $formview->adopt(new Alert('Some data missing', 'Please fill out the following fields: ' . implode(', ', $form->getMissing()), 'error'));
+				return $formview->adopt(new Alert('Some data missing', 'Please fill out the following fields: ' . implode(', ', $form->getMissing()), 'danger'));
 
 			$data = $form->getData();
 
+			// Sanity check: don't let an album be its own parent
+			if ($data['id_parent'] == $id_tag)
+			{
+				return $formview->adopt(new Alert('Invalid parent', 'An album cannot be its own parent.', 'danger'));
+			}
+
 			// Quick stripping.
 			$data['tag'] = htmlentities($data['tag']);
 			$data['description'] = htmlentities($data['description']);
@@ -140,7 +198,7 @@ class EditAlbum extends HTMLController
 				$data['kind'] = 'Album';
 				$newTag = Tag::createNew($data);
 				if ($newTag === false)
-					return $formview->adopt(new Alert('Cannot create this album', 'Something went wrong while creating the album...', 'error'));
+					return $formview->adopt(new Alert('Cannot create this album', 'Something went wrong while creating the album...', 'danger'));
 
 				if (isset($_POST['submit_and_new']))
 				{

controllers/EditAsset.php

@@ -94,10 +94,6 @@ class EditAsset extends HTMLController
 		$page = new EditAssetForm($asset, $thumbs);
 		parent::__construct('Edit asset \'' . $asset->getTitle() . '\' (' . $asset->getFilename() . ') - ' . SITE_TITLE);
 		$this->page->adopt($page);
-
-		// Add a view button to the admin bar for photos.
-		if ($asset->isImage())
-			$this->admin_bar->appendItem($asset->getImage()->getPageUrl(), 'View this photo');
 	}
 
 	private function getThumbs(Asset $asset)

controllers/EditTag.php

@@ -10,14 +10,18 @@ class EditTag extends HTMLController
 {
 	public function __construct()
 	{
-		// Ensure it's just admins at this point.
-		if (!Registry::get('user')->isAdmin())
-			throw new NotAllowedException();
-
 		$id_tag = isset($_GET['id']) ? (int) $_GET['id'] : 0;
 		if (empty($id_tag) && !isset($_GET['add']))
 			throw new UnexpectedValueException('Requested tag not found or not requesting a new tag.');
 
+		if (!empty($id_tag))
+			$tag = Tag::fromId($id_tag);
+
+		// Are we allowed to edit this tag?
+		$user = Registry::get('user');
+		if (!($user->isAdmin() || $user->getUserId() == $tag->id_user_owner))
+			throw new NotAllowedException();
+
 		// Adding an tag?
 		if (isset($_GET['add']))
 		{
@@ -29,7 +33,6 @@ class EditTag extends HTMLController
 		elseif (isset($_GET['delete']))
 		{
 			// So far so good?
-			$tag = Tag::fromId($id_tag);
 			if (Session::validateSession('get') && $tag->kind !== 'Album' && $tag->delete())
 			{
 				header('Location: ' . BASEURL . '/managetags/');
@@ -41,7 +44,6 @@ class EditTag extends HTMLController
 		// Editing one, then, surely.
 		else
 		{
-			$tag = Tag::fromId($id_tag);
 			if ($tag->kind === 'Album')
 				trigger_error('Cannot edit tag: is actually an album.', E_USER_ERROR);
 
@@ -61,47 +63,51 @@ class EditTag extends HTMLController
 		elseif (!$id_tag)
 			$after_form = '<button name="submit_and_new" class="btn">Save and add another</button>';
 
+		$fields = [
+			'kind' => [
+				'type' => 'select',
+				'label' => 'Kind of tag',
+				'options' => [
+					'Location' => 'Location',
+					'Person' => 'Person',
+				],
+			],
+			'id_user_owner' => [
+				'type' => 'select',
+				'label' => 'Owner',
+				'options' => [0 => '(nobody)'] + Member::getMemberMap(),
+			],
+			'tag' => [
+				'type' => 'text',
+				'label' => 'Tag title',
+				'size' => 50,
+				'maxlength' => 255,
+			],
+			'slug' => [
+				'type' => 'text',
+				'label' => 'URL slug',
+				'size' => 50,
+				'maxlength' => 255,
+			],
+			'description' => [
+				'type' => 'textbox',
+				'label' => 'Description',
+				'size' => 50,
+				'maxlength' => 255,
+				'is_optional' => true,
+			],
+		];
+
+		if (!$user->isAdmin())
+		{
+			unset($fields['kind']);
+			unset($fields['id_user_owner']);
+		}
+
 		$form = new Form([
 			'request_url' => BASEURL . '/edittag/?' . ($id_tag ? 'id=' . $id_tag : 'add'),
 			'content_below' => $after_form,
-			'fields' => [
+			'fields' => $fields,
-				'id_parent' => [
-					'type' => 'numeric',
-					'label' => 'Parent tag ID',
-				],
-				'id_asset_thumb' => [
-					'type' => 'numeric',
-					'label' => 'Thumbnail asset ID',
-					'is_optional' => true,
-				],
-				'kind' => [
-					'type' => 'select',
-					'label' => 'Kind of tag',
-					'options' => [
-						'Location' => 'Location',
-						'Person' => 'Person',
-					],
-				],
-				'tag' => [
-					'type' => 'text',
-					'label' => 'Tag title',
-					'size' => 50,
-					'maxlength' => 255,
-				],
-				'slug' => [
-					'type' => 'text',
-					'label' => 'URL slug',
-					'size' => 50,
-					'maxlength' => 255,
-				],
-				'description' => [
-					'type' => 'textbox',
-					'label' => 'Description',
-					'size' => 50,
-					'maxlength' => 255,
-					'is_optional' => true,
-				],
-			],
 		]);
 
 		// Create the form, add in default values.
@@ -109,15 +115,48 @@ class EditTag extends HTMLController
 		$formview = new FormView($form, $form_title ?? '');
 		$this->page->adopt($formview);
 
+		if (!empty($id_tag))
+		{
+			list($assets, $num_assets) = AssetIterator::getByOptions([
+				'direction' => 'desc',
+				'limit' => 500,
+				'id_tag' => $id_tag,
+			], true);
+
+			if ($num_assets > 0)
+				$this->page->adopt(new FeaturedThumbnailManager($assets, $id_tag ? $tag->id_asset_thumb : 0));
+		}
+
+		if (isset($_POST['changeThumbnail']))
+			$this->processThumbnail($tag);
+		elseif (!empty($_POST))
+			$this->processTagDetails($form, $id_tag, $tag ?? null);
+	}
+
+	private function processThumbnail($tag)
+	{
+		if (empty($_POST))
+			return;
+
+		$tag->id_asset_thumb = $_POST['featuredThumbnail'];
+		$tag->save();
+
+		header('Location: ' . BASEURL . '/edittag/?id=' . $tag->id_tag);
+		exit;
+	}
+
+	private function processTagDetails($form, $id_tag, $tag)
+	{
 		if (!empty($_POST))
 		{
 			$form->verify($_POST);
 
 			// Anything missing?
 			if (!empty($form->getMissing()))
-				return $formview->adopt(new Alert('Some data missing', 'Please fill out the following fields: ' . implode(', ', $form->getMissing()), 'error'));
+				return $formview->adopt(new Alert('Some data missing', 'Please fill out the following fields: ' . implode(', ', $form->getMissing()), 'danger'));
 
 			$data = $form->getData();
+			$data['id_parent'] = 0;
 
 			// Quick stripping.
 			$data['slug'] = strtr($data['slug'], [' ' => '-', '--' => '-', '&' => 'and', '=>' => '', "'" => "", ":"=> "", '/' => '-', '\\' => '-']);
@@ -127,7 +166,7 @@ class EditTag extends HTMLController
 			{
 				$return = Tag::createNew($data);
 				if ($return === false)
-					return $formview->adopt(new Alert('Cannot create this tag', 'Something went wrong while creating the tag...', 'error'));
+					return $formview->adopt(new Alert('Cannot create this tag', 'Something went wrong while creating the tag...', 'danger'));
 
 				if (isset($_POST['submit_and_new']))
 				{
@@ -144,8 +183,11 @@ class EditTag extends HTMLController
 				$tag->save();
 			}
 
-			// Redirect to the tag management page.
+			// Redirect to a clean page
-			header('Location: ' . BASEURL . '/managetags/');
+			if (Registry::get('user')->isAdmin())
+				header('Location: ' . BASEURL . '/managetags/');
+			else
+				header('Location: ' . BASEURL . '/edittag/?id=' . $id_tag);
 			exit;
 		}
 	}

controllers/EditUser.php

@@ -129,7 +129,7 @@ class EditUser extends HTMLController
 
 			// Anything missing?
 			if (!empty($form->getMissing()))
-				return $formview->adopt(new Alert('Some data missing', 'Please fill out the following fields: ' . implode(', ', $form->getMissing()), 'error'));
+				return $formview->adopt(new Alert('Some data missing', 'Please fill out the following fields: ' . implode(', ', $form->getMissing()), 'danger'));
 
 			$data = $form->getData();
 
@@ -150,18 +150,18 @@ class EditUser extends HTMLController
 
 			// If it looks like an e-mail address...
 			if (!empty($data['emailaddress']) && !preg_match('~^[^ ]+@[^ ]+\.[a-z]+$~', $data['emailaddress']))
-				return $formview->adopt(new Alert('Email addresses invalid', 'The email address you entered is not a valid email address.', 'error'));
+				return $formview->adopt(new Alert('Email addresses invalid', 'The email address you entered is not a valid email address.', 'danger'));
 			// Check whether email address is already linked to an account in the database -- just not to the account we happen to be editing, of course.
 			elseif (!empty($data['emailaddress']) && Member::exists($data['emailaddress']) && !($id_user && $user->getEmailAddress() == $data['emailaddress']))
-				return $formview->adopt(new Alert('Email address already in use', 'Another account is already using the e-mail address you entered.', 'error'));
+				return $formview->adopt(new Alert('Email address already in use', 'Another account is already using the e-mail address you entered.', 'danger'));
 
 			// Setting passwords? We'll need two!
 			if (!$id_user || !empty($data['password1']) && !empty($data['password2']))
 			{
 				if (strlen($data['password1']) < 6 || !preg_match('~[^A-z]~', $data['password1']))
-					return $formview->adopt(new Alert('Password not acceptable', 'Please fill in a password that is at least six characters long and contains at least one non-alphabetic character (e.g. a number or symbol).', 'error'));
+					return $formview->adopt(new Alert('Password not acceptable', 'Please fill in a password that is at least six characters long and contains at least one non-alphabetic character (e.g. a number or symbol).', 'danger'));
 				elseif ($data['password1'] !== $data['password2'])
-					return $formview->adopt(new Alert('Passwords do not match', 'The passwords you entered do not match. Please try again.', 'error'));
+					return $formview->adopt(new Alert('Passwords do not match', 'The passwords you entered do not match. Please try again.', 'danger'));
 				else
 					$data['password'] = $data['password1'];
 
@@ -173,7 +173,7 @@ class EditUser extends HTMLController
 			{
 				$return = Member::createNew($data);
 				if ($return === false)
-					return $formview->adopt(new Alert('Cannot create this user', 'Something went wrong while creating the user...', 'error'));
+					return $formview->adopt(new Alert('Cannot create this user', 'Something went wrong while creating the user...', 'danger'));
 
 				if (isset($_POST['submit_and_new']))
 				{

controllers/HTMLController.php

@@ -12,7 +12,6 @@
 abstract class HTMLController
 {
 	protected $page;
-	protected $admin_bar;
 
 	public function __construct($title)
 	{
@@ -22,8 +21,6 @@ abstract class HTMLController
 		if (Registry::get('user')->isAdmin())
 		{
 			$this->page->appendStylesheet(BASEURL . '/css/admin.css');
-			$this->admin_bar = new AdminBar();
-			$this->page->adopt($this->admin_bar);
 		}
 	}
 

controllers/Login.php

@@ -44,7 +44,7 @@ class Login extends HTMLController
 		parent::__construct('Log in - ' . SITE_TITLE);
 		$form = new LogInForm('Log in');
 		if ($login_error)
-			$form->adopt(new Alert('', 'Invalid email address or password.', 'error'));
+			$form->adopt(new Alert('', 'Invalid email address or password.', 'danger'));
 
 		// Tried anything? Be helpful, at least.
 		if (isset($_POST['emailaddress']))

controllers/ManageAlbums.php

@@ -18,7 +18,7 @@ class ManageAlbums extends HTMLController
 			'form' => [
 				'action' => BASEURL . '/editalbum/',
 				'method' => 'get',
-				'class' => 'floatright',
+				'class' => 'col-md-6 text-end',
 				'buttons' => [
 					'add' => [
 						'type' => 'submit',
@@ -60,7 +60,7 @@ class ManageAlbums extends HTMLController
 			'title' => 'Manage albums',
 			'no_items_label' => 'No albums meet the requirements of the current filter.',
 			'items_per_page' => 9999,
-			'index_class' => 'floatleft',
+			'index_class' => 'col-md-6',
 			'base_url' => BASEURL . '/managealbums/',
 			'get_data' => function($offset = 0, $limit = 9999, $order = '', $direction = 'up') {
 				if (!in_array($order, ['id_tag', 'tag', 'slug', 'count']))
@@ -68,28 +68,7 @@ class ManageAlbums extends HTMLController
 				if (!in_array($direction, ['up', 'down']))
 					$direction = 'up';
 
-				$db = Registry::get('db');
+				$rows = PhotoAlbum::getHierarchy($order, $direction);
-				$res = $db->query('
-					SELECT *
-					FROM tags
-					WHERE kind = {string:album}
-					ORDER BY id_parent, {raw:order}',
-					[
-						'order' => $order . ($direction == 'up' ? ' ASC' : ' DESC'),
-						'album' => 'Album',
-					]);
-
-				$albums_by_parent = [];
-				while ($row = $db->fetch_assoc($res))
-				{
-					if (!isset($albums_by_parent[$row['id_parent']]))
-						$albums_by_parent[$row['id_parent']] = [];
-
-					$albums_by_parent[$row['id_parent']][] = $row + ['children' => []];
-				}
-
-				$albums = self::getChildrenRecursively(0, 0, $albums_by_parent);
-				$rows = self::flattenChildrenRecursively($albums);
 
 				return [
 					'rows' => $rows,
@@ -106,42 +85,4 @@ class ManageAlbums extends HTMLController
 		parent::__construct('Album management - Page ' . $table->getCurrentPage() .' - ' . SITE_TITLE);
 		$this->page->adopt(new TabularData($table));
 	}
-
-	private static function getChildrenRecursively($id_parent, $level, &$albums_by_parent)
-	{
-		$children = [];
-		if (!isset($albums_by_parent[$id_parent]))
-			return $children;
-
-		foreach ($albums_by_parent[$id_parent] as $child)
-		{
-			if (isset($albums_by_parent[$child['id_tag']]))
-				$child['children'] = self::getChildrenRecursively($child['id_tag'], $level + 1, $albums_by_parent);
-
-			$child['tag'] = ($level ? str_repeat('—', $level * 2) . ' ' : '') . $child['tag'];
-			$children[] = $child;
-		}
-
-		return $children;
-	}
-
-	private static function flattenChildrenRecursively($albums)
-	{
-		if (empty($albums))
-			return [];
-
-		$rows = [];
-		foreach ($albums as $album)
-		{
-			$rows[] = array_intersect_key($album, array_flip(['id_tag', 'tag', 'slug', 'count']));
-			if (!empty($album['children']))
-			{
-				$children = self::flattenChildrenRecursively($album['children']);
-				foreach ($children as $child)
-					$rows[] = array_intersect_key($child, array_flip(['id_tag', 'tag', 'slug', 'count']));
-			}
-		}
-
-		return $rows;
-	}
 }

controllers/ManageAssets.php

@@ -14,10 +14,37 @@ class ManageAssets extends HTMLController
 		if (!Registry::get('user')->isAdmin())
 			throw new NotAllowedException();
 
+		if (isset($_POST['deleteChecked'], $_POST['delete']) && Session::validateSession())
+			$this->handleAssetDeletion();
+
 		Session::resetSessionToken();
 
 		$options = [
+			'form' => [
+				'action' => BASEURL . '/manageassets/?' . Session::getSessionTokenKey() . '=' . Session::getSessionToken(),
+				'method' => 'post',
+				'class' => 'col-md-6 text-end',
+				'is_embed' => true,
+				'buttons' => [
+					'deleteChecked' => [
+						'type' => 'submit',
+						'caption' => 'Delete checked',
+						'class' => 'btn-danger',
+						'onclick' => 'return confirm(\'Are you sure you want to delete these items?\')',
+					],
+				],
+			],
 			'columns' => [
+				'checkbox' => [
+					'header' => '<input type="checkbox" id="selectall">',
+					'is_sortable' => false,
+					'parse' => [
+						'type' => 'function',
+						'data' => function($row) {
+							return '<input type="checkbox" class="asset_select" name="delete[]" value="' . $row['id_asset'] . '">';
+						},
+					],
+				],
 				'id_asset' => [
 					'value' => 'id_asset',
 					'header' => 'ID',
@@ -38,13 +65,18 @@ class ManageAssets extends HTMLController
 						'data' => 'filename',
 					],
 				],
-				'title' => [
+				'id_user_uploaded' => [
-					'header' => 'Title',
+					'header' => 'User uploaded',
 					'is_sortable' => true,
 					'parse' => [
-						'type' => 'value',
+						'type' => 'function',
-						'link' => BASEURL . '/editasset/?id={ID_ASSET}',
+						'data' => function($row) {
-						'data' => 'title',
+							if (!empty($row['id_user']))
+								return sprintf('<a href="%s/edituser/?id=%d">%s</a>', BASEURL, $row['id_user'],
+									$row['first_name'] . ' ' . $row['surname']);
+							else
+								return 'n/a';
+						},
 					],
 				],
 				'dimensions' => [
@@ -67,15 +99,18 @@ class ManageAssets extends HTMLController
 			'title' => 'Manage assets',
 			'no_items_label' => 'No assets meet the requirements of the current filter.',
 			'items_per_page' => 30,
-			'index_class' => 'pull_left',
+			'index_class' => 'col-md-6',
 			'base_url' => BASEURL . '/manageassets/',
 			'get_data' => function($offset = 0, $limit = 30, $order = '', $direction = 'down') {
-				if (!in_array($order, ['id_asset', 'title', 'subdir', 'filename']))
+				if (!in_array($order, ['id_asset', 'id_user_uploaded', 'title', 'subdir', 'filename']))
 					$order = 'id_asset';
 
 				$data = Registry::get('db')->queryAssocs('
-					SELECT id_asset, title, subdir, filename, image_width, image_height
+					SELECT a.id_asset, a.subdir, a.filename,
-					FROM assets
+						a.image_width, a.image_height,
+						u.id_user, u.first_name, u.surname
+					FROM assets AS a
+					LEFT JOIN users AS u ON a.id_user_uploaded = u.id_user
 					ORDER BY {raw:order}
 					LIMIT {int:offset}, {int:limit}',
 					[
@@ -94,7 +129,25 @@ class ManageAssets extends HTMLController
 		];
 
 		$table = new GenericTable($options);
-		parent::__construct('Asset management - Page ' . $table->getCurrentPage() .'');
+		parent::__construct('Asset management - Page ' . $table->getCurrentPage());
-		$this->page->adopt(new TabularData($table));
+
+		$wrapper = new AssetManagementWrapper();
+		$this->page->adopt($wrapper);
+		$wrapper->adopt(new TabularData($table));
+	}
+
+	private function handleAssetDeletion()
+	{
+		if (!isset($_POST['delete']) || !is_array($_POST['delete']))
+			throw new UnexpectedValueException();
+
+		foreach ($_POST['delete'] as $id_asset)
+		{
+			$asset = Asset::fromId($id_asset);
+			$asset->delete();
+		}
+
+		header('Location: ' . BASEURL . '/manageassets/');
+		exit;
 	}
 }

controllers/ManageErrors.php

@@ -29,11 +29,12 @@ class ManageErrors extends HTMLController
 			'form' => [
 				'action' => BASEURL . '/manageerrors/?' . Session::getSessionTokenKey() . '=' . Session::getSessionToken(),
 				'method' => 'post',
-				'class' => 'floatright',
+				'class' => 'col-md-6 text-end',
 				'buttons' => [
 					'flush' => [
 						'type' => 'submit',
 						'caption' => 'Delete all',
+						'class' => 'btn-danger',
 					],
 				],
 			],
@@ -99,7 +100,7 @@ class ManageErrors extends HTMLController
 			'sort_direction' => !empty($_GET['dir']) ? $_GET['dir'] : '',
 			'no_items_label' => "No errors to display -- we're all good!",
 			'items_per_page' => 20,
-			'index_class' => 'floatleft',
+			'index_class' => 'col-md-6',
 			'base_url' => BASEURL . '/manageerrors/',
 			'get_count' => 'ErrorLog::getCount',
 			'get_data' => function($offset = 0, $limit = 20, $order = '', $direction = 'down') {

controllers/ManageTags.php

@@ -14,11 +14,13 @@ class ManageTags extends HTMLController
 		if (!Registry::get('user')->isAdmin())
 			throw new NotAllowedException();
 
+		Session::resetSessionToken();
+
 		$options = [
 			'form' => [
 				'action' => BASEURL . '/edittag/',
 				'method' => 'get',
-				'class' => 'floatright',
+				'class' => 'col-md-6 text-end',
 				'buttons' => [
 					'add' => [
 						'type' => 'submit',
@@ -48,10 +50,19 @@ class ManageTags extends HTMLController
 						'data' => 'slug',
 					],
 				],
-				'kind' => [
+				'id_user_owner' => [
-					'header' => 'Kind',
+					'header' => 'Owning user',
 					'is_sortable' => true,
-					'value' => 'kind',
+					'parse' => [
+						'type' => 'function',
+						'data' => function($row) {
+							if (!empty($row['id_user']))
+								return sprintf('<a href="%s/edituser/?id=%d">%s</a>', BASEURL, $row['id_user'],
+									$row['first_name'] . ' ' . $row['surname']);
+							else
+								return 'n/a';
+						},
+					],
 				],
 				'count' => [
 					'header' => 'Cardinality',
@@ -65,7 +76,7 @@ class ManageTags extends HTMLController
 			'title' => 'Manage tags',
 			'no_items_label' => 'No tags meet the requirements of the current filter.',
 			'items_per_page' => 30,
-			'index_class' => 'floatleft',
+			'index_class' => 'col-md-6',
 			'base_url' => BASEURL . '/managetags/',
 			'get_data' => function($offset = 0, $limit = 30, $order = '', $direction = 'up') {
 				if (!in_array($order, ['id_tag', 'tag', 'slug', 'kind', 'count']))
@@ -74,8 +85,9 @@ class ManageTags extends HTMLController
 					$direction = 'up';
 
 				$data = Registry::get('db')->queryAssocs('
-					SELECT *
+					SELECT t.*, u.id_user, u.first_name, u.surname
-					FROM tags
+					FROM tags AS t
+					LEFT JOIN users AS u ON t.id_user_owner = u.id_user
 					WHERE kind != {string:album}
 					ORDER BY {raw:order}
 					LIMIT {int:offset}, {int:limit}',

controllers/ManageUsers.php

@@ -14,11 +14,13 @@ class ManageUsers extends HTMLController
 		if (!Registry::get('user')->isAdmin())
 			throw new NotAllowedException();
 
+		Session::resetSessionToken();
+
 		$options = [
 			'form' => [
 				'action' => BASEURL . '/edituser/',
 				'method' => 'get',
-				'class' => 'floatright',
+				'class' => 'col-md-6 text-end',
 				'buttons' => [
 					'add' => [
 						'type' => 'submit',
@@ -94,7 +96,7 @@ class ManageUsers extends HTMLController
 			'title' => 'Manage users',
 			'no_items_label' => 'No users meet the requirements of the current filter.',
 			'items_per_page' => 30,
-			'index_class' => 'floatleft',
+			'index_class' => 'col-md-6',
 			'base_url' => BASEURL . '/manageusers/',
 			'get_data' => function($offset = 0, $limit = 30, $order = '', $direction = 'down') {
 				if (!in_array($order, ['id_user', 'surname', 'first_name', 'slug', 'emailaddress', 'last_action_time', 'ip_address', 'is_admin']))

controllers/ResetPassword.php

@@ -48,7 +48,7 @@ class ResetPassword extends HTMLController
 					exit;
 				}
 				else
-					$form->adopt(new Alert('Some fields require your attention', '<ul><li>' . implode('</li><li>', $missing) . '</li></ul>', 'error'));
+					$form->adopt(new Alert('Some fields require your attention', '<ul><li>' . implode('</li><li>', $missing) . '</li></ul>', 'danger'));
 		 	}
 		}
 		else
@@ -63,7 +63,7 @@ class ResetPassword extends HTMLController
 				$id_user = Authentication::getUserid(trim($_POST['emailaddress']));
 				if ($id_user === false)
 				{
-					$form->adopt(new Alert('Invalid email address', 'The email address you provided could not be found in our system. Please try again.', 'error'));
+					$form->adopt(new Alert('Invalid email address', 'The email address you provided could not be found in our system. Please try again.', 'danger'));
 					return;
 				}
 

controllers/UploadMedia.php

@@ -33,21 +33,20 @@ class UploadMedia extends HTMLController
 				if (empty($uploaded_file))
 					continue;
 
-				// DIY slug club.
-				$slug = $tag->slug . '/' . strtr($uploaded_file['name'], [' ' => '-', '--' => '-', '&' => 'and', '=>' => '', "'" => "", ":"=> "", '\\' => '-']);
-
 				$asset = Asset::createNew([
 					'filename_to_copy' => $uploaded_file['tmp_name'],
 					'preferred_filename' => $uploaded_file['name'],
 					'preferred_subdir' => $tag->slug,
-					'slug' => $slug,
 				]);
 
 				$new_ids[] = $asset->getId();
 				$asset->linkTags([$tag->id_tag]);
 
-				$tag->id_asset_thumb = $asset->getId();
+				if (empty($tag->id_asset_thumb))
-				$tag->save();
+				{
+					$tag->id_asset_thumb = $asset->getId();
+					$tag->save();
+				}
 			}
 
 			if (isset($_REQUEST['format']) && $_REQUEST['format'] === 'json')

controllers/ViewPeople.php

@@ -52,8 +52,9 @@ class ViewPeople extends HTMLController
 			'start' => $start,
 			'base_url' => BASEURL . '/people/',
 			'page_slug' => 'page/%PAGE%/',
+			'index_class' => 'pagination-lg justify-content-center',
 		]);
-		$this->page->adopt(new Pagination($pagination));
+		$this->page->adopt(new PageIndexWidget($pagination));
 
 		$this->page->setCanonicalUrl(BASEURL . '/people/' . ($page > 1 ? 'page/' . $page . '/' : ''));
 	}

controllers/ViewPhoto.php

@@ -27,10 +27,6 @@ class ViewPhoto extends HTMLController
 			$this->handleConfirmDelete($user, $author, $photo);
 		else
 			$this->handleViewPhoto($user, $author, $photo);
-
-		// Add an edit button to the admin bar.
-		if ($user->isAdmin())
-			$this->admin_bar->appendItem(BASEURL . '/editasset/?id=' . $photo->getId(), 'Edit this photo');
 	}
 
 	private function handleConfirmDelete(User $user, User $author, Asset $photo)
@@ -43,7 +39,7 @@ class ViewPhoto extends HTMLController
 			$page = new ConfirmDeletePage($photo->getImage());
 			$this->page->adopt($page);
 		}
-		else if (isset($_REQUEST['delete_confirmed']))
+		elseif (isset($_REQUEST['delete_confirmed']))
 		{
 			$album_url = $photo->getSubdir();
 			$photo->delete();

controllers/ViewPhotoAlbum.php

@@ -60,27 +60,7 @@ class ViewPhotoAlbum extends HTMLController
 
 		// Can we do fancy things here?
 		// !!! TODO: permission system?
-		$buttons = [];
+		$buttons = $this->getAlbumButtons($id_tag, $tag ?? null);
-
-		if (Registry::get('user')->isLoggedIn())
-		{
-			$buttons[] = [
-				'url' => BASEURL . '/download/?tag=' . $id_tag,
-				'caption' => 'Download this album',
-			];
-
-			$buttons[] = [
-				'url' => BASEURL . '/uploadmedia/?tag=' . $id_tag,
-				'caption' => 'Upload new photos here',
-			];
-		}
-		if (Registry::get('user')->isAdmin())
-			$buttons[] = [
-				'url' => BASEURL . '/addalbum/?tag=' . $id_tag,
-				'caption' => 'Create new subalbum here',
-			];
-
-		// Enough actions for a button box?
 		if (!empty($buttons))
 			$this->page->adopt(new AlbumButtonBox($buttons));
 
@@ -111,8 +91,9 @@ class ViewPhotoAlbum extends HTMLController
 				'start' => (isset($_GET['page']) ? $_GET['page'] - 1 : 0) * self::PER_PAGE,
 				'base_url' => BASEURL . '/' . (isset($_GET['tag']) ? $_GET['tag'] . '/' : ''),
 				'page_slug' => 'page/%PAGE%/',
+				'index_class' => 'pagination-lg justify-content-center',
 			]);
-			$this->page->adopt(new Pagination($index));
+			$this->page->adopt(new PageIndexWidget($index));
 		}
 
 		// Set the canonical url.
@@ -156,13 +137,67 @@ class ViewPhotoAlbum extends HTMLController
 				'id_tag' => $album['id_tag'],
 				'caption' => $album['tag'],
 				'link' => BASEURL . '/' . $album['slug'] . '/',
-				'thumbnail' => !empty($album['id_asset_thumb']) ? $assets[$album['id_asset_thumb']]->getImage() : null,
+				'thumbnail' => !empty($album['id_asset_thumb']) && isset($assets[$album['id_asset_thumb']])
+					? $assets[$album['id_asset_thumb']]->getImage() : null,
 			];
 		}
 
 		return $albums;
 	}
 
+	private function getAlbumButtons($id_tag, $tag)
+	{
+		$buttons = [];
+		$user = Registry::get('user');
+
+		if ($user->isLoggedIn())
+		{
+			$buttons[] = [
+				'url' => BASEURL . '/download/?tag=' . $id_tag,
+				'caption' => 'Download album',
+			];
+		}
+
+		if (isset($tag))
+		{
+			if ($tag->kind === 'Album')
+			{
+				$buttons[] = [
+					'url' => BASEURL . '/uploadmedia/?tag=' . $id_tag,
+					'caption' => 'Upload photos here',
+				];
+			}
+
+			if ($user->isAdmin())
+			{
+				if ($tag->kind === 'Album')
+				{
+					$buttons[] = [
+						'url' => BASEURL . '/editalbum/?id=' . $id_tag,
+						'caption' => 'Edit album',
+					];
+				}
+				elseif ($tag->kind === 'Person')
+				{
+					$buttons[] = [
+						'url' => BASEURL . '/edittag/?id=' . $id_tag,
+						'caption' => 'Edit tag',
+					];
+				}
+			}
+		}
+
+		if ($user->isAdmin() && (!isset($tag) || $tag->kind === 'Album'))
+		{
+			$buttons[] = [
+				'url' => BASEURL . '/addalbum/?tag=' . $id_tag,
+				'caption' => 'Create subalbum',
+			];
+		}
+
+		return $buttons;
+	}
+
 	public function __destruct()
 	{
 		if (isset($this->iterator))

controllers/ViewTimeline.php

@@ -46,8 +46,9 @@ class ViewTimeline extends HTMLController
 				'start' => (isset($_GET['page']) ? $_GET['page'] - 1 : 0) * self::PER_PAGE,
 				'base_url' => BASEURL . '/timeline/',
 				'page_slug' => 'page/%PAGE%/',
+				'index_class' => 'pagination-lg justify-content-center',
 			]);
-			$this->page->adopt(new Pagination($index));
+			$this->page->adopt(new PageIndexWidget($index));
 		}
 
 		// Set the canonical url.

models/AdminMenu.php

@@ -0,0 +1,62 @@
+<?php
+/*****************************************************************************
+ * AdminMenu.php
+ * Contains the admin navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class AdminMenu extends Menu
+{
+	public function __construct()
+	{
+		$user = Registry::has('user') ? Registry::get('user') : new Guest();
+		if (!$user->isAdmin())
+			return;
+
+		$this->items[0] = [
+			'label' => 'Admin',
+			'icon' => 'gear',
+			'badge' => ErrorLog::getCount(),
+			'subs' => [
+				[
+					'uri' => '/managealbums/',
+					'label' => 'Albums',
+				],
+				[
+					'uri' => '/manageassets/',
+					'label' => 'Assets',
+				],
+				[
+					'uri' => '/managetags/',
+					'label' => 'Tags',
+				],
+				[
+					'uri' => '/manageusers/',
+					'label' => 'Users',
+				],
+				[
+					'uri' => '/manageerrors/',
+					'label' => 'Errors',
+					'badge' => ErrorLog::getCount(),
+				],
+			],
+		];
+
+		if ($this->items[0]['badge'] == 0)
+			unset($this->items[0]['badge']);
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}

models/Asset.php

@@ -27,7 +27,10 @@ class Asset
 	protected function __construct(array $data)
 	{
 		foreach ($data as $attribute => $value)
-			$this->$attribute = $value;
+		{
+			if (property_exists($this, $attribute))
+				$this->$attribute = $value;
+		}
 
 		if (!empty($data['date_captured']) && $data['date_captured'] !== 'NULL')
 			$this->date_captured = new DateTime($data['date_captured']);
@@ -184,9 +187,10 @@ class Asset
 
 		$new_filename = $preferred_filename;
 		$destination = ASSETSDIR . '/' . $preferred_subdir . '/' . $preferred_filename;
-		while (file_exists($destination))
+		for ($i = 1; file_exists($destination); $i++)
 		{
-			$filename = pathinfo($preferred_filename, PATHINFO_FILENAME) . '_' . mt_rand(10, 99);
+			$suffix = $i;
+			$filename = pathinfo($preferred_filename, PATHINFO_FILENAME) . ' (' . $suffix . ')';
 			$extension = pathinfo($preferred_filename, PATHINFO_EXTENSION);
 			$new_filename = $filename . '.' . $extension;
 			$destination = dirname($destination) . '/' . $new_filename;
@@ -203,11 +207,14 @@ class Asset
 		$mimetype = finfo_file($finfo, $destination);
 		finfo_close($finfo);
 
+		// We're going to need the base name a few times...
+		$basename = pathinfo($new_filename, PATHINFO_FILENAME);
+
 		// Do we have a title yet? Otherwise, use the filename.
-		$title = isset($data['title']) ? $data['title'] : pathinfo($preferred_filename, PATHINFO_FILENAME);
+		$title = $data['title'] ?? $basename;
 
 		// Same with the slug.
-		$slug = isset($data['slug']) ? $data['slug'] : $preferred_subdir . '/' . pathinfo($preferred_filename, PATHINFO_FILENAME);
+		$slug = $data['slug'] ?? sprintf('%s/%s', $preferred_subdir, $basename);
 
 		// Detected an image?
 		if (substr($mimetype, 0, 5) == 'image')
@@ -483,9 +490,7 @@ class Asset
 	{
 		$db = Registry::get('db');
 
-		if (!unlink(ASSETSDIR . '/' . $this->subdir . '/' . $this->filename))
+		// First: delete associated metadata
-			return false;
-
 		$db->query('
 			DELETE FROM assets_meta
 			WHERE id_asset = {int:id_asset}',
@@ -493,6 +498,7 @@ class Asset
 				'id_asset' => $this->id_asset,
 			]);
 
+		// Second: figure out what tags to recount cardinality for
 		$recount_tags = $db->queryValues('
 			SELECT id_tag
 			FROM assets_tags
@@ -510,13 +516,30 @@ class Asset
 
 		Tag::recount($recount_tags);
 
-		$return = $db->query('
+		// Third: figure out what associated thumbs to delete
-			DELETE FROM assets
+		$thumbs_to_delete = $db->queryValues('
+			SELECT filename
+			FROM assets_thumbs
 			WHERE id_asset = {int:id_asset}',
 			[
 				'id_asset' => $this->id_asset,
 			]);
 
+		foreach ($thumbs_to_delete as $filename)
+		{
+			$thumb_path = THUMBSDIR . '/' . $this->subdir . '/' . $filename;
+			if (is_file($thumb_path))
+				unlink($thumb_path);
+		}
+
+		$db->query('
+			DELETE FROM assets_thumbs
+			WHERE id_asset = {int:id_asset}',
+			[
+				'id_asset' => $this->id_asset,
+			]);
+
+		// Reset asset ID for tags that use this asset for their thumbnail
 		$rows = $db->query('
 			SELECT id_tag
 			FROM tags
@@ -534,6 +557,17 @@ class Asset
 			}
 		}
 
+		// Finally, delete the actual asset
+		if (!unlink(ASSETSDIR . '/' . $this->subdir . '/' . $this->filename))
+			return false;
+
+		$return = $db->query('
+			DELETE FROM assets
+			WHERE id_asset = {int:id_asset}',
+			[
+				'id_asset' => $this->id_asset,
+			]);
+
 		return $return;
 	}
 

models/Dispatcher.php

@@ -50,7 +50,7 @@ class Dispatcher
 	public static function kickGuest($title = null, $message = null)
 	{
 		$form = new LogInForm('Log in');
-		$form->adopt(new Alert($title ?? '', $message ?? 'You need to be logged in to view this page.', 'error'));
+		$form->adopt(new Alert($title ?? '', $message ?? 'You need to be logged in to view this page.', 'danger'));
 		$form->setRedirectUrl($_SERVER['REQUEST_URI']);
 
 		$page = new MainTemplate('Login required');
@@ -86,7 +86,6 @@ class Dispatcher
 		if (Registry::has('user') && Registry::get('user')->isAdmin())
 		{
 			$page->appendStylesheet(BASEURL . '/css/admin.css');
-			$page->adopt(new AdminBar());
 		}
 
 		$page->adopt(new DummyBox('Well, this is a bit embarrassing!', '<p>The page you requested could not be found. Don\'t worry, it\'s probably not your fault. You\'re welcome to browse the website, though!</p>', 'errormsg'));

models/ErrorHandler.php

@@ -168,7 +168,6 @@ class ErrorHandler
 			if ($is_admin)
 			{
 				$page->appendStylesheet(BASEURL . '/css/admin.css');
-				$page->adopt(new AdminBar());
 			}
 		}
 		elseif (!$is_sensitive)

models/Form.php

@@ -3,7 +3,8 @@
  * Form.php
  * Contains key class Form.
  *
- * Kabuki CMS (C) 2013-2015, Aaron van Geffen
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
  *****************************************************************************/
 
 class Form
@@ -12,9 +13,11 @@ class Form
 	public $request_url;
 	public $content_above;
 	public $content_below;
-	private $fields;
+	private $fields = [];
-	private $data;
+	private $data = [];
-	private $missing;
+	private $missing = [];
+	private $submit_caption;
+	private $trim_inputs;
 
 	// NOTE: this class does not verify the completeness of form options.
 	public function __construct($options)
@@ -24,9 +27,42 @@ class Form
 		$this->fields = !empty($options['fields']) ? $options['fields'] : [];
 		$this->content_below = !empty($options['content_below']) ? $options['content_below'] : null;
 		$this->content_above = !empty($options['content_above']) ? $options['content_above'] : null;
+		$this->submit_caption = !empty($options['submit_caption']) ? $options['submit_caption'] : 'Save information';
+		$this->trim_inputs = !empty($options['trim_inputs']);
 	}
 
-	public function verify($post)
+	public function getFields()
+	{
+		return $this->fields;
+	}
+
+	public function getData()
+	{
+		return $this->data;
+	}
+
+	public function getSubmitButtonCaption()
+	{
+		return $this->submit_caption;
+	}
+
+	public function getMissing()
+	{
+		return $this->missing;
+	}
+
+	public function setData($data)
+	{
+		$this->verify($data, true);
+		$this->missing = [];
+	}
+
+	public function setFieldAsMissing($field)
+	{
+		$this->missing[] = $field;
+	}
+
+	public function verify($post, $initalisation = false)
 	{
 		$this->data = [];
 		$this->missing = [];
@@ -41,30 +77,43 @@ class Form
 			}
 
 			// No data present at all for this field?
-			if ((!isset($post[$field_id]) || $post[$field_id] == '') && empty($field['is_optional']))
+			if ((!isset($post[$field_id]) || $post[$field_id] == '') &&
+				$field['type'] !== 'captcha')
 			{
-				$this->missing[] = $field_id;
+				if (empty($field['is_optional']))
-				$this->data[$field_id] = '';
+					$this->missing[] = $field_id;
+
+				if ($field['type'] === 'select' && !empty($field['multiple']))
+					$this->data[$field_id] = [];
+				else
+					$this->data[$field_id] = '';
+
 				continue;
 			}
 
-			// Verify data for all fields
+			// Should we trim this?
+			if ($this->trim_inputs && $field['type'] !== 'captcha' && empty($field['multiple']))
+				$post[$field_id] = trim($post[$field_id]);
+
+			// Using a custom validation function?
+			if (isset($field['validate']) && is_callable($field['validate']))
+			{
+				// Validation functions can clean up the data if passed by reference
+				$this->data[$field_id] = $post[$field_id];
+
+				// Evaluate validation functions as boolean to see if data is missing
+				if (!$field['validate']($post[$field_id]))
+					$this->missing[] = $field_id;
+
+				continue;
+			}
+
+			// Verify data by field type
 			switch ($field['type'])
 			{
 				case 'select':
 				case 'radio':
-					// Skip validation? Dangerous territory!
+					$this->validateSelect($field_id, $field, $post);
-					if (isset($field['verify_options']) && $field['verify_options'] === false)
-						$this->data[$field_id] = $post[$field_id];
-					// Check whether selected option is valid.
-					elseif (isset($post[$field_id]) && !isset($field['options'][$post[$field_id]]))
-					{
-						$this->missing[] = $field_id;
-						$this->data[$field_id] = '';
-						continue 2;
-					}
-					else
-						$this->data[$field_id] = $post[$field_id];
 					break;
 
 				case 'checkbox':
@@ -73,61 +122,22 @@ class Form
 					break;
 
 				case 'color':
-					// Colors are stored as a string of length 3 or 6 (hex)
+					$this->validateColor($field_id, $field, $post);
-					if (!isset($post[$field_id]) || (strlen($post[$field_id]) != 3 && strlen($post[$field_id]) != 6))
-					{
-						$this->missing[] = $field_id;
-						$this->data[$field_id] = '';
-						continue 2;
-					}
-					else
-						$this->data[$field_id] = $post[$field_id];
 					break;
 
 				case 'file':
-					// Needs to be verified elsewhere!
+					// Asset needs to be processed out of POST! This is just a filename.
+					$this->data[$field_id] = isset($post[$field_id]) ? $post[$field_id] : '';
 					break;
 
 				case 'numeric':
-					$data = isset($post[$field_id]) ? $post[$field_id] : '';
+					$this->validateNumeric($field_id, $field, $post);
-					// Do we need to check bounds?
+					break;
-					if (isset($field['min_value']) && is_numeric($data))
+
-					{
+				case 'captcha':
-						if (is_float($field['min_value']) && (float) $data < $field['min_value'])
+					if (isset($_POST['g-recaptcha-response']) && !$initalisation)
-						{
+						$this->validateCaptcha($field_id);
-							$this->missing[] = $field_id;
+					elseif (!$initalisation)
-							$this->data[$field_id] = 0.0;
-						}
-						elseif (is_int($field['min_value']) && (int) $data < $field['min_value'])
-						{
-							$this->missing[] = $field_id;
-							$this->data[$field_id] = 0;
-						}
-						else
-							$this->data[$field_id] = $data;
-					}
-					elseif (isset($field['max_value']) && is_numeric($data))
-					{
-						if (is_float($field['max_value']) && (float) $data > $field['max_value'])
-						{
-							$this->missing[] = $field_id;
-							$this->data[$field_id] = 0.0;
-						}
-						elseif (is_int($field['max_value']) && (int) $data > $field['max_value'])
-						{
-							$this->missing[] = $field_id;
-							$this->data[$field_id] = 0;
-						}
-						else
-							$this->data[$field_id] = $data;
-					}
-					// Does it look numeric?
-					elseif (is_numeric($data))
-					{
-						$this->data[$field_id] = $data;
-					}
-					// Let's consider it missing, then.
-					else
 					{
 						$this->missing[] = $field_id;
 						$this->data[$field_id] = 0;
@@ -137,29 +147,200 @@ class Form
 				case 'text':
 				case 'textarea':
 				default:
-					$this->data[$field_id] = isset($post[$field_id]) ? $post[$field_id] : '';
+					$this->validateText($field_id, $field, $post);
 			}
 		}
 	}
 
-	public function setData($data)
+	private function validateCaptcha($field_id)
 	{
-		$this->verify($data);
+		$postdata = http_build_query([
-		$this->missing = [];
+			'secret' => RECAPTCHA_API_SECRET,
+			'response' => $_POST['g-recaptcha-response'],
+		]);
+
+		$opts = [
+			'http' => [
+				'method'  => 'POST',
+				'header'  => 'Content-type: application/x-www-form-urlencoded',
+				'content' => $postdata,
+			]
+		];
+
+		$context  = stream_context_create($opts);
+		$result = file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);
+		$check = json_decode($result);
+
+		if ($check->success)
+		{
+			$this->data[$field_id] = 1;
+		}
+		else
+		{
+			$this->data[$field_id] = 0;
+			$this->missing[] = $field_id;
+		}
 	}
 
-	public function getFields()
+	private function validateColor($field_id, array $field, array $post)
 	{
-		return $this->fields;
+		// Colors are stored as a string of length 3 or 6 (hex)
+		if (!isset($post[$field_id]) || (strlen($post[$field_id]) != 3 && strlen($post[$field_id]) != 6))
+		{
+			$this->missing[] = $field_id;
+			$this->data[$field_id] = '';
+		}
+		else
+			$this->data[$field_id] = $post[$field_id];
 	}
 
-	public function getData()
+	private function validateNumeric($field_id, array $field, array $post)
 	{
-		return $this->data;
+		$data = isset($post[$field_id]) ? $post[$field_id] : '';
+
+		// Sanity check: does this even look numeric?
+		if (!is_numeric($data))
+		{
+			$this->missing[] = $field_id;
+			$this->data[$field_id] = 0;
+			return;
+		}
+
+		// Do we need to a minimum bound?
+		if (isset($field['min_value']))
+		{
+			if (is_float($field['min_value']) && (float) $data < $field['min_value'])
+			{
+				$this->missing[] = $field_id;
+				$this->data[$field_id] = 0.0;
+			}
+			elseif (is_int($field['min_value']) && (int) $data < $field['min_value'])
+			{
+				$this->missing[] = $field_id;
+				$this->data[$field_id] = 0;
+			}
+		}
+
+		// What about a maximum bound?
+		if (isset($field['max_value']))
+		{
+			if (is_float($field['max_value']) && (float) $data > $field['max_value'])
+			{
+				$this->missing[] = $field_id;
+				$this->data[$field_id] = 0.0;
+			}
+			elseif (is_int($field['max_value']) && (int) $data > $field['max_value'])
+			{
+				$this->missing[] = $field_id;
+				$this->data[$field_id] = 0;
+			}
+		}
+
+		$this->data[$field_id] = $data;
 	}
 
-	public function getMissing()
+	private function validateSelect($field_id, array $field, array $post)
 	{
-		return $this->missing;
+		// Skip validation? Dangerous territory!
+		if (isset($field['verify_options']) && $field['verify_options'] === false)
+		{
+			$this->data[$field_id] = $post[$field_id];
+			return;
+		}
+
+		// Check whether selected option is valid.
+		if (($field['type'] !== 'select' || empty($field['multiple'])) && empty($field['has_groups']))
+		{
+			if (isset($post[$field_id]) && !isset($field['options'][$post[$field_id]]))
+			{
+				$this->missing[] = $field_id;
+				$this->data[$field_id] = '';
+				return;
+			}
+			else
+				$this->data[$field_id] = $post[$field_id];
+		}
+		// Multiple selections involve a bit more work.
+		elseif (!empty($field['multiple']) && empty($field['has_groups']))
+		{
+			$this->data[$field_id] = [];
+			if (!is_array($post[$field_id]))
+			{
+				if (isset($field['options'][$post[$field_id]]))
+					$this->data[$field_id][] = $post[$field_id];
+				else
+					$this->missing[] = $field_id;
+				return;
+			}
+
+			foreach ($post[$field_id] as $option)
+			{
+				if (isset($field['options'][$option]))
+					$this->data[$field_id][] = $option;
+			}
+
+			if (empty($this->data[$field_id]))
+				$this->missing[] = $field_id;
+		}
+		// Any optgroups involved?
+		elseif (!empty($field['has_groups']))
+		{
+			if (!isset($post[$field_id]))
+			{
+				$this->missing[] = $field_id;
+				$this->data[$field_id] = '';
+				return;
+			}
+
+			// Expensive: iterate over all groups until the value selected has been found.
+			foreach ($field['options'] as $label => $options)
+			{
+				if (is_array($options))
+				{
+					// Consider each of the options as a valid a value.
+					foreach ($options as $value => $label)
+					{
+						if ($post[$field_id] === $value)
+						{
+							$this->data[$field_id] = $options;
+							return;
+						}
+					}
+				}
+				else
+				{
+					// This is an ungrouped value in disguise! Treat it as such.
+					if ($post[$field_id] === $options)
+					{
+						$this->data[$field_id] = $options;
+						return;
+					}
+					else
+						continue;
+				}
+			}
+
+			// If we've reached this point, we'll consider the data invalid.
+			$this->missing[] = $field_id;
+			$this->data[$field_id] = '';
+		}
+		else
+		{
+			throw new UnexpectedValueException('Unexpected field configuration in validateSelect!');
+		}
+	}
+
+	private function validateText($field_id, array $field, array $post)
+	{
+		$this->data[$field_id] = isset($post[$field_id]) ? $post[$field_id] : '';
+
+		// Trim leading and trailing whitespace?
+		if (!empty($field['trim']))
+			$this->data[$field_id] = trim($this->data[$field_id]);
+
+		// Is there a length limit to enforce?
+		if (isset($field['maxlength']) && strlen($post[$field_id]) > $field['maxlength']) {
+			$post[$field_id] = substr($post[$field_id], 0, $field['maxlength']);
+		}
 	}
 }

models/GenericTable.php

@@ -3,7 +3,8 @@
  * GenericTable.php
  * Contains key class GenericTable.
  *
- * Kabuki CMS (C) 2013-2015, Aaron van Geffen
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2021
  *****************************************************************************/
 
 class GenericTable
@@ -19,7 +20,7 @@ class GenericTable
 
 	public $form_above;
 	public $form_below;
-
+	private $table_class;
 	private $sort_direction;
 	private $sort_order;
 	private $base_url;
@@ -84,6 +85,8 @@ class GenericTable
 		else
 			$this->body = $options['no_items_label'] ?? '';
 
+		$this->table_class = $options['table_class'] ?? '';
+
 		// Got a title?
 		$this->title = $options['title'] ?? '';
 		$this->title_class = $options['title_class'] ?? '';
@@ -105,6 +108,7 @@ class GenericTable
 
 			$header = [
 				'class' => isset($column['class']) ? $column['class'] : '',
+				'cell_class' => isset($column['cell_class']) ? $column['cell_class'] : null,
 				'colspan' => !empty($column['header_colspan']) ? $column['header_colspan'] : 1,
 				'href' => $isSortable ? $this->getLink($this->start, $key, $sortDirection) : null,
 				'label' => $column['header'],
@@ -168,6 +172,11 @@ class GenericTable
 		return $this->pageIndex;
 	}
 
+	public function getTableClass()
+	{
+		return $this->table_class;
+	}
+
 	public function getTitle()
 	{
 		return $this->title;
@@ -196,6 +205,7 @@ class GenericTable
 
 				// Append the cell to the row.
 				$newRow['cells'][] = [
+					'class' => $column['cell_class'] ?? '',
 					'value' => $value,
 				];
 			}

models/MainMenu.php

@@ -0,0 +1,41 @@
+<?php
+/*****************************************************************************
+ * MainMenu.php
+ * Contains the main navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class MainMenu extends Menu
+{
+	public function __construct()
+	{
+		$this->items = [
+			[
+				'uri' => '/',
+				'label' => 'Albums',
+			],
+			[
+				'uri' => '/people/',
+				'label' => 'People',
+			],
+			[
+				'uri' => '/timeline/',
+				'label' => 'Timeline',
+			],
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}

models/Member.php

@@ -110,6 +110,9 @@ class Member extends User
 				$this->is_admin = $value == 1 ? 1 : 0;
 		}
 
+		$params = get_object_vars($this);
+		$params['is_admin'] = $this->is_admin ? 1 : 0;
+
 		return Registry::get('db')->query('
 			UPDATE users
 			SET
@@ -120,7 +123,7 @@ class Member extends User
 				password_hash = {string:password_hash},
 				is_admin = {int:is_admin}
 			WHERE id_user = {int:id_user}',
-			get_object_vars($this));
+			$params);
 	}
 
 	/**
@@ -189,4 +192,15 @@ class Member extends User
 		// We should probably phase out the use of this function, or refactor the access levels of member properties...
 		return get_object_vars($this);
 	}
+
+	public static function getMemberMap()
+	{
+		return Registry::get('db')->queryPair('
+			SELECT id_user, CONCAT(first_name, {string:blank}, surname) AS full_name
+			FROM users
+			ORDER BY first_name, surname',
+			[
+				'blank' => ' ',
+			]);
+	}
 }

models/Menu.php

@@ -0,0 +1,18 @@
+<?php
+/*****************************************************************************
+ * Menu.php
+ * Contains all navigational menus.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+abstract class Menu
+{
+	protected $items = [];
+
+	public function getItems()
+	{
+		return $this->items;
+	}
+}

models/PhotoAlbum.php

@@ -0,0 +1,76 @@
+<?php
+/*****************************************************************************
+ * PhotoAlbum.php
+ * Contains key class PhotoAlbum.
+ *
+ * Kabuki CMS (C) 2013-2015, Aaron van Geffen
+ *****************************************************************************/
+
+class PhotoAlbum extends Tag
+{
+	public static function getHierarchy($order, $direction)
+	{
+		$db = Registry::get('db');
+		$res = $db->query('
+			SELECT *
+			FROM tags
+			WHERE kind = {string:album}
+			ORDER BY id_parent, {raw:order}',
+			[
+				'order' => $order . ($direction == 'up' ? ' ASC' : ' DESC'),
+				'album' => 'Album',
+			]);
+
+		$albums_by_parent = [];
+		while ($row = $db->fetch_assoc($res))
+		{
+			if (!isset($albums_by_parent[$row['id_parent']]))
+				$albums_by_parent[$row['id_parent']] = [];
+
+			$albums_by_parent[$row['id_parent']][] = $row + ['children' => []];
+		}
+
+		$albums = self::getChildrenRecursively(0, 0, $albums_by_parent);
+		$rows = self::flattenChildrenRecursively($albums);
+
+		return $rows;
+	}
+
+	private static function getChildrenRecursively($id_parent, $level, &$albums_by_parent)
+	{
+		$children = [];
+		if (!isset($albums_by_parent[$id_parent]))
+			return $children;
+
+		foreach ($albums_by_parent[$id_parent] as $child)
+		{
+			if (isset($albums_by_parent[$child['id_tag']]))
+				$child['children'] = self::getChildrenRecursively($child['id_tag'], $level + 1, $albums_by_parent);
+
+			$child['tag'] = ($level ? str_repeat('—', $level * 2) . ' ' : '') . $child['tag'];
+			$children[] = $child;
+		}
+
+		return $children;
+	}
+
+	private static function flattenChildrenRecursively($albums)
+	{
+		if (empty($albums))
+			return [];
+
+		$rows = [];
+		foreach ($albums as $album)
+		{
+			$rows[] = array_intersect_key($album, array_flip(['id_tag', 'tag', 'slug', 'count']));
+			if (!empty($album['children']))
+			{
+				$children = self::flattenChildrenRecursively($album['children']);
+				foreach ($children as $child)
+					$rows[] = array_intersect_key($child, array_flip(['id_tag', 'tag', 'slug', 'count']));
+			}
+		}
+
+		return $rows;
+	}
+}

models/PhotoMosaic.php

@@ -79,7 +79,7 @@ class PhotoMosaic
 			return -$priority_diff;
 
 		// In other cases, we'll just show the newest first.
-		return $a->getDateCaptured() > $b->getDateCaptured() ? -1 : 1;
+		return $a->getDateCaptured() <=> $b->getDateCaptured();
 	}
 
 	private static function daysApart(Image $a, Image $b)

models/Router.php

@@ -11,6 +11,7 @@ class Router
 	public static function route()
 	{
 		$possibleActions = [
+			'accountsettings' => 'AccountSettings',
 			'addalbum' => 'EditAlbum',
 			'albums' => 'ViewPhotoAlbums',
 			'editalbum' => 'EditAlbum',

models/Tag.php

@@ -11,6 +11,7 @@ class Tag
 	public $id_tag;
 	public $id_parent;
 	public $id_asset_thumb;
+	public $id_user_owner;
 	public $tag;
 	public $slug;
 	public $description;
@@ -95,6 +96,25 @@ class Tag
 			return $rows;
 	}
 
+	public static function getAllByOwner($id_user_owner)
+	{
+		$db = Registry::get('db');
+		$res = $db->query('
+			SELECT *
+			FROM tags
+			WHERE id_user_owner = {int:id_user_owner}
+			ORDER BY tag',
+			[
+				'id_user_owner' => $id_user_owner,
+			]);
+
+		$objects = [];
+		while ($row = $db->fetch_assoc($res))
+			$objects[$row['id_tag']] = new Tag($row);
+
+		return $objects;
+	}
+
 	public static function getAlbums($id_parent = 0, $offset = 0, $limit = 24, $return_format = 'array')
 	{
 		$rows = Registry::get('db')->queryAssocs('
@@ -258,7 +278,8 @@ class Tag
 			UPDATE tags
 			SET
 				id_parent = {int:id_parent},
-				id_asset_thumb = {int:id_asset_thumb},
+				id_asset_thumb = {int:id_asset_thumb},' . (isset($this->id_user_owner) ? '
+				id_user_owner = {int:id_user_owner},' : '') . '
 				tag = {string:tag},
 				slug = {string:slug},
 				description = {string:description},
@@ -292,8 +313,7 @@ class Tag
 	public function resetIdAsset()
 	{
 		$db = Registry::get('db');
-
+		$new_id = $db->queryValue('
-		$row = $db->query('
 			SELECT MAX(id_asset) as new_id
 			FROM assets_tags
 			WHERE id_tag = {int:id_tag}',
@@ -301,18 +321,12 @@ class Tag
 				'id_tag' => $this->id_tag,
 			]);
 
-		$new_id = 0;
-		if(!empty($row))
-		{
-			$new_id = $row->fetch_assoc()['new_id'];
-		}
-
 		return $db->query('
 			UPDATE tags
 			SET id_asset_thumb = {int:new_id}
 			WHERE id_tag = {int:id_tag}',
 			[
-				'new_id' => $new_id,
+				'new_id' => $new_id ?? 0,
 				'id_tag' => $this->id_tag,
 			]);
 	}

models/UserMenu.php

@@ -0,0 +1,60 @@
+<?php
+/*****************************************************************************
+ * UserMenu.php
+ * Contains the user navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class UserMenu extends Menu
+{
+	public function __construct()
+	{
+		$user = Registry::has('user') ? Registry::get('user') : new Guest();
+		if ($user->isLoggedIn())
+		{
+			$this->items[] = [
+				'label' => $user->getFirstName(),
+				'icon' => 'person-circle',
+				'subs' => [
+
+					[
+						'label' => 'Settings',
+						'uri' => '/accountsettings/',
+					],
+					[
+						'label' => 'Log out',
+						'uri' => '/logout/',
+					],
+				],
+			];
+		}
+		else
+		{
+			$this->items[] = [
+				'label' => 'Log in',
+				'icon' => 'person-circle',
+				'uri' => '/login/',
+			];
+		}
+
+		$this->items[] = [
+			'label' => 'Home',
+			'icon' => 'house-door',
+			'uri' => '/',
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}

public/css/admin.css

@@ -1,126 +1,3 @@
-.admin_box {
-	margin: 0;
-	padding: 20px;
-	background: #fff;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	overflow: auto;
-}
-
-.admin_box h2 {
-	font: 700 24px "Open Sans", sans-serif;
-	margin: 0 0 0.2em;
-}
-
-.floatleft {
-	float: left;
-}
-.floatright {
-	float: right;
-}
-
-/* Admin bar styles
----------------------*/
-body {
-	padding-top: 30px;
-}
-#admin_bar {
-	background: #333;
-	color: #ccc;
-	left: 0;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	z-index: 100;
-}
-#admin_bar ul {
-	list-style: none;
-	margin: 0 auto;
-	max-width: 1280px;
-	min-width: 900px;
-	padding: 2px;
-	width: 95%;
-}
-#admin_bar ul > li {
-	display: inline;
-	border-right: 1px solid #aaa;
-}
-#admin_bar ul > li:last-child {
-	border-right: none;
-}
-#admin_bar li > a {
-	color: inherit;
-	display: inline-block;
-	padding: 4px 6px;
-}
-#admin_bar li a:hover {
-	text-decoration: underline;
-}
-
-
-/* (Tag) autosuggest
-----------------------*/
-#new_tag_container {
-	display: block;
-	position: relative;
-}
-.autosuggest {
-	background: #fff;
-	border: 1px solid #ccc;
-	position: absolute;
-	top: 29px;
-	margin: 0;
-	padding: 0;
-}
-.autosuggest li {
-	display: block !important;
-	padding: 3px;
-}
-.autosuggest li:hover, .autosuggest li.selected {
-	background: #CFECF7;
-	cursor: pointer;
-}
-
-
-/* Edit user screen
----------------------*/
-.edituser dt {
-	clear: left;
-	float: left;
-	width: 150px;
-}
-.edituser dd {
-	float: left;
-	margin-bottom: 5px;
-}
-.edituser form div:last-child {
-	padding: 1em 0 0;
-}
-
-
-/* Admin widgets
-------------------*/
-.widget {
-	background: #fff;
-	padding: 25px;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-.widget h3 {
-	margin: 0 0 1em;
-	font: 400 18px "Raleway", sans-serif;
-}
-.widget p, .errormsg p {
-	margin: 0;
-}
-.widget ul {
-	margin: 0;
-	list-style: none;
-	padding: 0;
-}
-.widget li {
-	line-height: 1.7em;
-}
-
-
 /* Edit icon on tiled grids
 -----------------------------*/
 .tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama {
@@ -157,7 +34,7 @@ body {
 	color: #fff;
 }
 #crop_editor input[type=number] {
-	width: 50px;
+	width: 75px;
 	background: #555;
 	color: #fff;
 }
@@ -195,119 +72,3 @@ body {
 	top: 400px;
 	left: 300px;
 }
-
-
-/* The pagination styles below are based on Bootstrap 2.3.2
--------------------------------------------------------------*/
-
-.table_pagination, .table_form {
-	margin: 20px 0;
-}
-
-.table_pagination ul {
-	display: inline-block;
-	margin: 0;
-	padding: 0;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.table_pagination ul > li {
-	display: inline;
-}
-
-.table_pagination ul > li > a,
-.table_pagination ul > li > span {
-	float: left;
-	padding: 4px 12px;
-	line-height: 20px;
-	text-decoration: none;
-	background-color: #ffffff;
-	border: 1px solid #dddddd;
-	border-left-width: 0;
-}
-
-.table_pagination ul > li > a:hover,
-.table_pagination ul > li > a:focus,
-.table_pagination ul > .active > a,
-.table_pagination ul > .active > span {
-	background-color: #f5f5f5;
-}
-
-.table_pagination ul > .active > a,
-.table_pagination ul > .active > span {
-	color: #999999;
-	cursor: default;
-}
-
-.table_pagination ul > .disabled > span,
-.table_pagination ul > .disabled > a,
-.table_pagination ul > .disabled > a:hover,
-.table_pagination ul > .disabled > a:focus {
-	color: #999999;
-	cursor: default;
-	background-color: transparent;
-}
-
-.table_pagination ul > li:first-child > a,
-.table_pagination ul > li:first-child > span {
-	border-left-width: 1px;
-}
-
-
-/* The table styles below were taken from Bootstrap 2.3.2
------------------------------------------------------------*/
-table {
-	max-width: 100%;
-	background-color: transparent;
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-.table {
-	width: 100%;
-	margin-bottom: 20px;
-}
-
-.table th,
-.table td {
-	border-top: 1px solid #dddddd;
-	line-height: 20px;
-	padding: 8px;
-	text-align: left;
-	vertical-align: top;
-}
-
-.table th {
-	font-weight: bold;
-}
-
-.table thead th {
-	vertical-align: bottom;
-}
-
-.table caption + thead tr:first-child th,
-.table caption + thead tr:first-child td,
-.table colgroup + thead tr:first-child th,
-.table colgroup + thead tr:first-child td,
-.table thead:first-child tr:first-child th,
-.table thead:first-child tr:first-child td {
-	border-top: 0;
-}
-
-.table tbody + tbody {
-	border-top: 2px solid #dddddd;
-}
-
-.table .table {
-	background-color: #ffffff;
-}
-
-.table-striped tbody > tr:nth-child(odd) > td,
-.table-striped tbody > tr:nth-child(odd) > th {
-	background-color: #f9f9f9;
-}
-
-.table-hover tbody tr:hover > td,
-.table-hover tbody tr:hover > th {
-	background-color: #f5f5f5;
-}

public/css/default.css

@@ -4,35 +4,28 @@
  * DO NOT COPY OR RE-USE WITHOUT EXPLICIT WRITTEN PERMISSION. THANK YOU.
  */
 
-@import url(//fonts.googleapis.com/css?family=Press+Start+2P);
 @import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
+@import url('//fonts.googleapis.com/css2?family=Coda&display=swap');
 
 @font-face {
-		font-family: 'Invaders';
+	font-family: 'Invaders';
-		src: url('fonts/invaders.ttf') format('truetype');
+	src: url('fonts/invaders.ttf') format('truetype');
-		font-weight: normal;
+	font-weight: normal;
-		font-style: normal;
+	font-style: normal;
 }
 
 body {
-	font: 13px/1.7 "Open Sans", sans-serif;
+	font-family: "Open Sans", sans-serif;
-	padding: 0 0 3em;
-	margin: 0;
 	background: #aaa 0 -50% fixed;
-	background-image: radial-gradient(ellipse at top, #ccc 0%, #aaa 55%, #333 100%);
+	padding: 0 0 3rem;
 }
 
-#wrapper, header {
+#wrapper, header .container {
 	width: 95%;
-	min-width: 900px;
 	max-width: 1280px;
 	margin: 0 auto;
 }
 
-header {
-	overflow: auto;
-}
-
 a {
 	color: #963626;
 	text-decoration: none;
@@ -41,101 +34,120 @@ a:hover {
 	color: #262626;
 }
 
-/* Logo
+.page-link {
----------*/
+	color: #b50707;
-h1#logo {
+	font-family: 'Coda', sans-serif;
-	color: #fff;
-	float: left;
-	font: 200 50px 'Press Start 2P', sans-serif;
-	margin: 40px 0 50px 10px;
-	padding: 0;
-	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
 }
-h1#logo:before {
+.page-link:hover {
-	color: #fff;
+	color: #a40d0d;
-	content: 'B';
-	float: left;
-	font: 75px 'Invaders';
-	margin: -4px 20px 0 0;
-	padding: 0;
-	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
 }
-a h1#logo {
+.active > .page-link, .page-link.active {
-	text-decoration: none;
+	background-color: #990b0b;
+	border-color: #a40d0d;
 }
-a:hover h1#logo, a:hover h1#logo:before {
+
-	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
+.btn {
+	font-family: 'Coda', sans-serif;
+}
+.btn-primary {
+	--bs-btn-bg: #6c757d;
+	--bs-btn-border-color: #6c757d;
+	--bs-btn-hover-bg: #5c636a;
+	--bs-btn-hover-border-color: #565e64;
+	--bs-btn-focus-shadow-rgb: 130, 138, 145;
+	--bs-btn-active-bg: #565e64;
+	--bs-btn-active-border-color: #51585e;
+	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--bs-btn-disabled-bg: #6c757d;
+	--bs-btn-disabled-border-color: #6c757d;
+}
+
+.dropdown-item.active, .dropdown-item:active {
+	background-color: #990b0b;
 }
 
 
 /* Navigation
 ---------------*/
-ul#nav {
+#mainNav {
-	margin: 55px 10px 0 0;
+	font-family: 'Coda', sans-serif;
-	padding: 0;
+	margin-bottom: 4rem;
-	float: right;
-	list-style: none;
 }
-ul#nav li {
+.nav-divider {
-	float: left;
+	height: 2.5rem;
+	border-left: .1rem solid rgba(255,255,255, 0.2);
+	margin: 0 0.5rem;
 }
-ul#nav li a {
+.navbar-brand {
+	padding-left: 80px;
+	position: relative;
+}
+i.space-invader::before {
 	color: #fff;
-	display: block;
+	content: 'B';
-	float: left;
-	font: 200 20px 'Press Start 2P', sans-serif;
-	margin: 0 0 0 32px;
-	padding: 10px 0;
-	text-decoration: none;
-	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-}
-ul#nav li a:hover {
-	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
-}
-
-
-/* Pagination
----------------*/
-.pagination {
-	clear: both;
-	text-align: center;
-}
-.pagination ul {
 	display: inline-block;
-	margin: 0;
+	font: 85px 'Invaders';
-	padding: 0;
+	height: 85px;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	left: -25px;
+	position: absolute;
+	text-align: center;
+	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+	top: -5px;
+	transform: rotate(-5deg);
+	transition: 0.25s;
+	width: 110px;
 }
-.pagination ul > li {
+.navbar-brand:hover i.space-invader::before {
-	display: inline;
+	transform: rotate(5deg);
 }
-.pagination ul > li > a, .pagination ul > li > span {
+i.space-invader.alt-1::before {
-	float: left;
+	content: 'C';
-	font: 300 18px/2.2 "Open Sans", sans-serif;
+}
-	padding: 6px 22px;
+i.space-invader.alt-2::before {
-	text-decoration: none;
+	content: 'D';
+}
+i.space-invader.alt-3::before {
+	content: 'E';
+}
+i.space-invader.alt-4::before {
+	content: 'H';
+}
+i.space-invader.alt-5::before {
+	content: 'I';
+}
+i.space-invader.alt-6::before {
+	content: 'N';
+}
+i.space-invader.alt-7::before {
+	content: 'O';
+}
+@media (max-width: 991px) {
+	.navbar-brand {
+		padding-left: 60px;
+	}
+	i.space-invader::before {
+		font-size: 50px;
+		left: -10px;
+		top: -7px;
+		width: 70px;
+	}
+}
+
+
+/* Content boxes
+------------------*/
+.content-box {
 	background-color: #fff;
-	border-right: 1px solid #ddd;
+	margin: 0 auto 2rem;
+	padding: 2rem;
+	border-radius: 0.5rem;
+	box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
 }
-
+.content-box h1,
-.pagination ul > li > a:hover, .pagination ul > li > a:focus,
+.content-box h2,
-.pagination ul > .active > a, .pagination ul > .active > span {
+.content-box h3 {
-	background-color: #eee;
+	font-family: 'Coda', sans-serif;
-}
+	margin-bottom: 0.5em;
-
-.pagination ul > .active > a, .pagination ul > .active > span {
-	cursor: default;
-}
-
-.pagination ul > .disabled > span, .pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus {
-	color: #999;
-	cursor: default;
-	background-color: transparent;
-}
-
-.pagination .page-padding {
-		cursor: pointer;
 }
 
 
@@ -144,11 +156,12 @@ ul#nav li a:hover {
 .tiled_header {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	border-radius: 0.5rem;
 	color: #000;
 	clear: both;
 	float: left;
 	margin: 0 0 1.5% 0;
-	font: 400 18px/2.2 "Open Sans", sans-serif;
+	font: 400 18px/2.2 'Coda', sans-serif;
 	padding: 6px 22px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -172,13 +185,15 @@ ul#nav li a:hover {
 	width: 31%;
 }
 .tiled_grid div img {
+	background: url('../images/nothumb.svg') center no-repeat;
 	border: none;
+	object-fit: cover;
 	width: 100%;
 }
 .tiled_grid div h4 {
 	color: #000;
 	margin: 0;
-	font: 400 18px "Open Sans", sans-serif;
+	font: 400 18px 'Coda', sans-serif;
 	padding: 15px 5px;
 	text-overflow: ellipsis;
 	text-align: center;
@@ -285,15 +300,19 @@ ul#nav li a:hover {
 .album_title_box > a {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	border-top-left-radius: 0.5rem;
+	border-bottom-left-radius: 0.5rem;
 	display: inline-block;
 	float: left;
 	font-size: 2em;
 	line-height: 1;
-	padding: 8px 10px 14px;
+	padding: 8px 10px;
 }
 .album_title_box > div {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	border-top-right-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
 	float: left;
 	font: inherit;
 	padding: 6px 22px;
@@ -302,7 +321,7 @@ ul#nav li a:hover {
 }
 .album_title_box h2 {
 	color: #262626;
-	font: 400 18px/2 "Open Sans", sans-serif !important;
+	font: 400 18px/2 'Coda', sans-serif !important;
 	margin: 0;
 }
 .album_title_box p {
@@ -314,29 +333,37 @@ ul#nav li a:hover {
 ---------------------*/
 .album_button_box {
 	float: right;
-	margin-bottom: 20px;
+	margin-bottom: 3rem;
 }
 .album_button_box > a {
-	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	display: inline-block;
-	float: left;
-	font-size: 1em;
 	padding: 8px 10px;
 	margin-left: 12px;
 }
 
 
-/* Generic boxed content
+/* (Tag) autosuggest
---------------------------*/
+----------------------*/
-.boxed_content {
+#new_tag_container {
-	background: #fff;
+	display: block;
-	padding: 25px;
+	position: relative;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
-.boxed_content h2 {
+.autosuggest {
-	font: 300 24px "Open Sans", sans-serif;
+	background: #fff;
-	margin: 0 0 0.2em;
+	border: 1px solid #ccc;
+	position: absolute;
+	left: 2px;
+	top: 37px;
+	margin: 0;
+	padding: 0;
+}
+.autosuggest li {
+	display: block !important;
+	padding: 3px 8px;
+}
+.autosuggest li:hover, .autosuggest li.selected {
+	background: #CFECF7;
+	cursor: pointer;
 }
 
 
@@ -354,6 +381,36 @@ ul#nav li a:hover {
 }
 
 
+/* Featured thumbnail selection
+---------------------------------*/
+#featuredThumbnail {
+	list-style: none;
+	margin: 2.5% 0 0;
+	padding: 0;
+	clear: both;
+	overflow: auto;
+}
+#featuredThumbnail li {
+	float: left;
+	width: 18%;
+	line-height: 0;
+	margin: 0 1% 2%;
+	min-width: 200px;
+	height: 149px;
+	position: relative;
+}
+#featuredThumbnail input {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	z-index: 100;
+}
+#featuredThumbnail img {
+	width: 100%;
+	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+}
+
+
 /* Footer
 -----------*/
 footer {
@@ -370,206 +427,36 @@ footer a {
 }
 
 
-/* Input
-----------*/
-
-input, select, .btn {
-	background: #fff;
-	border: 1px solid #dbdbdb;
-	border-radius: 4px;
-	color: #000;
-	font: 13px/1.7 "Open Sans", "Helvetica", sans-serif;
-	padding: 3px;
-}
-textarea {
-	border: 1px solid #dbdbdb;
-	border-radius: 4px;
-	font: 14px/1.4 'Inconsolata', 'DejaVu Sans Mono', monospace;
-	padding: 0.75%;
-}
-
-input[type=submit], button, .btn {
-	background-color: #eee;
-	border-color: #dbdbdb;
-	border-width: 1px;
-	border-radius: 4px;
-	color: #363636;
-	cursor: pointer;
-	display: inline-block;
-	justify-content: center;
-	padding-bottom: calc(0.4em - 1px);
-	padding-left: 0.8em;
-	padding-right: 0.8em;
-	padding-top: calc(0.4em - 1px);
-	text-align: center;
-	white-space: nowrap;
-}
-input:hover, select:hover, button:hover, .btn:hover {
-	border-color: #b5b5b5;
-}
-input:focus, select:focus, button:focus, .btn:focus {
-	border-color: #3273dc;
-}
-input:focus:not(:active), select:focus:not(:active), button:focus:not(:active), .btn:focus:not(:active) {
-	box-shadow: 0px 0px 0px 2px rgba(50, 115, 220, 0.25);
-}
-input:active, select:active, button:active, .btn:active {
-	border-color: #4a4a4a;
-}
-
-.btn-red {
-	background: #eebbaa;
-	border-color: #cc9988;
-}
-.btn-red:hover, .btn-red:focus {
-	border-color: #bb7766;
-	color: #000;
-}
-.btn-red:focus:not(:active) {
-	box-shadow: 0px 0px 0px 2px rgba(241, 70, 104, 0.25);
-}
-
-
-/* Login box styles
----------------------*/
-#login {
-	background: #fff;
-	border: 1px solid #aaa;
-	border-radius: 10px;
-	box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-	margin: 0 auto;
-	overflow: auto;
-	padding: 15px;
-	width: 300px;
-}
-#login dl *, #login button {
-	font-size: 15px;
-	line-height: 35px;
-}
-#login h3 {
-	font: 700 24px/36px "Open Sans", sans-serif;
-	margin: 0;
-}
-#login dd {
-	width: 96%;
-	margin: 0 0 10px;
-}
-#login input {
-	background: #eee;
-	border: 1px solid #aaa;
-	border-radius: 3px;
-	padding: 4px 5px;
-	width: 100%;
-}
-#login div.alert {
-	line-height: normal;
-	margin: 15px 0;
-}
-#login div.buttonstrip {
-	float: right;
-	padding: 0 0 5px;
-}
-#login button {
-	line-height: 20px;
-}
-
-
-/* Alert boxes -- styling borrowed from Bootstrap 2
------------------------------------------------------*/
-.alert {
-	padding: 8px 35px 8px 14px;
-	margin-bottom: 20px;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-	background-color: #fcf8e3;
-	border: 1px solid #fbeed5;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
-}
-.alert,
-.alert h4 {
-	color: #c09853;
-}
-.alert h4 {
-	margin: 0;
-}
-.alert .close {
-	position: relative;
-	top: -2px;
-	right: -21px;
-	line-height: 20px;
-}
-.alert-success {
-	background-color: #dff0d8;
-	border-color: #d6e9c6;
-	color: #468847;
-}
-.alert-success h4 {
-	color: #468847;
-}
-.alert-danger,
-.alert-error {
-	background-color: #f2dede;
-	border-color: #eed3d7;
-	color: #b94a48;
-}
-.alert-danger h4,
-.alert-error h4 {
-	color: #b94a48;
-}
-.alert-info {
-	background-color: #d9edf7;
-	border-color: #bce8f1;
-	color: #3a87ad;
-}
-.alert-info h4 {
-	color: #3a87ad;
-}
-.alert-block {
-	padding-top: 14px;
-	padding-bottom: 14px;
-}
-.alert-block > p,
-.alert-block > ul {
-	margin-bottom: 0;
-}
-.alert-block p + p {
-	margin-top: 5px;
-}
-
-
 /* Styling for the photo pages
 --------------------------------*/
 #photo_frame {
+	padding-top: 1.5vh;
 	text-align: center;
 }
 #photo_frame a {
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+
-	cursor: -moz-zoom-in;
-	display: inline-block;
 }
 #photo_frame a img {
 	border: none;
-	display: block;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	height: auto;
+	cursor: -moz-zoom-in;
-	width: 100%;
+	display: inline-block;
+	height: 97vh;
+	max-width: 100%;
+	object-fit: contain;
+	width: auto;
 }
 
 #previous_photo, #next_photo {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 	color: #262626;
-	font-size: 3em;
+	font-size: 3rem;
 	line-height: 0.5;
-	padding: 32px 8px;
+	padding: 2rem 0.5rem;
 	position: fixed;
 	text-decoration: none;
-	top: 45%;
+	top: calc(50% - 5rem);
-}
-#previous_photo em, #next_photo em {
-	position: absolute;
-	top: -1000em;
-	left: -1000em;
 }
 span#previous_photo, span#next_photo {
 	opacity: 0.25;
@@ -579,33 +466,18 @@ a#previous_photo:hover, a#next_photo:hover {
 	color: #000;
 }
 #previous_photo {
+	border-top-right-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
 	left: 0;
 }
-#previous_photo:before {
-	content: '←';
-}
 #next_photo {
+	border-top-left-radius: 0.5rem;
+	border-bottom-left-radius: 0.5rem;
 	right: 0;
 }
-#next_photo:before {
-	content: '→';
-}
 
 #sub_photo h2, #sub_photo h3, #photo_exif_box h3, #user_actions_box h3 {
-	font: 600 20px/30px "Open Sans", sans-serif;
+	margin-bottom: 1rem;
-	margin: 0 0 10px;
-}
-#sub_photo h3 {
-	font-size: 16px;
-}
-
-#sub_photo {
-	background: #fff;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	float: left;
-	padding: 2%;
-	margin: 25px 3.5% 25px 0;
-	width: 68.5%;
 }
 #sub_photo #tag_list {
 	list-style: none;
@@ -624,15 +496,6 @@ a#previous_photo:hover, a#next_photo:hover {
 }
 
 
-#photo_exif_box {
-	background: #fff;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	margin: 25px 0 25px 0;
-	overflow: auto;
-	padding: 2%;
-	float: right;
-	width: 20%;
-}
 #photo_exif_box dt {
 	font-weight: bold;
 	float: left;
@@ -647,15 +510,6 @@ a#previous_photo:hover, a#next_photo:hover {
 	margin: 0;
 }
 
-#user_actions_box {
-	background: #fff;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	float: left;
-	margin: 25px 0 25px 0;
-	overflow: auto;
-	padding: 2%;
-	width: 20%;
-}
 
 /* Responsive: smartphone in portrait
 ---------------------------------------*/
@@ -666,38 +520,6 @@ a#previous_photo:hover, a#next_photo:hover {
 		max-width: 100% !important;
 	}
 
-	h1#logo {
-		font-size: 42px;
-		float: none;
-		margin: 1em 0 0.5em;
-		text-align: center;
-	}
-	h1#logo:before {
-		float: none;
-		font-size: 58px;
-		margin-right: 8px;
-	}
-
-	ul#nav {
-		float: none;
-		padding: 0;
-		margin: 1em 0;
-		text-align: center;
-		overflow: hidden;
-	}
-
-	ul#nav li, ul#nav li a {
-		display: inline-block;
-		float: none;
-	}
-
-	ul#nav li a {
-		float: none;
-		font-size: 16px;
-		margin-left: 6px;
-		padding: 12px 4px;
-	}
-
 	.album_title_box {
 		margin-left: 0;
 	}

public/images/nothumb.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 150">
+<defs><style>.cls-2{fill:#cc9d9d;}</style></defs>
+<g>
+	<path class="cls-2" d="m221.34,135.39c-13.69,0-27.38-.09-41.07.06-3.43.04-4.94-.61-4.91-4.56.17-27.21.14-54.42.02-81.63-.02-3.41.9-4.57,4.45-4.56,27.69.13,55.38.12,83.07,0,3.36-.01,4.19,1.18,4.18,4.34-.1,27.37-.12,54.73.02,82.1.02,3.73-1.44,4.34-4.69,4.3-13.69-.14-27.38-.06-41.07-.06Zm-.11-27.1c11.37,0,22.74-.1,34.1.06,3.26.05,4.3-.97,4.28-4.25-.14-16.19-.14-32.38,0-48.56.03-3.28-1.01-4.27-4.27-4.25-22.74.12-45.47.12-68.21,0-3.26-.02-4.3.97-4.27,4.25.14,16.19.14,32.38,0,48.56-.03,3.28,1.01,4.3,4.27,4.26,11.37-.16,22.74-.06,34.1-.06Z"/>
+	<path class="cls-2" d="m271.69,111.12c.4-3.72-.27-8.33-.9-12.95-.4-2.96.59-3.73,3.62-3.01,6.71,1.61,6.75,1.45,8.74-5.81,3.66-13.3,7.37-26.59,10.95-39.91,1.64-6.09,1.55-6.23-4.53-7.87-20.8-5.63-41.65-11.12-62.43-16.82-3.48-.95-5.32-.26-6.11,3.33-.73,3.33-1.85,6.57-2.55,9.9-.71,3.39-3,4.22-5.87,3.73-3.34-.57-2.27-2.94-1.71-5.06,1.7-6.44,3.31-12.91,5.03-19.34.47-1.74.7-3.35,3.66-2.54,27.36,7.52,54.77,14.85,82.2,22.1,2.71.72,3.31,1.43,2.52,4.29-7.26,26.45-14.3,52.97-21.49,79.44-.5,1.84-.24,5.23-3.51,4.25-3.05-.92-8.22.3-7.68-5.77.21-2.32.03-4.67.03-7.96Z"/>
+	<path class="cls-2" d="m237.89,68.65c3.58,9.04,7.13,18.07,10.74,27.08.87,2.17.4,3.25-2.07,3.25-16.63-.01-33.25,0-49.88-.01-2.63,0-2.8-1.35-1.8-3.33.7-1.39,1.37-2.79,2.07-4.17,2.84-5.69,2.92-5.78,8.04-1.6,1.77,1.44,2.44,1.1,3.45-.67,1.69-2.95,3.7-5.72,5.45-8.64,1.39-2.31,2.67-2.5,4.73-.62,2.11,1.93,3.79,5.97,6.49,5.2,2.2-.63,3.51-4.41,5.19-6.81,2.13-3.04,4.23-6.1,6.37-9.13.15-.21.54-.25,1.23-.54Z"/>
+	<path class="cls-2" d="m201.38,75.62c-3.33.17-5.32-1.1-5.41-4.73-.09-3.64,1.37-6.17,5.12-6.38,3.38-.19,5.57,1.83,6,5.22.4,3.09-2.39,5.81-5.72,5.89Z"/>
+</g>
+</svg>

public/js/autosuggest.js

@@ -124,7 +124,7 @@ class AutoSuggest {
             node.innerHTML = this.highlightMatches(query_tokens, item.label);
             node.jsondata = item;
             node.addEventListener('click', event => {
-                this.appendCallback(event.target.jsondata);
+                this.appendCallback(node.jsondata);
                 this.closeContainer();
                 this.clearInput();
             });

public/js/crop_editor.js

@@ -3,7 +3,7 @@ class CropEditor {
 		this.opt = opt;
 
 		this.edit_crop_button = document.createElement("span");
-		this.edit_crop_button.className = "btn";
+		this.edit_crop_button.className = "btn btn-light";
 		this.edit_crop_button.textContent = "Edit crop";
 		this.edit_crop_button.addEventListener('click', this.show.bind(this));
 
@@ -34,6 +34,7 @@ class CropEditor {
 		this.position.appendChild(source_x_label);
 
 		this.source_x = document.createElement("input");
+		this.source_x.className = 'form-control d-inline';
 		this.source_x.type = 'number';
 		this.source_x.addEventListener("change", this.positionBoundary.bind(this));
 		this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
@@ -43,6 +44,7 @@ class CropEditor {
 		this.position.appendChild(source_y_label);
 
 		this.source_y = document.createElement("input");
+		this.source_y.className = 'form-control d-inline';
 		this.source_y.type = 'number';
 		this.source_y.addEventListener("change", this.positionBoundary.bind(this));
 		this.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
@@ -52,6 +54,7 @@ class CropEditor {
 		this.position.appendChild(crop_width_label);
 
 		this.crop_width = document.createElement("input");
+		this.crop_width.className = 'form-control d-inline';
 		this.crop_width.type = 'number';
 		this.crop_width.addEventListener("change", this.positionBoundary.bind(this));
 		this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
@@ -61,6 +64,7 @@ class CropEditor {
 		this.position.appendChild(crop_height_label);
 
 		this.crop_height = document.createElement("input");
+		this.crop_height.className = 'form-control d-inline';
 		this.crop_height.type = 'number';
 		this.crop_height.addEventListener("change", this.positionBoundary.bind(this));
 		this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
@@ -78,13 +82,13 @@ class CropEditor {
 		this.crop_constrain_label.appendChild(this.crop_constrain_text);
 
 		this.save_button = document.createElement("span");
-		this.save_button.className = "btn";
+		this.save_button.className = "btn btn-light";
 		this.save_button.textContent = "Save";
 		this.save_button.addEventListener('click', this.save.bind(this));
 		this.position.appendChild(this.save_button);
 
 		this.abort_button = document.createElement("span");
-		this.abort_button.className = "btn btn-red";
+		this.abort_button.className = "btn btn-danger";
 		this.abort_button.textContent = "Abort";
 		this.abort_button.addEventListener('click', this.hide.bind(this));
 		this.position.appendChild(this.abort_button);

public/js/photonav.js

@@ -4,14 +4,14 @@ function enableKeyDownNavigation() {
 			var target = document.getElementById("previous_photo").href;
 			if (target) {
 				event.preventDefault();
-				document.location.href = target + '#photo_frame';
+				document.location.href = target;
 			}
 		}
 		else if (event.keyCode == 39) {
 			var target = document.getElementById("next_photo").href;
 			if (target) {
 				event.preventDefault();
-				document.location.href = target + '#photo_frame';
+				document.location.href = target;
 			}
 		}
 	}, false);

public/js/upload_queue.js

@@ -1,207 +1,211 @@
-function UploadQueue(options) {
+class UploadQueue {
-	this.queue = options.queue_element;
+	constructor(options) {
-	this.preview_area = options.preview_area;
+		this.queue = options.queue_element;
-	this.upload_progress = [];
+		this.preview_area = options.preview_area;
-	this.upload_url = options.upload_url;
+		this.upload_progress = [];
-	this.submit = options.submit_button;
+		this.upload_url = options.upload_url;
-	this.addEvents();
+		this.submit = options.submit_button;
-}
+		this.addEvents();
+	}
 
-UploadQueue.prototype.addEvents = function() {
+	addEvents() {
-	var that = this;
+		this.queue.addEventListener('change', event => {
-	that.queue.addEventListener('change', function() {
+			this.showSpinner(this.queue, "Generating previews (not uploading yet!)");
-		that.showSpinner(that.queue, "Generating previews (not uploading yet!)");
+			this.clearPreviews();
-		that.clearPreviews();
+			for (let i = 0; i < this.queue.files.length; i++) {
-		for (var i = 0; i < that.queue.files.length; i++) {
+				const callback = (i !== this.queue.files.length - 1) ? null : () => {
-			var callback = (i !== that.queue.files.length - 1) ? null : function() {
+					this.hideSpinner();
-				that.hideSpinner();
+					this.submit.disabled = false;
-				that.submit.disabled = false;
+				};
+
+				if (this.queue.files[0].name.toUpperCase().endsWith(".HEIC")) {
+					alert('Sorry, the HEIC image format is not supported.\nPlease convert your photos to JPEG before uploading.');
+					this.hideSpinner();
+					this.submit.disabled = false;
+					break;
+				}
+
+				this.addPreviewBoxForQueueSlot(i);
+				this.addPreviewForFile(this.queue.files[i], i, callback);
 			};
-			that.addPreviewBoxForQueueSlot(i);
-			that.addPreviewForFile(that.queue.files[i], i, callback);
-		};
-	});
-	that.submit.addEventListener('click', function(e) {
-		e.preventDefault();
-		that.process();
-	});
-	this.submit.disabled = true;
-};
-
-UploadQueue.prototype.clearPreviews = function() {
-	this.preview_area.innerHTML = '';
-	this.submit.disabled = true;
-	this.current_upload_index = -1;
-}
-
-UploadQueue.prototype.addPreviewBoxForQueueSlot = function(index) {
-	var preview_box = document.createElement('div');
-	preview_box.id = 'upload_preview_' + index;
-	this.preview_area.appendChild(preview_box);
-};
-
-UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
-	if (!file) {
-		return false;
-	}
-
-	var preview = document.createElement('canvas');
-	preview.title = file.name;
-
-	var preview_box = document.getElementById('upload_preview_' + index);
-	preview_box.appendChild(preview);
-
-	var reader = new FileReader();
-	var that = this;
-	reader.addEventListener('load', function() {
-		var original = document.createElement('img');
-		original.src = reader.result;
-
-		original.addEventListener('load', function() {
-			// Preparation: make canvas size proportional to the original image.
-			preview.height = 150;
-			preview.width = preview.height * (original.width / original.height);
-
-			// First pass: resize to 50% on temp canvas.
-			var temp = document.createElement('canvas'),
-				tempCtx = temp.getContext('2d');
-
-			temp.width = original.width * 0.5;
-			temp.height = original.height * 0.5;
-			tempCtx.drawImage(original, 0, 0, temp.width, temp.height);
-
-			// Second pass: resize again on temp canvas.
-			tempCtx.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5);
-
-			// Final pass: resize to desired size on preview canvas.
-			var context = preview.getContext('2d');
-			context.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5,
-				0, 0, preview.width, preview.height);
-
-			if (callback) {
-				callback();
-			}
 		});
-	}, false);
+		this.submit.addEventListener('click', event => {
-	reader.readAsDataURL(file);
+			event.preventDefault();
-};
+			this.process();
-
+		});
-UploadQueue.prototype.process = function() {
-	this.showSpinner(this.submit, "Preparing to upload files...");
-	if (this.queue.files.length > 0) {
 		this.submit.disabled = true;
-		this.nextFile();
 	}
-};
 
-UploadQueue.prototype.nextFile = function() {
+	clearPreviews() {
-	var files = this.queue.files;
+		this.preview_area.innerHTML = '';
-	var i = ++this.current_upload_index;
+		this.submit.disabled = true;
-	if (i === files.length) {
+		this.current_upload_index = -1;
-		this.hideSpinner();
+	}
-	} else {
+
-		this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length);
+	addPreviewBoxForQueueSlot(index) {
-		this.sendFile(files[i], i, function() {
+		const preview_box = document.createElement('div');
+		preview_box.id = 'upload_preview_' + index;
+		this.preview_area.appendChild(preview_box);
+	}
+
+	addPreviewForFile(file, index, callback) {
+		if (!file) {
+			return false;
+		}
+
+		const preview = document.createElement('canvas');
+		preview.title = file.name;
+
+		const preview_box = document.getElementById('upload_preview_' + index);
+		preview_box.appendChild(preview);
+
+		const reader = new FileReader();
+		reader.addEventListener('load', event => {
+			const original = document.createElement('img');
+			original.src = reader.result;
+
+			original.addEventListener('load', function() {
+				// Preparation: make canvas size proportional to the original image.
+				preview.height = 150;
+				preview.width = preview.height * (original.width / original.height);
+
+				// First pass: resize to 50% on temp canvas.
+				const temp = document.createElement('canvas'),
+					tempCtx = temp.getContext('2d');
+
+				temp.width = original.width * 0.5;
+				temp.height = original.height * 0.5;
+				tempCtx.drawImage(original, 0, 0, temp.width, temp.height);
+
+				// Second pass: resize again on temp canvas.
+				tempCtx.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5);
+
+				// Final pass: resize to desired size on preview canvas.
+				const context = preview.getContext('2d');
+				context.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5,
+					0, 0, preview.width, preview.height);
+
+				if (callback) {
+					callback();
+				}
+			});
+		}, false);
+		reader.readAsDataURL(file);
+	}
+
+	process() {
+		this.showSpinner(this.submit, "Preparing to upload files...");
+		if (this.queue.files.length > 0) {
+			this.submit.disabled = true;
 			this.nextFile();
+		}
+	}
+
+	nextFile() {
+		const files = this.queue.files;
+		const i = ++this.current_upload_index;
+		if (i === files.length) {
+			this.hideSpinner();
+		} else {
+			this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length);
+			this.sendFile(files[i], i, this.nextFile);
+		}
+	}
+
+	sendFile(file, index, callback) {
+		const request = new XMLHttpRequest();
+		request.addEventListener('error', event => {
+			this.updateProgress(index, -1);
 		});
-	}
+		request.addEventListener('progress', event => {
-};
+			this.updateProgress(index, event.loaded / event.total);
-
+		});
-UploadQueue.prototype.sendFile = function(file, index, callback) {
+		request.addEventListener('load', event => {
-	// Prepare the request.
+			this.updateProgress(index, 1);
-	var that = this;
+			if (request.responseText !== null && request.status === 200) {
-	var request = new XMLHttpRequest();
+				const obj = JSON.parse(request.responseText);
-	request.addEventListener('error', function(event) {
+				if (obj.error) {
-		that.updateProgress(index, -1);
+					alert(obj.error);
-	});
+					return;
-	request.addEventListener('progress', function(event) {
+				}
-		that.updateProgress(index, event.loaded / event.total);
+				else if (callback) {
-	});
+					callback.call(this, obj);
-	request.addEventListener('load', function(event) {
+				}
-		that.updateProgress(index, 1);
-		if (request.responseText !== null && request.status === 200) {
-			var obj = JSON.parse(request.responseText);
-			if (obj.error) {
-				alert(obj.error);
-				return;
 			}
-			else if (callback) {
+		});
-				callback.call(that, obj);
+
+		const data = new FormData();
+		data.append('uploads', file, file.name);
+
+		request.open('POST', this.upload_url, true);
+		request.send(data);
+	}
+
+	addProgressBar(index) {
+		if (index in this.upload_progress) {
+			return;
+		}
+
+		const progress_container = document.createElement('div');
+		progress_container.className = 'progress';
+
+		const progress = document.createElement('div');
+		progress_container.appendChild(progress);
+
+		const preview_box = document.getElementById('upload_preview_' + index);
+		preview_box.appendChild(progress_container);
+
+		this.upload_progress[index]	= progress;
+	}
+
+	updateProgress(index, progress) {
+		if (!(index in this.upload_progress)) {
+			this.addProgressBar(index);
+		}
+
+		const bar = this.upload_progress[index];
+
+		if (progress >= 0) {
+			bar.style.width = Math.ceil(progress * 100) + '%';
+		} else {
+			bar.style.width = "";
+			if (progress === -1) {
+				bar.className = "error";
 			}
 		}
-	});
-
-	var data = new FormData();
-	data.append('uploads', file, file.name);
-
-	request.open('POST', this.upload_url, true);
-	request.send(data);
-};
-
-UploadQueue.prototype.addProgressBar = function(index) {
-	if (index in this.upload_progress) {
-		return;
 	}
 
-	var progress_container = document.createElement('div');
+	showSpinner(sibling, label) {
-	progress_container.className = 'progress';
+		if (this.spinner) {
+			return;
+		}
 
-	var progress = document.createElement('div');
+		this.spinner = document.createElement('div');
-	progress_container.appendChild(progress);
+		this.spinner.className = 'spinner';
+		sibling.parentNode.appendChild(this.spinner);
 
-	var preview_box = document.getElementById('upload_preview_' + index);
+		if (label) {
-	preview_box.appendChild(progress_container);
+			this.spinner_label = document.createElement('span');
-
+			this.spinner_label.className = 'spinner_label';
-	this.upload_progress[index]	= progress;
+			this.spinner_label.innerHTML = label;
-};
+			sibling.parentNode.appendChild(this.spinner_label);
-
-UploadQueue.prototype.updateProgress = function(index, progress) {
-	if (!(index in this.upload_progress)) {
-		this.addProgressBar(index);
-	}
-
-	var bar = this.upload_progress[index];
-
-	if (progress >= 0) {
-		bar.style.width = Math.ceil(progress * 100) + '%';
-	} else {
-		bar.style.width = "";
-		if (progress === -1) {
-			bar.className = "error";
 		}
 	}
-};
 
-UploadQueue.prototype.showSpinner = function(sibling, label) {
+	setSpinnerLabel(label) {
-	if (this.spinner) {
+		if (this.spinner_label) {
-		return;
+			this.spinner_label.innerHTML = label;
+		}
 	}
 
-	this.spinner = document.createElement('div');
+	hideSpinner() {
-	this.spinner.className = 'spinner';
+		if (this.spinner) {
-	sibling.parentNode.appendChild(this.spinner);
+			this.spinner.parentNode.removeChild(this.spinner);
-
+			this.spinner = null;
-	if (label) {
+		}
-		this.spinner_label = document.createElement('span');
+		if (this.spinner_label) {
-		this.spinner_label.className = 'spinner_label';
+			this.spinner_label.parentNode.removeChild(this.spinner_label);
-		this.spinner_label.innerHTML = label;
+			this.spinner_label = null;
-		sibling.parentNode.appendChild(this.spinner_label);
+		}
-	}
-};
-
-UploadQueue.prototype.setSpinnerLabel = function(label) {
-	if (this.spinner_label) {
-		this.spinner_label.innerHTML = label;
 	}
 }
-
-UploadQueue.prototype.hideSpinner = function() {
-	if (this.spinner) {
-		this.spinner.parentNode.removeChild(this.spinner);
-		this.spinner = null;
-	}
-	if (this.spinner_label) {
-		this.spinner_label.parentNode.removeChild(this.spinner_label);
-		this.spinner_label = null;
-	}
-};

public/vendor

@@ -0,0 +1 @@
+../vendor/

templates/AdminBar.php

@@ -1,38 +0,0 @@
-<?php
-/*****************************************************************************
- * AdminBar.php
- * Defines the AdminBar class.
- *
- * Kabuki CMS (C) 2013-2015, Aaron van Geffen
- *****************************************************************************/
-
-class AdminBar extends SubTemplate
-{
-	private $extra_items = [];
-
-	protected function html_content()
-	{
-		echo '
-			<div id="admin_bar">
-				<ul>
-					<li><a href="', BASEURL, '/managealbums/">Albums</a></li>
-					<li><a href="', BASEURL, '/manageassets/">Assets</a></li>
-					<li><a href="', BASEURL, '/managetags/">Tags</a></li>
-					<li><a href="', BASEURL, '/manageusers/">Users</a></li>
-					<li><a href="', BASEURL, '/manageerrors/">Errors [', ErrorLog::getCount(), ']</a></li>';
-
-		foreach ($this->extra_items as $item)
-			echo '
-					<li><a href="', $item[0], '">', $item[1], '</a></li>';
-
-		echo '
-					<li><a href="', BASEURL, '/logout/">Log out [', Registry::get('user')->getFullName(), ']</a></li>
-				</ul>
-			</div>';
-	}
-
-	public function appendItem($url, $caption)
-	{
-		$this->extra_items[] = [$url, $caption];
-	}
-}

templates/AlbumButtonBox.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2016, Aaron van Geffen
  *****************************************************************************/
 
-class AlbumButtonBox extends SubTemplate
+class AlbumButtonBox extends Template
 {
 	private $buttons;
 
@@ -15,14 +15,14 @@ class AlbumButtonBox extends SubTemplate
 		$this->buttons = $buttons;
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		echo '
 			<div class="album_button_box">';
 
 		foreach ($this->buttons as $button)
 			echo '
-				<a href="', $button['url'], '">', $button['caption'], '</a>';
+				<a class="btn btn-light" href="', $button['url'], '">', $button['caption'], '</a>';
 
 		echo '
 			</div>';

templates/AlbumHeaderBox.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2016, Aaron van Geffen
  *****************************************************************************/
 
-class AlbumHeaderBox extends SubTemplate
+class AlbumHeaderBox extends Template
 {
 	private $back_link_title;
 	private $back_link;
@@ -21,11 +21,13 @@ class AlbumHeaderBox extends SubTemplate
 		$this->back_link_title = $back_link_title;
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		echo '
 			<div class="album_title_box">
-				<a class="back_button" href="', $this->back_link, '" title="', $this->back_link_title, '">&larr;</a>
+				<a class="back_button" href="', $this->back_link, '" title="', $this->back_link_title, '">
+					<i class="bi bi-arrow-left"></i>
+				</a>
 				<div>
 					<h2>', $this->title, '</h2>';
 

templates/AlbumIndex.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2015, Aaron van Geffen
  *****************************************************************************/
 
-class AlbumIndex extends SubTemplate
+class AlbumIndex extends Template
 {
 	protected $albums;
 	protected $show_edit_buttons;
@@ -23,10 +23,10 @@ class AlbumIndex extends SubTemplate
 		$this->show_labels = $show_labels;
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		echo '
-			<div class="tiled_grid">';
+			<div class="tiled_grid clearfix">';
 
 		foreach (array_chunk($this->albums, 3) as $photos)
 		{
@@ -55,11 +55,13 @@ class AlbumIndex extends SubTemplate
 					echo '
 								<img src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
 									' srcset="' . $thumbs[2] . ' 2x"' : '') .
-									' alt="">';
+									' alt="" style="width: ', static::TILE_WIDTH,
+										'px; height: ', static::TILE_HEIGHT, 'px">';
 				}
 				else
 					echo '
-								<img src="', BASEURL, '/images/nothumb.png" alt="">';
+								<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 '

templates/Alert.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2015, Aaron van Geffen
  *****************************************************************************/
 
-class Alert extends SubTemplate
+class Alert extends Template
 {
 	private $_type;
 	private $_message;
@@ -16,20 +16,20 @@ class Alert extends SubTemplate
 	{
 		$this->_title = $title;
 		$this->_message = $message;
-		$this->_type = in_array($type, ['alert', 'error', 'success', 'info']) ? $type : 'alert';
+		$this->_type = in_array($type, ['success', 'info', 'warning', 'danger']) ? $type : 'info';
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		echo '
-					<div class="alert', $this->_type != 'alert' ? ' alert-' . $this->_type : '', '">', (!empty($this->_title) ? '
+					<div class="alert', $this->_type !== 'alert' ? ' alert-' . $this->_type : '', '">'
-						<strong>' . $this->_title . '</strong><br>' : ''), '<p>', $this->_message, '</p>';
+						, !empty($this->_title) ? '<strong>' . $this->_title . '</strong><br>' : '', '
-
+						', $this->_message,
-		$this->additional_alert_content();
+						$this->additional_alert_content(), '
-
+					</div>';
-		echo '</div>';
 	}
 
 	protected function additional_alert_content()
-	{}
+	{
+	}
 }

templates/AssetManagementWrapper.php

@@ -0,0 +1,36 @@
+<?php
+/*****************************************************************************
+ * AssetManagementWrapper.php
+ * Defines asset management wrapper template.
+ *
+ * Kabuki CMS (C) 2013-2015, Aaron van Geffen
+ *****************************************************************************/
+
+class AssetManagementWrapper extends Template
+{
+	public function html_main()
+	{
+		echo '
+		<form action="" method="post">';
+
+		foreach ($this->_subtemplates as $template)
+			$template->html_main();
+
+		echo '
+		</form>
+		<script type="text/javascript" defer="defer">
+			const allAreSelected = () => {
+				return document.querySelectorAll(".asset_select").length ===
+					document.querySelectorAll(".asset_select:checked").length;
+			};
+
+			const selectAll = document.getElementById("selectall");
+			selectAll.addEventListener("change", event => {
+				const newSelectedState = !allAreSelected();
+				document.querySelectorAll(".asset_select").forEach(el => {
+					el.checked = newSelectedState;
+				});
+			});
+		</script>';
+	}
+}

templates/Button.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2015, Aaron van Geffen
  *****************************************************************************/
 
-class Button extends SubTemplate
+class Button extends Template
 {
 	private $content = '';
 	private $href = '';
@@ -19,7 +19,7 @@ class Button extends SubTemplate
 		$this->class = $class;
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		echo '
 					<a class="', $this->class, '" href="', $this->href, '">', $this->content, '</a>';

templates/ConfirmDeletePage.php

@@ -13,7 +13,7 @@ class ConfirmDeletePage extends PhotoPage
 		parent::__construct($photo);
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		$this->confirm();
 		$this->photo();
@@ -22,7 +22,7 @@ class ConfirmDeletePage extends PhotoPage
 	private function confirm()
 	{
 		$buttons = [];
-		$buttons[] = new Button("Delete", BASEURL . '/' . $this->photo->getSlug() . '?delete_confirmed', "btn btn-red");
+		$buttons[] = new Button("Delete", BASEURL . '/' . $this->photo->getSlug() . '/?delete_confirmed', "btn btn-danger");
 		$buttons[] = new Button("Cancel", $this->photo->getPageUrl(), "btn");
 
 		$alert = new WarningDialog(
@@ -30,6 +30,6 @@ class ConfirmDeletePage extends PhotoPage
 			"You are about to permanently delete the following photo.",
 			$buttons
 		);
-		$alert->html_content();
+		$alert->html_main();
 	}
 }

templates/DummyBox.php

@@ -8,28 +8,26 @@
 
 class DummyBox extends SubTemplate
 {
-	private $_class;
+	protected $_content;
-	private $_content;
-	private $_title;
 
-	public function __construct($title = '', $content = '', $class = '')
+	public function __construct($title = '', $content = '', $class = null)
 	{
-		$this->_title = $title;
+		parent::__construct($title);
 		$this->_content = $content;
-		$this->_class = $class;
+
+		if (isset($class))
+			$this->_class .= $class;
 	}
 
 	protected function html_content()
 	{
-		echo '
+		if ($this->_title)
-			<div class="boxed_content', $this->_class ? ' ' . $this->_class : '', '">', $this->_title ? '
+			echo '
-				<h2>' . $this->_title . '</h2>' : '', '
+				<h2>', $this->_title, '</h2>';
-				', $this->_content;
+
+		echo $this->_content;
 
 		foreach ($this->_subtemplates as $template)
 			$template->html_main();
-
-		echo '
-			</div>';
 	}
 }

templates/EditAssetForm.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2015, Aaron van Geffen
  *****************************************************************************/
 
-class EditAssetForm extends SubTemplate
+class EditAssetForm extends Template
 {
 	private $asset;
 	private $thumbs;
@@ -17,14 +17,14 @@ class EditAssetForm extends SubTemplate
 		$this->thumbs = $thumbs;
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		echo '
 			<form id="asset_form" action="" method="post" enctype="multipart/form-data">
-				<div class="boxed_content" style="margin-bottom: 2%">
+				<div class="content-box">
-					<div style="float: right">
+					<div class="float-end">
-						<a class="btn btn-red" href="', BASEURL, '/', $this->asset->getSlug(), '?delete_confirmed">Delete asset</a>
+						<a class="btn btn-danger" href="', BASEURL, '/', $this->asset->getSlug(), '?delete_confirmed">Delete asset</a>
-						<input 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>';
@@ -32,14 +32,15 @@ class EditAssetForm extends SubTemplate
 		$this->section_replace();
 
 		echo '
-				<div style="float: left; width: 60%; margin-right: 2%">';
+				<div class="row">
+					<div class="col-md-8">';
 
 		$this->section_key_info();
 		$this->section_asset_meta();
 
 		echo '
-				</div>
+					</div>
-				<div style="float: left; width: 38%;">';
+					<div class="col-md-4">';
 
 		if (!empty($this->thumbs))
 			$this->section_thumbnails();
@@ -47,11 +48,12 @@ class EditAssetForm extends SubTemplate
 		$this->section_linked_tags();
 
 		echo '
-				</div>';
+					</div>';
 
 		$this->section_crop_editor();
 
 		echo '
+				</div>
 			</form>';
 	}
 
@@ -59,31 +61,43 @@ class EditAssetForm extends SubTemplate
 	{
 		$date_captured = $this->asset->getDateCaptured();
 		echo '
-				<div class="widget key_info">
+				<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>
+					<div class="row mb-2">
-						<dd><input type="text" name="slug" maxlength="255" size="70" value="', $this->asset->getSlug(), '">
+						<label class="col-form-label col-sm-3">Title (internal):</label>
-
+						<div class="col-sm">
-						<dt>Date captured</dt>
+							<input class="form-control" type="text" name="title" maxlength="255" size="70" value="', $this->asset->getTitle(), '">
-						<dd><input type="text" name="date_captured" size="30" value="',
+						</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">
-
+						</div>
-						<dt>Display priority</dt>
+					</div>
-						<dd><input type="number" name="priority" min="0" max="100" step="1" value="', $this->asset->getPriority(), '">
+					<div class="row mb-2">
-					</dl>
+						<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>';
 	}
 
 	protected function section_linked_tags()
 	{
 		echo '
-				<div class="widget linked_tags" style="margin-top: 2%">
+				<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 '
@@ -93,7 +107,7 @@ class EditAssetForm extends SubTemplate
 						</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>
@@ -134,9 +148,9 @@ class EditAssetForm extends SubTemplate
 	protected function section_thumbnails()
 	{
 		echo '
-				<div class="widget linked_thumbs">
+				<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)
@@ -218,38 +232,39 @@ class EditAssetForm extends SubTemplate
 	protected function section_asset_meta()
 	{
 		echo '
-				<div class="widget asset_meta" style="margin-top: 2%">
+				<div class="content-box asset_meta mt-2">
-					<h3>Asset meta data</h3>
+					<h3>Asset meta data</h3>';
-					<ul>';
 
-		$i = -1;
+		$i = 0;
 		foreach ($this->asset->getMeta() as $key => $meta)
 		{
-			$i++;
 			echo '
-						<li>
+					<div class="input-group">
-							<input type="text" name="meta_key[', $i, ']" value="', htmlentities($key), '">
+						<input type="text" class="form-control" name="meta_key[', $i, ']" value="', htmlspecialchars($key), '" placeholder="key">
-							<input type="text" name="meta_value[', $i, ']" value="', htmlentities($meta), '">
+						<input type="text" class="form-control" name="meta_value[', $i, ']" value="', htmlspecialchars($meta), '" placeholder="value">
-						</li>';
+					</div>';
+			$i++;
 		}
 
+
 		echo '
-						<li>
+					<div class="input-group">
-							<input type="text" name="meta_key[', $i + 1, ']" value="">
+						<input type="text" class="form-control" name="meta_key[', $i + 1, ']" value="" placeholder="key">
-							<input type="text" name="meta_value[', $i + 1, ']" value="">
+						<input type="text" class="form-control" name="meta_value[', $i + 1, ']" value="" placeholder="value">
-						</li>
+					</div>
-					</ul>
+					<div class="text-end mt-3">
-					<p><input type="submit" value="Save metadata"></p>
+						<button class="btn btn-primary" type="submit">Save metadata</button>
+					</div>
 				</div>';
 	}
 
 	protected function section_replace()
 	{
 		echo '
-				<div class="widget 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">
+					File: <input class="form-control d-inline w-auto" type="file" name="replacement">
-					Target: <select name="replacement_target">
+					Target: <select class="form-select d-inline w-auto" name="replacement_target">
 						<option value="full">master file</option>';
 
 		foreach ($this->thumbs as $thumb)
@@ -285,7 +300,7 @@ class EditAssetForm extends SubTemplate
 
 		echo '
 					</select>
-					<input type="submit" value="Save asset">
+					<button class="btn btn-primary" type="submit">Save asset</button>
 				</div>';
 	}
 }

templates/FeaturedThumbnailManager.php

@@ -0,0 +1,46 @@
+<?php
+/*****************************************************************************
+ * FeaturedThumbnailManager.php
+ * Contains the featured thumbnail manager template.
+ *
+ * Kabuki CMS (C) 2013-2021, Aaron van Geffen
+ *****************************************************************************/
+
+class FeaturedThumbnailManager extends SubTemplate
+{
+	private $assets;
+	private $currentThumbnailId;
+
+	public function __construct(AssetIterator $assets, $currentThumbnailId)
+	{
+		$this->assets = $assets;
+		$this->currentThumbnailId = $currentThumbnailId;
+	}
+
+	protected function html_content()
+	{
+		echo '
+		<form action="" method="post">
+			<button class="btn btn-primary float-end" type="submit" name="changeThumbnail">Save thumbnail selection</button>
+			<h2>Select thumbnail</h2>
+			<ul id="featuredThumbnail">';
+
+		while ($asset = $this->assets->next())
+		{
+			$image = $asset->getImage();
+			echo '
+				<li>
+					<input class="form-check-input" type="radio" name="featuredThumbnail" value="', $image->getId(), '"',
+					$this->currentThumbnailId == $image->getId() ? ' checked' : '', '>
+					<img src="', $image->getThumbnailUrl(150, 100, 'top'), '" alt="" title="', $image->getTitle(), '" onclick="this.parentNode.children[0].checked = true">
+				</li>';
+		}
+
+		$this->assets->clean();
+
+		echo '
+				</ul>
+				<input type="hidden" name="', Session::getSessionTokenKey(), '" value="', Session::getSessionToken(), '">
+			</form>';
+	}
+}

templates/ForgotPasswordForm.php

@@ -11,19 +11,25 @@ class ForgotPasswordForm extends SubTemplate
 	protected function html_content()
 	{
 		echo '
-						<div class="boxed_content">
+				<h1>Password reset procedure</h1>';
-							<h2>Password reset procedure</h2>';
 
 		foreach ($this->_subtemplates as $template)
 			$template->html_main();
 
 		echo '
-							<p>Please fill in the email address you used to sign up in the form below. You will be sent a reset link to your email address.</p>
+				<p class="mt-3">Please fill in the email address you used to sign up in the form below. We will send a reset link to your email address.</p>
-							<form class="form-horizontal" action="', BASEURL, '/resetpassword/?step=1" method="post">
+				<form action="', BASEURL, '/resetpassword/?step=1" method="post">
-								<label class="control-label" for="field_emailaddress">E-mail address:</label><br>
+					<div class="row">
-								<input type="text" id="field_emailaddress" name="emailaddress">
+						<label class="col-sm-2 col-form-label" for="field_emailaddress">E-mail address:</label>
-								<button type="submit" class="btn btn-primary">Send mail</button>
+						<div class="col-sm-4">
-							</form>
+							<input type="text" class="form-control" id="field_emailaddress" name="emailaddress">
-						</div>';
+						</div>
+					</div>
+					<div class="row mt-3">
+						<div class="offset-sm-2 col-sm-2">
+							<button type="submit" class="btn btn-primary">Send mail</button>
+						</div>
+					</div>
+				</form>';
 	}
 }

templates/FormView.php

@@ -3,52 +3,42 @@
  * FormView.php
  * Contains the form template.
  *
- * Kabuki CMS (C) 2013-2015, Aaron van Geffen
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
  *****************************************************************************/
 
 class FormView extends SubTemplate
 {
-	private $content_below;
+	private $form;
-	private $content_above;
+	private array $data;
-	private $data;
+	private array $missing;
-	private $missing;
-	private $fields;
-	private $request_method;
-	private $request_url;
 	private $title;
 
 	public function __construct(Form $form, $title = '')
 	{
+		$this->form = $form;
 		$this->title = $title;
-		$this->request_url = $form->request_url;
-		$this->request_method = $form->request_method;
-		$this->fields = $form->getFields();
-		$this->missing = $form->getMissing();
-		$this->data = $form->getData();
-		$this->content_above = $form->content_above;
-		$this->content_below = $form->content_below;
 	}
 
 	protected function html_content($exclude = [], $include = [])
 	{
 		if (!empty($this->title))
 			echo '
-			<div class="admin_box">
+			<h1>', $this->title, '</h1>';
-				<h2>', htmlspecialchars($this->title), '</h2>';
 
 		foreach ($this->_subtemplates as $template)
 			$template->html_main();
 
 		echo '
-			<form action="', $this->request_url, '" method="', $this->request_method, '" enctype="multipart/form-data">';
+			<form action="', $this->form->request_url, '" method="', $this->form->request_method, '" enctype="multipart/form-data">';
 
-		if (isset($this->content_above))
+		if (isset($this->form->content_above))
-			echo $this->content_above;
+			echo $this->form->content_above;
 
-		echo '
+		$this->missing = $this->form->getMissing();
-				<dl>';
+		$this->data = $this->form->getData();
 
-		foreach ($this->fields as $field_id => $field)
+		foreach ($this->form->getFields() as $field_id => $field)
 		{
 			// Either we have a blacklist
 			if (!empty($exclude) && in_array($field_id, $exclude))
@@ -62,107 +52,230 @@ class FormView extends SubTemplate
 		}
 
 		echo '
-				</dl>
 				<input type="hidden" name="', Session::getSessionTokenKey(), '" value="', Session::getSessionToken(), '">
-				<div style="clear: both">
+				<div class="form-group">
-					<button type="submit" class="btn btn-primary">Save information</button>';
+					<div class="offset-sm-2 col-sm-10">
+						<button type="submit" name="submit" class="btn btn-primary">', $this->form->getSubmitButtonCaption(), '</button>';
 
-		if (isset($this->content_below))
+		if (isset($this->form->content_below))
 			echo '
-					', $this->content_below;
+						', $this->form->content_below;
 
 		echo '
+					</div>
 				</div>
 			</form>';
-
-		if (!empty($this->title))
-			echo '
-			</div>';
 	}
 
-	protected function renderField($field_id, $field)
+	protected function renderField($field_id, array $field)
 	{
 		if (isset($field['before_html']))
-			echo '</dl>
-					', $field['before_html'], '
-				<dl>';
-
-		if ($field['type'] != 'checkbox' && isset($field['label']))
 			echo '
-					<dt class="cont_', $field_id, isset($field['tab_class']) ? ' target target-' . $field['tab_class'] : '', '"', in_array($field_id, $this->missing) ? ' style="color: red"' : '', '>', $field['label'], '</dt>';
+				', $field['before_html'];
-		elseif ($field['type'] === 'checkbox' && isset($field['header']))
-			echo '
-					<dt class="cont_', $field_id, isset($field['tab_class']) ? ' target target-' . $field['tab_class'] : '', '"', in_array($field_id, $this->missing) ? ' style="color: red"' : '', '>', $field['header'], '</dt>';
 
 		echo '
-					<dd class="cont_', $field_id, isset($field['dd_class']) ? ' ' . $field['dd_class'] : '', isset($field['tab_class']) ? ' target target-' . $field['tab_class'] : '', '">';
+				<div class="row mb-2">';
 
 		if (isset($field['before']))
 			echo $field['before'];
 
+		if ($field['type'] !== 'checkbox')
+			if (isset($field['label']))
+				echo '
+					<label class="col-sm-2 col-form-label" for="', $field_id, '"', in_array($field_id, $this->missing) ? ' style="color: red"' : '', '>', $field['label'], ':</label>
+					<div class="', isset($field['class']) ? $field['class'] : 'col-sm-6', '">';
+			else
+				echo '
+					<div class="offset-sm-2 ', isset($field['class']) ? $field['class'] : 'col-sm-6', '">';
+
 		switch ($field['type'])
 		{
 			case 'select':
-				echo '
+				$this->renderSelect($field_id, $field);
-						<select name="', $field_id, '" id="', $field_id, '"', !empty($field['disabled']) ? ' disabled' : '', '>';
-
-				if (isset($field['placeholder']))
-					echo '
-							<option value="">', $field['placeholder'], '</option>';
-
-				foreach ($field['options'] as $value => $option)
-					echo '
-							<option value="', $value, '"', $this->data[$field_id] == $value ? ' selected' : '', '>', htmlentities($option), '</option>';
-
-				echo '
-						</select>';
 				break;
 
 			case 'radio':
-				foreach ($field['options'] as $value => $option)
+				$this->renderRadio($field_id, $field);
-					echo '
-						<input type="radio" name="', $field_id, '" value="', $value, '"', $this->data[$field_id] == $value ? ' checked' : '', !empty($field['disabled']) ? ' disabled' : '', '> ', htmlentities($option);
 				break;
 
 			case 'checkbox':
-				echo '
+				$this->renderCheckbox($field_id, $field);
-						<label><input type="checkbox"', $this->data[$field_id] ? ' checked' : '', !empty($field['disabled']) ? ' disabled' : '', ' name="', $field_id, '"> ', htmlentities($field['label']), '</label>';
 				break;
 
 			case 'textarea':
-				echo '
+				$this->renderTextArea($field_id, $field);
-						<textarea name="', $field_id, '" id="', $field_id, '" cols="', isset($field['columns']) ? $field['columns'] : 40, '" rows="', isset($field['rows']) ? $field['rows'] : 4, '"', !empty($field['disabled']) ? ' disabled' : '', '>', $this->data[$field_id], '</textarea>';
 				break;
 
 			case 'color':
-				echo '
+				$this->renderColor($field_id, $field);
-						<input type="color" name="', $field_id, '" id="', $field_id, '" value="', htmlentities($this->data[$field_id]), '"', !empty($field['disabled']) ? ' disabled' : '', '>';
 				break;
 
 			case 'numeric':
-				echo '
+				$this->renderNumeric($field_id, $field);
-						<input type="number"', isset($field['step']) ? ' step="' . $field['step'] . '"' : '', ' min="', isset($field['min_value']) ? $field['min_value'] : '0', '" max="', isset($field['max_value']) ? $field['max_value'] : '9999', '" name="', $field_id, '" id="', $field_id, '"', isset($field['size']) ? ' size="' . $field['size'] . '"' : '', isset($field['maxlength']) ? ' maxlength="' . $field['maxlength'] . '"' : '', ' value="', htmlentities($this->data[$field_id]), '"', !empty($field['disabled']) ? ' disabled' : '', '>';
 				break;
 
 			case 'file':
-				if (!empty($this->data[$field_id]))
+				$this->renderFile($field_id, $field);
-					echo '<img src="', $this->data[$field_id], '" alt=""><br>';
+				break;
 
-				echo '
+			case 'captcha':
-						<input type="file" name="', $field_id, '" id="', $field_id, '"', !empty($field['disabled']) ? ' disabled' : '', '>';
+				$this->renderCaptcha($field_id, $field);
 				break;
 
 			case 'text':
 			case 'password':
 			default:
-				echo '
+				$this->renderText($field_id, $field);
-						<input type="', $field['type'], '" name="', $field_id, '" id="', $field_id, '"', isset($field['size']) ? ' size="' . $field['size'] . '"' : '', isset($field['maxlength']) ? ' maxlength="' . $field['maxlength'] . '"' : '', ' value="', htmlentities($this->data[$field_id]), '"', !empty($field['disabled']) ? ' disabled' : '', isset($field['trigger']) ? ' class="trigger-' . $field['trigger'] . '"' : '', '>';
 		}
 
 		if (isset($field['after']))
 			echo ' ', $field['after'];
 
+		if ($field['type'] !== 'checkbox')
+			echo '
+					</div>';
+
 		echo '
-					</dd>';
+				</div>';
+	}
+
+	private function renderCaptcha($field_id, array $field)
+	{
+		echo '
+						<div class="g-recaptcha" data-sitekey="', RECAPTCHA_API_KEY, '"></div>
+						<script src="https://www.google.com/recaptcha/api.js"></script>';
+	}
+
+	private function renderCheckbox($field_id, array $field)
+	{
+		echo '
+					<div class="offset-sm-2 col-sm-10">
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox"', $this->data[$field_id] ? ' checked' : '', !empty($field['disabled']) ? ' disabled' : '', ' name="', $field_id, '" id="check-', $field_id, '">
+							<label class="form-check-label" for="check-', $field_id, '">
+								', $field['label'], '
+							</label>
+						</div>
+					</div>';
+	}
+
+	private function renderColor($field_id, array $field)
+	{
+		echo '
+						<input class="form-control" type="color" name="', $field_id, '" id="', $field_id, '" value="', htmlspecialchars($this->data[$field_id]), '"', !empty($field['disabled']) ? ' disabled' : '', '>';
+	}
+
+	private function renderFile($field_id, array $field)
+	{
+		if (!empty($this->data[$field_id]))
+			echo 'Currently using asset <tt>', $this->data[$field_id], '</tt>. Upload to overwrite.<br>';
+
+		echo '
+						<input class="form-control" type="file" name="', $field_id, '" id="', $field_id, '"', !empty($field['disabled']) ? ' disabled' : '', '>';
+	}
+
+	private function renderNumeric($field_id, array $field)
+	{
+		echo '
+						<input class="form-control" type="number"',
+							isset($field['step']) ? ' step="' . $field['step'] . '"' : '',
+							' min="', isset($field['min_value']) ? $field['min_value'] : '0', '"',
+							' max="', isset($field['max_value']) ? $field['max_value'] : '9999', '"',
+							' name="', $field_id, '" id="', $field_id, '"',
+							isset($field['size']) ? ' size="' . $field['size'] . '"' : '',
+							isset($field['maxlength']) ? ' maxlength="' . $field['maxlength'] . '"' : '',
+							' value="', htmlspecialchars($this->data[$field_id]), '"',
+							!empty($field['disabled']) ? ' disabled' : '', '>';
+	}
+
+	private function renderRadio($field_id, array $field)
+	{
+		foreach ($field['options'] as $value => $option)
+			echo '
+						<div class="form-check">
+							<input class="form-check-input" type="radio" name="', $field_id, '" id="radio-', $field_id, '-', $value, '" value="', $value, '"', $this->data[$field_id] == $value ? ' checked' : '', !empty($field['disabled']) ? ' disabled' : '', '>
+							<label class="form-check-label" for="radio-', $field_id, '-', $value, '">
+								', htmlspecialchars($option), '
+							</label>
+						</div>';
+	}
+
+	private function renderSelect($field_id, array $field)
+	{
+		echo '
+						<select class="form-select" name="', $field_id, !empty($field['multiple']) ? '[]' : '',
+					'" id="', $field_id, '"',
+					!empty($field['disabled']) ? ' disabled' : '',
+					!empty($field['multiple']) ? ' multiple' : '',
+					!empty($field['size']) ? ' size="' . $field['size'] . '"' : '',
+					'>';
+
+		if (isset($field['placeholder']))
+			echo '
+							<option value="">', $field['placeholder'], '</option>';
+
+		foreach ($field['options'] as $key => $value)
+		{
+			if (is_array($value))
+			{
+				assert(empty($field['multiple']));
+				$this->renderSelectOptionGroup($field_id, $key, $value);
+			}
+			else
+				$this->renderSelectOption($field_id, $value, $key, !empty($field['multiple']));
+		}
+
+		echo '
+						</select>';
+	}
+
+	private function renderSelectOption($field_id, $label, $value, $multiple = false)
+	{
+		echo '
+							<option value="', $value, '"',
+							!$multiple && $this->data[$field_id] == $value ? ' selected' : '',
+							$multiple && in_array($value, $this->data[$field_id]) ? ' selected' : '',
+							'>', htmlspecialchars($label), '</option>';
+	}
+
+	private function renderSelectOptionGroup($field_id, $label, $options)
+	{
+		echo '
+							<optgroup label="', $label, '">';
+
+		foreach ($options as $value => $option)
+			$this->renderSelectOption($field_id, $option, $value);
+
+		echo '
+							</optgroup>';
+	}
+
+	private function renderText($field_id, array $field)
+	{
+		echo '
+						<input class="form-control" ',
+						'type="', $field['type'], '" ',
+						'name="', $field_id, '" ',
+						'id="', $field_id, '"',
+						isset($field['size']) ? ' size="' . $field['size'] . '"' : '',
+						isset($field['maxlength']) ? ' maxlength="' . $field['maxlength'] . '"' : '',
+						isset($this->data[$field_id]) ? ' value="' . htmlspecialchars($this->data[$field_id]) . '"' : '',
+						isset($field['placeholder']) ? ' placeholder="' . $field['placeholder'] . '"' : '',
+						!empty($field['disabled']) ? ' disabled' : '',
+						isset($field['trigger']) ? ' class="trigger-' . $field['trigger'] . '"' : '',
+						'>';
+	}
+
+	private function renderTextArea($field_id, array $field)
+	{
+		echo '
+						<textarea class="form-control' .
+							'" name="', $field_id,
+							'" id="', $field_id,
+							'" cols="', isset($field['columns']) ? $field['columns'] : 40,
+							'" rows="', isset($field['rows']) ? $field['rows'] : 4, '"',
+							isset($field['placeholder']) ? ' placeholder="' . $field['placeholder'] . '"' : '',
+							'"', !empty($field['disabled']) ? ' disabled' : '',
+							'>', $this->data[$field_id], '</textarea>';
 	}
 }

templates/LogInForm.php

@@ -11,45 +11,57 @@ class LogInForm extends SubTemplate
 	private $redirect_url = '';
 	private $emailaddress = '';
 
+	protected $_class = 'content-box container col-lg-6';
+
 	public function setRedirectUrl($url)
 	{
-		$_SESSION['login_url'] = $url;
 		$this->redirect_url = $url;
 	}
 
 	public function setEmail($addr)
 	{
-		$this->emailaddress = htmlentities($addr);
+		$this->emailaddress = htmlspecialchars($addr);
 	}
 
 	protected function html_content()
 	{
-		echo '
+		if (!empty($this->_title))
-			<form action="', BASEURL, '/login/" method="post" id="login">
+			echo '
-				<h3>Log in</h3>';
+						<h1 class="mb-4">Press #RU to continue</h1>';
 
-		foreach ($this->_subtemplates as $template)
+		if (!empty($this->_subtemplates))
-			$template->html_main();
+		{
+			foreach ($this->_subtemplates as $template)
+				$template->html_main();
+		}
 
 		echo '
-				<dl>
+						<form class="mt-4" action="', BASEURL, '/login/" method="post">
-					<dt><label for="field_emailaddress">E-mail address:</label></dt>
+							<div class="row">
-					<dd><input type="text" id="field_emailaddress" name="emailaddress" tabindex="1" value="', $this->emailaddress, '" autofocus></dd>
+								<label class="col-sm-3 col-form-label" for="field_emailaddress">E-mail address:</label>
-
+								<div class="col-sm">
-					<dt><label for="field_password">Password:</label></dt>
+									<input type="text" class="form-control" id="field_emailaddress" name="emailaddress" value="', $this->emailaddress, '">
-					<dd><input type="password" id="field_password" name="password" tabindex="2"></dd>
+								</div>
-				</dl>';
+							</div>
+							<div class="row mt-3">
+								<label class="col-sm-3 col-form-label" for="field_password">Password:</label>
+								<div class="col-sm">
+									<input type="password" class="form-control" id="field_password" name="password">
+								</div>
+							</div>';
 
 		// Throw in a redirect url if asked for.
 		if (!empty($this->redirect_url))
 			echo '
-				<input type="hidden" name="redirect_url" value="', base64_encode($this->redirect_url), '">';
+							<input type="hidden" name="redirect_url" value="', base64_encode($this->redirect_url), '">';
 
 		echo '
-				<a href="', BASEURL, '/resetpassword/">Forgotten your password?</a>
+							<div class="mt-4">
-				<div class="buttonstrip">
+								<div class="offset-sm-3 col-sm-9">
-					<button type="submit" class="btn btn-primary" id="field_login" name="login" tabindex="3">Log in</button>
+									<button type="submit" class="btn btn-primary">Sign in</button>
-				</div>
+									<a class="btn btn-light" href="', BASEURL, '/resetpassword/" style="margin-left: 1em">Forgotten your password?</a>
-			</form>';
+								</div>
+							</div>
+						</form>';
 	}
 }

templates/MainNavBar.php

@@ -0,0 +1,63 @@
+<?php
+/*****************************************************************************
+ * MainNavBar.php
+ * Contains the primary navigational menu template.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class MainNavBar extends NavBar
+{
+	protected $outerMenuId = 'mainNav';
+	protected $innerMenuId = 'mainNavigation';
+	protected $ariaLabel = 'Main navigation';
+	protected $navBarClasses = 'navbar-dark bg-dark sticky-top';
+	protected $primaryBadgeClasses = 'bg-light text-dark';
+	protected $secondaryBadgeClasses = 'bg-dark text-light';
+
+	public function html_main()
+	{
+		// Select a random space invader, with a bias towards the mascot
+		$rnd = rand(0, 100);
+		$alt = $rnd > 50 ? ' alt-' . ($rnd % 6 + 1) : '';
+
+		echo '
+		<nav id="', $this->outerMenuId, '" class="navbar navbar-expand-lg ', $this->navBarClasses, '" aria-label="', $this->ariaLabel, '">
+			<div class="container">
+				<a class="navbar-brand flex-grow-1" href="', BASEURL, '/">
+					<i class="space-invader', $alt, '"></i>
+					HashRU Pics
+				</a>
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#', $this->innerMenuId, '" aria-controls="', $this->innerMenuId, '" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>';
+
+		if (Registry::get('user')->isLoggedIn())
+		{
+			echo '
+				<div class="collapse navbar-collapse justify-content-end" id="', $this->innerMenuId, '">
+					<ul class="navbar-nav mb-2 mb-lg-0">';
+
+			$mainMenu = new MainMenu();
+			$this->renderMenuItems($mainMenu->getItems());
+
+			echo '
+						<li class="nav-divider d-none d-lg-inline"></li>';
+
+			$adminMenu = new AdminMenu();
+			$this->renderMenuItems($adminMenu->getItems());
+
+			$userMenu = new UserMenu();
+			$this->renderMenuItems($userMenu->getItems());
+
+			echo '
+					</ul>
+				</div>';
+		}
+
+		echo '
+			</div>
+		</nav>';
+	}
+}

templates/MainTemplate.php

@@ -25,25 +25,30 @@ class MainTemplate extends Template
 		echo '<!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>', $this->title, '</title>', !empty($this->canonical_url) ? '
+		<title>', $this->title, '</title>';
-		<link rel="canonical" href="' . $this->canonical_url . '">' : '', '
+
+		if (!empty($this->canonical_url))
+			echo '
+		<link rel="canonical" href="', $this->canonical_url, '">';
+
+		echo '
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">';
+
+		echo '
+		<link rel="stylesheet" href="', BASEURL, '/vendor/twbs/bootstrap/dist/css/bootstrap.min.css">
+		<link rel="stylesheet" href="', BASEURL, '/vendor/twbs/bootstrap-icons/font/bootstrap-icons.css">
 		<link type="text/css" rel="stylesheet" href="', BASEURL, '/css/default.css">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script type="text/javascript" src="', BASEURL, '/js/main.js"></script>'
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">', !empty($this->css) ? '
+		, $this->header_html, '
-		<style type="text/css">' . $this->css . '
-		</style>' : '', $this->header_html, '
-		<script type="text/javascript" src="', BASEURL, '/js/main.js"></script>
 	</head>
 	<body', !empty($this->classes) ? ' class="' . implode(' ', $this->classes) . '"' : '', '>
-		<header>
+		<header>';
-			<a href="', BASEURL, '/">
+
-				<h1 id="logo">#pics</h1>
+		$bar = new MainNavBar();
-			</a>
+		$bar->html_main();
-			<ul id="nav">
+
-				<li><a href="', BASEURL, '/">albums</a></li>
+		echo '
-				<li><a href="', BASEURL, '/people/">people</a></li>
-				<li><a href="', BASEURL, '/timeline/">timeline</a></li>
-			</ul>
 		</header>
 		<div id="wrapper">';
 
@@ -69,7 +74,7 @@ class MainTemplate extends Template
 		}
 		else
 			echo '
-				<span class="vanity">Powered by <a href="https://aaronweb.net/projects/kabuki/">Kabuki CMS</a></span>';
+				<span class="vanity">Powered by <a href="https://aaronweb.net/projects/kabuki/" target="_blank">Kabuki CMS</a></span>';
 
 		echo '
 			</footer>
@@ -80,15 +85,11 @@ class MainTemplate extends Template
 				echo '<pre>', strtr($query, "\t", " "), '</pre>';
 
 		echo '
+		<script type="text/javascript" src="', BASEURL, '/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 	</body>
 </html>';
 	}
 
-	public function appendCss($css)
-	{
-		$this->css .= $css;
-	}
-
 	public function appendHeaderHtml($html)
 	{
 		$this->header_html .= "\n\t\t" . $html;

templates/MediaUploader.php

@@ -18,14 +18,12 @@ class MediaUploader extends SubTemplate
 	protected function html_content()
 	{
 		echo '
-			<form action="', BASEURL, '/uploadmedia/?tag=', $this->tag->id_tag, '" class="boxed_content" method="post" enctype="multipart/form-data">
+			<form action="', BASEURL, '/uploadmedia/?tag=', $this->tag->id_tag, '" method="post" enctype="multipart/form-data">
 				<h2>Upload new photos to &quot;', $this->tag->tag, '&quot;</h2>
-				<div>
+				<div class="input-group">
-					<h3>Select files</h3>
+					<input class="form-control d-inline" type="file" id="upload_queue" name="uploads[]"
-					<input type="file" id="upload_queue" name="uploads[]" multiple>
+						accept="image/jpeg" multiple>
-				</div>
+					<button class="btn btn-primary" name="save" id="photo_submit" type="submit">Upload the lot</button>
-				<div>
-					<input name="save" id="photo_submit" type="submit" value="Upload the lot">
 				</div>
 				<div id="upload_preview_area">
 				</div>

templates/MyTagsView.php

@@ -0,0 +1,32 @@
+<?php
+/*****************************************************************************
+ * MyTagsView.php
+ * Contains the user tag list.
+ *
+ * Kabuki CMS (C) 2013-2015, Aaron van Geffen
+ *****************************************************************************/
+
+class MyTagsView extends SubTemplate
+{
+	private $tags;
+
+	public function __construct(array $tags)
+	{
+		$this->tags = $tags;
+	}
+
+	protected function html_content()
+	{
+		echo '
+			<h2>Tags you can edit</h2>
+			<p>You can currently edit the tags below. Click a tag to edit it.</p>
+			<ul>';
+
+		foreach ($this->tags as $tag)
+			echo '
+				<li><a href="', BASEURL, '/edittag/?id=', $tag->id_tag, '">', $tag->tag, '</a></li>';
+
+		echo '
+			</ul>';
+	}
+}

templates/NavBar.php

@@ -0,0 +1,62 @@
+<?php
+/*****************************************************************************
+ * NavBar.php
+ * Contains the navigational menu template.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+abstract class NavBar extends Template
+{
+	protected $primaryBadgeClasses = 'bg-dark text-light';
+	protected $secondaryBadgeClasses = 'bg-light text-dark';
+
+	public function renderMenu(array $items, $navBarClasses = '')
+	{
+		echo '
+					<ul class="navbar-nav ', $navBarClasses, '">';
+
+		$this->renderMenuItems($items, $navBarClasses);
+
+		echo '
+					</ul>';
+	}
+
+	public function renderMenuItems(array $items)
+	{
+		foreach ($items as $menuId => $item)
+		{
+			if (isset($item['icon']))
+				$item['label'] = '<i class="bi bi-' . $item['icon'] . '"></i> ' . $item['label'];
+
+			if (isset($item['badge']))
+				$item['label'] .= ' <span class="badge ' . $this->primaryBadgeClasses . '">' . $item['badge'] . '</span>';
+
+			if (empty($item['subs']))
+			{
+				echo '
+						<li class="nav-item"><a class="nav-link" href="', $item['url'], '">', $item['label'], '</a></li>';
+				continue;
+			}
+
+			echo '
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="menu', $menuId, '" data-bs-toggle="dropdown" aria-expanded="false">', $item['label'], '</a>
+							<ul class="dropdown-menu" aria-labelledby="menu', $menuId, '">';
+
+			foreach ($item['subs'] as $subitem)
+			{
+				if (isset($subitem['badge']))
+					$subitem['label'] .= ' <span class="badge ' . $this->secondaryBadgeClasses . '">' . $subitem['badge'] . '</span>';
+
+				echo '
+								<li><a class="dropdown-item" href="', $subitem['url'], '">', $subitem['label'], '</a></li>';
+			}
+
+			echo '
+							</ul>
+						</li>';
+		}
+	}
+}

templates/PageIndexWidget.php

@@ -0,0 +1,61 @@
+<?php
+/*****************************************************************************
+ * PageIndexWidget.php
+ * Contains the template that displays a page index.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class PageIndexWidget extends Template
+{
+	private $index;
+	private string $class;
+
+	public function __construct(PageIndex $index)
+	{
+		$this->index = $index;
+		$this->class = $index->getPageIndexClass();
+	}
+
+	public function html_main()
+	{
+		self::paginate($this->index, $this->class);
+	}
+
+	public static function paginate(PageIndex $index, $class = null)
+	{
+		$page_index = $index->getPageIndex();
+		if (empty($page_index) || count($page_index) == 1)
+			return;
+
+		if (!isset($class))
+			$class = $index->getPageIndexClass();
+
+		echo '
+				<ul class="pagination', $class ? ' ' . $class : '', '">
+					<li class="page-item', empty($page_index['previous']) ? ' disabled' : '', '">',
+						'<a class="page-link"', !empty($page_index['previous']) ? ' href="' . $page_index['previous']['href'] . '"' : '', '>',
+						'&laquo; previous</a></li>';
+
+		foreach ($page_index as $key => $page)
+		{
+			if (!is_numeric($key))
+				continue;
+
+			if (!is_array($page))
+				echo '
+					<li class="page-item disabled"><a class="page-link">...</a></li>';
+			else
+				echo '
+					<li class="page-item', $page['is_selected'] ? ' active" aria-current="page' : '', '">',
+						'<a class="page-link" href="', $page['href'], '">', $page['index'], '</a></li>';
+		}
+
+		echo '
+					<li class="page-item', empty($page_index['next']) ? ' disabled' : '', '">',
+						'<a class="page-link"', !empty($page_index['next']) ? ' href="' . $page_index['next']['href'] . '"' : '', '>',
+						'next &raquo;</a></li>
+				</ul>';
+	}
+}

templates/Pagination.php

@@ -1,64 +0,0 @@
-<?php
-/*****************************************************************************
- * Pagination.php
- * Contains the pagination template.
- *
- * Kabuki CMS (C) 2013-2016, Aaron van Geffen
- *****************************************************************************/
-
-class Pagination extends SubTemplate
-{
-	private $index;
-	private static $unique_index_count = 0;
-	private string $class;
-
-	public function __construct(PageIndex $index)
-	{
-		$this->index = $index;
-		$this->class = $index->getPageIndexClass();
-	}
-
-	protected function html_content()
-	{
-		$index = $this->index->getPageIndex();
-
-		echo '
-				<div class="table_pagination', !empty($this->class) ? ' ' . $this->class : '', '">
-					<ul>
-						<li class="first"><', !empty($index['previous']) ? 'a href="' . $index['previous']['href'] . '"' : 'span', '>&laquo; previous</', !empty($index['previous']) ? 'a' : 'span', '></li>';
-
-		$num_wildcards = 0;
-		foreach ($index as $key => $page)
-		{
-			if (!is_numeric($key))
-				continue;
-
-			if (!is_array($page))
-			{
-				$num_wildcards++;
-				echo '
-						<li class="page-padding" onclick="javascript:promptGoToPage(', self::$unique_index_count, ')"><span>...</span></li>';
-			}
-			else
-				echo '
-						<li class="page-number', $page['is_selected'] ? ' active' : '', '"><a href="', $page['href'], '">', $page['index'], '</a></li>';
-		}
-
-		echo '
-						<li class="last"><', !empty($index['next']) ? 'a href="' . $index['next']['href'] . '"' : 'span', '>next &raquo;</', !empty($index['next']) ? 'a' : 'span', '></li>
-					</ul>
-				</div>';
-
-		if ($num_wildcards)
-		{
-			echo '
-			<script type="text/javascript">
-				var page_index_', self::$unique_index_count++, ' = {
-					wildcard_url: "', $this->index->getLink("%d"), '",
-					num_pages: ', $this->index->getNumberOfPages(), ',
-					per_page: ', $this->index->getItemsPerPage(), '
-				};
-			</script>';
-		}
-	}
-}

templates/PasswordResetForm.php

@@ -20,27 +20,31 @@ class PasswordResetForm extends SubTemplate
 	protected function html_content()
 	{
 		echo '
-						<div class="boxed_content">
+					<h1 class="mb-4">Password reset procedure</h1>';
-							<h2>Password reset procedure</h2>';
 
 		foreach ($this->_subtemplates as $template)
 			$template->html_main();
 
 		echo '
-							<p>You have successfully confirmed your identify. Please use the form below to set a new password.</p>
+					<p>You have successfully confirmed your identify. Please use the form below to set a new password.</p>
-							<form class="form-horizontal" action="', BASEURL, '/resetpassword/?step=2&amp;email=', rawurlencode($this->email), '&amp;key=', $this->key, '" method="post">
+					<form action="', BASEURL, '/resetpassword/?step=2&amp;email=', rawurlencode($this->email), '&amp;key=', $this->key, '" method="post">
-								<p>
+						<div class="row mt-3">
-									<label class="control-label" for="field_password1">New password:</label>
+							<label class="col-sm-2 col-form-label" for="field_password1">New password:</label>
-									<input type="password" id="field_password1" name="password1">
+							<div class="col-sm-3">
-								</p>
+								<input type="password" class="form-control" id="field_password1" name="password1">
-
+							</div>
-								<p>
+						</div>
-									<label class="control-label" for="field_password2">Repeat new password:</label>
+						<div class="row mt-3">
-									<input type="password" id="field_password2" name="password2">
+							<label class="col-sm-2 col-form-label" for="field_password2">Repeat new password:</label>
-								</p>
+							<div class="col-sm-3">
-
+								<input type="password" class="form-control" id="field_password2" name="password2">
+							</div>
+						</div>
+						<div class="row mt-3">
+							<div class="offset-sm-2 col-sm-2">
 								<button type="submit" class="btn btn-primary">Reset password</button>
-							</form>
+							</div>
-						</div>';
+						</div>
+					</form>';
 	}
 }

templates/PhotoPage.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2016, Aaron van Geffen
  *****************************************************************************/
 
-class PhotoPage extends SubTemplate
+class PhotoPage extends Template
 {
 	protected $photo;
 	private $exif;
@@ -34,27 +34,33 @@ class PhotoPage extends SubTemplate
 		$this->is_asset_owner = $flag;
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		$this->photoNav();
 		$this->photo();
 
 		echo '
-				<div id="sub_photo">
+				<div class="row mt-5">
-					<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
+					<div class="col-lg-8">
+						<div id="sub_photo" class="content-box">
+							<h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
 
 		$this->taggedPeople();
 		$this->linkNewTags();
 
 		echo '
-				</div>';
+						</div>
+					</div>
+					<div class="col-lg-4">';
 
 		$this->photoMeta();
 
-		if($this->is_asset_owner)
+		if ($this->is_asset_owner)
 			$this->addUserActions();
 
 		echo '
+					</div>
+				</div>
 				<script type="text/javascript" src="', BASEURL, '/js/photonav.js"></script>';
 	}
 
@@ -78,23 +84,23 @@ class PhotoPage extends SubTemplate
 	{
 		if ($this->previous_photo_url)
 			echo '
-				<a href="', $this->previous_photo_url, '" id="previous_photo"><em>Previous photo</em></a>';
+				<a href="', $this->previous_photo_url, '#photo_frame" id="previous_photo"><i class="bi bi-arrow-left"></i></a>';
 		else
 			echo '
-				<span id="previous_photo"><em>Previous photo</em></span>';
+				<span id="previous_photo"><i class="bi bi-arrow-left"></i></span>';
 
 		if ($this->next_photo_url)
 			echo '
-				<a href="', $this->next_photo_url, '" id="next_photo"><em>Next photo</em></a>';
+				<a href="', $this->next_photo_url, '#photo_frame" id="next_photo"><i class="bi bi-arrow-right"></i></a>';
 		else
 			echo '
-				<span id="next_photo"><em>Next photo</em></span>';
+				<span id="next_photo"><i class="bi bi-arrow-right"></i></span>';
 	}
 
 	private function photoMeta()
 	{
 		echo '
-				<div id="photo_exif_box">
+				<div id="photo_exif_box" class="content-box clearfix">
 					<h3>EXIF</h3>
 					<dl class="photo_meta">';
 
@@ -171,7 +177,9 @@ class PhotoPage extends SubTemplate
 		echo '
 				<div>
 					<h3>Link tags</h3>
-					<p style="position: relative"><input type="text" id="new_tag" placeholder="Type to link a new tag"></p>
+					<p style="position: relative">
+						<input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
+					</p>
 				</div>
 				<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
 				<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
@@ -240,9 +248,10 @@ class PhotoPage extends SubTemplate
 	public function addUserActions()
 	{
 		echo '
-				<div id=user_actions_box>
+				<div id="user_actions_box" class="content-box">
 					<h3>Actions</h3>
-					<a class="btn btn-red" href="', BASEURL, '/', $this->photo->getSlug(), '?confirm_delete">Delete</a>
+					<a class="btn btn-primary" href="', BASEURL, '/editasset/?id=', $this->photo->getId(), '">Edit photo</a>
+					<a class="btn btn-danger" href="', BASEURL, '/', $this->photo->getSlug(), '/?confirm_delete">Delete photo</a>
 				</div>';
 	}
 }

templates/PhotosIndex.php

@@ -6,7 +6,7 @@
  * Kabuki CMS (C) 2013-2015, Aaron van Geffen
  *****************************************************************************/
 
-class PhotosIndex extends SubTemplate
+class PhotosIndex extends Template
 {
 	protected $mosaic;
 	protected $show_edit_buttons;
@@ -42,10 +42,10 @@ class PhotosIndex extends SubTemplate
 		$this->show_labels = $show_labels;
 	}
 
-	protected function html_content()
+	public function html_main()
 	{
 		echo '
-			<div class="tiled_grid">';
+			<div class="tiled_grid clearfix">';
 
 		for ($i = $this->row_limit; $i > 0 && $row = $this->mosaic->getRow(); $i--)
 		{
@@ -100,7 +100,7 @@ class PhotosIndex extends SubTemplate
 		else
 			echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
 
-		echo ' alt="" title="', $image->getTitle(), '">';
+		echo ' alt="" title="', $image->getTitle(), '" style="width: ', $width, 'px; height: ', $height, 'px">';
 
 		if ($this->show_labels)
 			echo '

templates/SubTemplate.php

@@ -8,10 +8,32 @@
 
 abstract class SubTemplate extends Template
 {
+	protected $_class = 'content-box container';
+	protected $_id;
+	protected $_title;
+
+	public function __construct($title = '')
+	{
+		$this->_title = $title;
+	}
+
 	public function html_main()
 	{
-		echo $this->html_content();
+		echo '
+			<div class="', $this->_class, '"', isset($this->_id) ? ' id="' . $this->_id . '"' : '', '>',
+				$this->html_content(), '
+			</div>';
 	}
 
 	abstract protected function html_content();
+
+	public function setClassName($className)
+	{
+		$this->_class = $className;
+	}
+
+	public function setDOMId($id)
+	{
+		$this->_id = $id;
+	}
 }

templates/TabularData.php

@@ -3,56 +3,73 @@
  * TabularData.php
  * Contains the template that displays tabular data.
  *
- * Kabuki CMS (C) 2013-2015, Aaron van Geffen
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
  *****************************************************************************/
 
 class TabularData extends SubTemplate
 {
-	private Pagination $pager;
 	private GenericTable $_t;
 
 	public function __construct(GenericTable $table)
 	{
 		$this->_t = $table;
-
-		$pageIndex = $table->getPageIndex();
-		if ($pageIndex)
-			$this->pager = new Pagination($pageIndex);
 	}
 
 	protected function html_content()
 	{
-		echo '
-			<div class="admin_box">';
-
 		$title = $this->_t->getTitle();
 		if (!empty($title))
+		{
+			$titleclass = $this->_t->getTitleClass();
 			echo '
-				<h2>', $title, '</h2>';
+			<div class="generic-table', !empty($titleclass) ? ' ' . $titleclass : '', '">
+				<h1>', htmlspecialchars($title), '</h1>';
+		}
 
-		// Showing a page index?
+		foreach ($this->_subtemplates as $template)
-		if (isset($this->pager))
+			$template->html_main();
-			$this->pager->html_content();
 
-		// Maybe even a small form?
+		// Showing an inline form?
-		if (isset($this->_t->form_above))
+		$pager = $this->_t->getPageIndex();
-			$this->showForm($this->_t->form_above);
+		if (!empty($pager) || isset($this->_t->form_above))
+		{
+			echo '
+				<div class="row clearfix justify-content-end">';
+
+			// Page index?
+			if (!empty($pager))
+				PageIndexWidget::paginate($pager);
+
+			// Form controls?
+			if (isset($this->_t->form_above))
+				$this->showForm($this->_t->form_above);
+
+			echo '
+				</div>';
+		}
+
+		$tableClass = $this->_t->getTableClass();
+		if ($tableClass)
+			echo '
+			<div class="', $tableClass, '">';
 
 		// Build the table!
 		echo '
-				<table class="table table-striped">
+				<table class="table table-striped table-condensed">
 					<thead>
 						<tr>';
 
-		// Show the table's headers.
+		// Show all headers in their full glory!
-		foreach ($this->_t->getHeader() as $th)
+		$header = $this->_t->getHeader();
+		foreach ($header as $th)
 		{
 			echo '
 							<th', (!empty($th['width']) ? ' width="' . $th['width'] . '"' : ''), (!empty($th['class']) ? ' class="' . $th['class'] . '"' : ''), ($th['colspan'] > 1 ? ' colspan="' . $th['colspan'] . '"' : ''), ' scope="', $th['scope'], '">',
 							$th['href'] ? '<a href="' . $th['href'] . '">' . $th['label'] . '</a>' : $th['label'];
 
-			if ($th['sort_mode'] )
+			if ($th['sort_mode'])
-				echo ' ', $th['sort_mode'] === 'up' ? '&uarr;' : '&darr;';
+				echo ' <i class="bi bi-caret-' . ($th['sort_mode'] === 'down' ? 'down' : 'up') . '-fill"></i>';
 
 			echo '</th>';
 		}
@@ -62,7 +79,7 @@ class TabularData extends SubTemplate
 					</thead>
 					<tbody>';
 
-		// Show the table's body.
+		// The body is what we came to see!
 		$body = $this->_t->getBody();
 		if (is_array($body))
 		{
@@ -72,51 +89,147 @@ class TabularData extends SubTemplate
 						<tr', (!empty($tr['class']) ? ' class="' . $tr['class'] . '"' : ''), '>';
 
 				foreach ($tr['cells'] as $td)
+				{
 					echo '
-							<td', (!empty($td['width']) ? ' width="' . $td['width'] . '"' : ''), '>', $td['value'], '</td>';
+							<td', (!empty($td['width']) ? ' width="' . $td['width'] . '"' : ''), '>';
+
+					if (!empty($td['class']))
+						echo '<span class="', $td['class'], '">', $td['value'], '</span>';
+					else
+						echo $td['value'];
+
+					echo '</td>';
+				}
 
 				echo '
 						</tr>';
 			}
 		}
+		// !!! Sum colspan!
 		else
 			echo '
 						<tr>
-							<td colspan="', count($this->_t->getHeader()), '">', $body, '</td>
+							<td colspan="', count($header), '" class="fullwidth">', $body, '</td>
 						</tr>';
 
 		echo '
 					</tbody>
 				</table>';
 
-		// Maybe another small form?
+		if ($tableClass)
-		if (isset($this->_t->form_below))
+			echo '
-			$this->showForm($this->_t->form_below);
+			</div>';
 
-		// Showing a page index?
+		// Showing an inline form?
-		if (isset($this->pager))
+		if (!empty($pager) || isset($this->_t->form_below))
-			$this->pager->html_content();
+		{
+			echo '
+				<div class="row clearfix justify-content-end">';
 
-		echo '
+			// Page index?
+			if (!empty($pager))
+				PageIndexWidget::paginate($pager);
+
+			// Form controls?
+			if (isset($this->_t->form_below))
+				$this->showForm($this->_t->form_below);
+
+			echo '
+				</div>';
+		}
+
+		if (!empty($title))
+			echo '
 			</div>';
 	}
 
 	protected function showForm($form)
 	{
-		echo '
+		if (!isset($form['is_embed']))
-				<form action="', $form['action'], '" method="', $form['method'], '" class="table_form ', $form['class'], '">';
+			echo '
+			<form action="', $form['action'], '" method="', $form['method'], '" class="', $form['class'], '">';
+		else
+			echo '
+			<div class="', $form['class'], '">';
+
+		if (!empty($form['is_group']))
+			echo '
+				<div class="input-group">';
 
 		if (!empty($form['fields']))
+		{
 			foreach ($form['fields'] as $name => $field)
-				echo '
+			{
-					<input name="', $name, '" type="', $field['type'], '" placeholder="', $field['placeholder'], '"', isset($field['class']) ? ' class="' . $field['class'] . '"' : '', isset($field['value']) ? ' value="' . $field['value'] . '"' : '', '>';
+				if ($field['type'] === 'select')
+				{
+					echo '
+					<select class="form-select" name="', $name, '"', (isset($field['onchange']) ? ' onchange="' . $field['onchange'] . '"' : ''), '>';
+
+					foreach ($field['values'] as $value => $caption)
+					{
+						if (!is_array($caption))
+						{
+							echo '
+						<option value="', $value, '"', $value === $field['selected'] ? ' selected' : '', '>', $caption, '</option>';
+						}
+						else
+						{
+							$label = $value;
+							$options = $caption;
+
+							echo '
+						<optgroup label="', $label, '">';
+
+							foreach ($options as $value => $caption)
+							{
+								echo '
+							<option value="', $value, '"', $value === $field['selected'] ? ' selected' : '', '>', $caption, '</option>';
+							}
+
+							echo '
+						</optgroup>';
+						}
+					}
+
+					echo '
+					</select>';
+				}
+				else
+					echo '
+					<input name="', $name, '" id="field_', $name, '" type="', $field['type'], '" placeholder="', $field['placeholder'], '" class="form-control', isset($field['class']) ? ' ' . $field['class'] : '', '"', isset($field['value']) ? ' value="' . htmlspecialchars($field['value']) . '"' : '', '>';
+
+				if (isset($field['html_after']))
+					echo $field['html_after'];
+			}
+		}
+
+		echo '
+					<input type="hidden" name="', Session::getSessionTokenKey(), '" value="', Session::getSessionToken(), '">';
 
 		if (!empty($form['buttons']))
 			foreach ($form['buttons'] as $name => $button)
+			{
 				echo '
-					<input name="', $name, '" type="', $button['type'], '" value="', $button['caption'], '" class="btn', isset($button['class']) ? ' ' . $button['class'] . '' : '', '">';
+					<button class="btn ', isset($button['class']) ? $button['class'] : 'btn-primary', '" type="', $button['type'], '" name="', $name, '"';
 
-		echo '
+				if (isset($button['onclick']))
-				</form>';
+					echo ' onclick="', $button['onclick'], '"';
+
+				echo '>', $button['caption'], '</button>';
+
+				if (isset($button['html_after']))
+					echo $button['html_after'];
+			}
+
+		if (!empty($form['is_group']))
+			echo '
+				</div>';
+
+		if (!isset($form['is_embed']))
+			echo '
+			</form>';
+		else
+			echo '
+			</div>';
 	}
 }

templates/WarningDialog.php

@@ -24,6 +24,6 @@ class WarningDialog extends Alert
 	private function addButtons()
 	{
 		foreach ($this->buttons as $button)
-			$button->html_content();
+			$button->html_main();
 	}
 }

upgrade.sql

@@ -0,0 +1,15 @@
+/* 2023-03-11 Allow designating an owner for each tag */
+ALTER TABLE `tags` ADD `id_user_owner` INT  NULL  DEFAULT NULL  AFTER `id_asset_thumb`;
+
+/* 2023-03-11 Try to assign tag owners automagically */
+UPDATE tags AS t
+SET id_user_owner = (
+	SELECT id_user
+	FROM users AS u
+	WHERE LOWER(u.first_name) = LOWER(t.slug) OR
+		LOWER(u.first_name) = LOWER(t.tag) OR
+		LOWER(u.slug) = LOWER(t.slug) OR
+		LOWER(u.slug) = LOWER(t.tag)
+	)
+WHERE t.kind = 'Person' AND
+	(t.id_user_owner = 0 OR t.id_user_owner IS NULL);