Details and user page updates, resolves #27

app/views/anime/details.php

@@ -76,25 +76,25 @@
 			<?php endif ?>
 		</div>
 	</section>
-	<section>
+
 	<?php if (count($characters) > 0): ?>
 	<h2>Characters</h2>
-	<div class="flex flex-wrap">
+	<section class="media-wrap">
 	<?php foreach($characters as $char): ?>
 		<?php if ( ! empty($char['image']['original'])): ?>
-		<div class="character">
+		<article class="character">
 			<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
+			<div class="name">
 				<?= $helper->a($link, $char['name']); ?>
-			<br />
+			</div>
 			<a href="<?= $link ?>">
 			<?= $helper->img($char['image']['original'], [
 				'width' => '225'
 			]) ?>
 			</a>
-		</div>
+		</article>
 		<?php endif ?>
 	<?php endforeach ?>
-	</div>
-	<?php endif ?>
 	</section>
+	<?php endif ?>
 </main>

app/views/character.php

@@ -1,7 +1,7 @@
 <main class="details fixed">
 	<section class="flex flex-no-wrap">
 		<div>
-			<img class="cover" width="402" height="284" src="<?= $data['image']['original'] ?>" alt="" />
+			<img class="cover" width="284" src="<?= $data['image']['original'] ?>" alt="" />
 		</div>
 		<div>
 			<h2><?= $data['name'] ?></h2>

app/views/manga/details.php

@@ -35,26 +35,25 @@
 			<p><?= nl2br($data['synopsis']) ?></p>
 		</div>
 	</section>
-	<section>
+
 	<?php if (count($characters) > 0): ?>
 	<h2>Characters</h2>
-	<div class="flex flex-wrap">
+	<section class="media-wrap">
 	<?php foreach($characters as $char): ?>
 		<?php if ( ! empty($char['image']['original'])): ?>
-		<div class="character">
+		<article class="character">
 			<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
+			<div class="name">
 				<?= $helper->a($link, $char['name']); ?>
-			<br />
+			</div>
 			<a href="<?= $link ?>">
 			<?= $helper->img($char['image']['original'], [
 				'width' => '225'
 			]) ?>
 			</a>
-		</div>
+		</article>
 		<?php endif ?>
 	<?php endforeach ?>
-	</div>
-	<?php endif ?>
 	</section>
-
+	<?php endif ?>
 </main>

app/views/me.php

@@ -1,4 +1,5 @@
-<main class="details">
+<?php use Aviat\AnimeClient\API\Kitsu; ?>
+<main class="user-page details">
 	<section class="flex flex-no-wrap">
 		<div>
 			<h2><?= $attributes['name'] ?></h2>
@@ -54,29 +55,73 @@
 				<dd><?= $escape->html($attributes['bio']) ?></dd>
 			</dl>
 			<?php if ( ! empty($favorites)): ?>
-			<h3>Favorites:</h3>
 				<?php if ( ! empty($favorites['characters'])): ?>
-					<section>
+					<h4>Favorite Characters</h4>
-					<h4>Characters</h4>
+					<section class="media-wrap">
-					<div class="flex flex-wrap">
 					<?php foreach($favorites['characters'] as $char): ?>
 						<?php if ( ! empty($char['image']['original'])): ?>
-						<div class="small_character">
+						<article class="small_character">
 							<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
-							<?= $helper->a($link, $char['name']); ?>
+							<div class="name"><?= $helper->a($link, $char['name']); ?></div>
-							<br />
 							<a href="<?= $link ?>">
-							<?= $helper->img($char['image']['original'], [
+							<?= $helper->img($char['image']['original']) ?>
-								'width' => '225'
-							]) ?>
 							</a>
-						</div>
+						</article>
 						<?php endif ?>
 					<?php endforeach ?>
+					</section>
+				<?php endif ?>
+				<?php if ( ! empty($favorites['anime'])): ?>
+					<h4>Favorite Anime</h4>
+					<section class="media-wrap">
+						<?php foreach($favorites['anime'] as $anime): ?>
+						<article class="media">
+							<?php
+								$link = $url->generate('anime.details', ['id' => $anime['slug']]);
+								$titles = Kitsu::filterTitles($anime);
+							?>
+							<a href="<?= $link ?>">
+								<img src="<?= $anime['posterImage']['small'] ?>" width="220" alt="" />
+							</a>
+							<div class="name">
+								<a href="<?= $link ?>">
+									<?= array_shift($titles) ?>
+									<?php foreach ($titles as $title): ?>
+										<br /><small><?= $title ?></small>
+									<?php endforeach ?>
+								</a>
 							</div>
+						</article>
+						<?php endforeach ?>
+					</section>
+				<?php endif ?>
+				<?php if ( ! empty($favorites['manga'])): ?>
+					<h4>Favorite Manga</h4>
+					<section class="media-wrap">
+						<?php foreach($favorites['manga'] as $manga): ?>
+						<article class="media">
+							<?php
+								$link = $url->generate('manga.details', ['id' => $manga['slug']]);
+								$titles = Kitsu::filterTitles($manga);
+							?>
+							<a href="<?= $link ?>">
+								<img src="<?= $manga['posterImage']['small'] ?>" width="220" alt="" />
+							</a>
+							<div class="name">
+								<a href="<?= $link ?>">
+									<?= array_shift($titles) ?>
+									<?php foreach ($titles as $title): ?>
+										<br /><small><?= $title ?></small>
+									<?php endforeach ?>
+								</a>
+							</div>
+						</article>
+						<?php endforeach ?>
 					</section>
 				<?php endif ?>
 			<?php endif ?>
+
+
 		</div>
 	</section>
 </main>

public/css/base.css

@@ -1025,7 +1025,7 @@ a:hover, a:active {
 	Base list styles
 ------------------------------------------------------------------------------*/
 
-.media {
+.media, .character, .small_character {
 	position:relative;
 	vertical-align:top;
 	display:inline-block;
@@ -1035,7 +1035,9 @@ a:hover, a:active {
 	margin:0.25em 0.125em;
 }
 
-.media > img {
+.media > img,
+.character > img,
+.small_character > img {
 	width: 100%;
 }
 
@@ -1076,6 +1078,8 @@ a:hover, a:active {
 		top: 0;
 	}
 
+.small_character:hover > .name,
+		.character:hover > .name,
 		.media:hover > .name,
 		.media:hover > .media_metadata > div,
 		.media:hover > .medium_metadata > div,
@@ -1094,6 +1098,10 @@ a:hover, a:active {
 			display:block;
 		}
 
+.small_character > .name a,
+		.small_character > .name a small,
+		.character > .name a,
+		.character > .name a small,
 		.media > .name a,
 		.media > .name a small
 		{
@@ -1263,7 +1271,7 @@ a:hover, a:active {
 .details .cover {
 	display: block;
 	width: 284px;
-	height: 402px;
+	/* height: 402px; */
 }
 
 .details h2 {
@@ -1298,12 +1306,56 @@ a:hover, a:active {
 	text-align:left;
 }
 
+.character,
+.small_character {
+	background: rgba(0, 0, 0, .5);
+	width: 225px;
+	height: 350px;
+	vertical-align: middle;
+	white-space: nowrap;
+}
+
+.small_character a {
+		display:inline-block;
+		width: 100%;
+		height: 100%;
+	}
+
+.small_character .name,
+	.character .name {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		z-index: 10;
+	}
+
+.small_character img,
+	.character img {
+		position: relative;
+		top: 50%;
+		-webkit-transform: translateY(-50%);
+		        transform: translateY(-50%);
+		z-index: 5;
+		width: 100%;
+	}
+
 /* ----------------------------------------------------------------------------
 	User page styles
 -----------------------------------------------------------------------------*/
 
-.small_character img {
+.small_character {
-	max-width: 300px;
+	width: 160px;
+	height: 250px;
+}
+
+.user-page .media-wrap {
+	text-align: left;
+}
+
+.media a {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
 }
 
 /* ----------------------------------------------------------------------------

public/css/base.myth.css

@@ -297,7 +297,7 @@ a:hover, a:active {
 	Base list styles
 ------------------------------------------------------------------------------*/
 
-.media {
+.media, .character, .small_character {
 	position:relative;
 	vertical-align:top;
 	display:inline-block;
@@ -307,7 +307,9 @@ a:hover, a:active {
 	margin: var(--normal-padding);
 }
 
-.media > img {
+.media > img,
+.character > img,
+.small_character > img {
 	width: 100%;
 }
 
@@ -347,7 +349,8 @@ a:hover, a:active {
 		position:absolute;
 		top: 0;
 	}
-
+		.small_character:hover > .name,
+		.character:hover > .name,
 		.media:hover > .name,
 		.media:hover > .media_metadata > div,
 		.media:hover > .medium_metadata > div,
@@ -364,6 +367,10 @@ a:hover, a:active {
 			display:block;
 		}
 
+		.small_character > .name a,
+		.small_character > .name a small,
+		.character > .name a,
+		.character > .name a small,
 		.media > .name a,
 		.media > .name a small
 		{
@@ -521,7 +528,7 @@ a:hover, a:active {
 .details .cover {
 	display: block;
 	width: 284px;
-	height: 402px;
+	/* height: 402px; */
 }
 
 .details h2 {
@@ -552,13 +559,54 @@ a:hover, a:active {
 	text-align:left;
 }
 
+.character,
+.small_character {
+	background: rgba(0,0,0,0.5);
+	width: 225px;
+	height: 350px;
+	vertical-align: middle;
+	white-space: nowrap;
+}
+	.small_character a {
+		display:inline-block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.small_character .name,
+	.character .name {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		z-index: 10;
+	}
+
+	.small_character img,
+	.character img {
+		position: relative;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 5;
+		width: 100%;
+	}
+
 /* ----------------------------------------------------------------------------
 	User page styles
 -----------------------------------------------------------------------------*/
-.small_character img {
+.small_character {
-	max-width: 300px;
+	width: 160px;
+	height: 250px;
 }
 
+.user-page .media-wrap {
+	text-align: left;
+}
+
+.media a {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+}
 
 /* ----------------------------------------------------------------------------
 	Viewport-based styles

src/API/Kitsu/Model.php

@@ -433,6 +433,12 @@ class Model {
 			]
 		];
 		$data = $this->getRequest("anime/{$kitsuAnimeId}", $options);
+
+		if ( ! array_key_exists('included', $data))
+		{
+			return NULL;
+		}
+
 		$mappings = array_column($data['included'], 'attributes');
 
 		foreach($mappings as $map)

src/Controller.php

@@ -284,6 +284,17 @@ class Controller {
 		], NULL, $httpCode);
 	}
 
+	/**
+	 * Redirect to the default controller/url from an empty path
+	 *
+	 * @return void
+	 */
+	public function redirectToDefaultRoute()
+	{
+		$defaultType = $this->config->get(['routes', 'route_config', 'default_list']) ?? 'anime';
+		$this->redirect($this->urlGenerator->defaultUrl($defaultType), 303);
+	}
+
 	/**
 	 * Set a session flash variable to display a message on
 	 * next page load

src/Controller/Index.php

@@ -113,17 +113,6 @@ class Index extends BaseController {
 		]);
 	}
 
-	/**
-	 * Redirect to the default controller/url from an empty path
-	 *
-	 * @return void
-	 */
-	public function redirectToDefaultRoute()
-	{
-		$defaultType = $this->config->get(['routes', 'route_config', 'default_list']);
-		$this->redirect($this->urlGenerator->defaultUrl($defaultType), 303);
-	}
-
 	private function organizeFavorites(array $rawfavorites): array
 	{
 		// return $rawfavorites;