From 67e068f05380a0fb3008c95b987e5615ee20d5a6 Mon Sep 17 00:00:00 2001
From: Timothy J Warren <tim@timshomepage.net>
Date: Mon, 5 Nov 2018 09:56:38 -0500
Subject: [PATCH] Some visual tweaks

---
 app/views/anime/cover-item.php | 18 +++++---
 app/views/anime/details.php    | 35 +++++++++-------
 app/views/anime/list.php       | 14 ++++++-
 app/views/user/details.php     | 77 ++++++++++++++++++----------------
 4 files changed, 85 insertions(+), 59 deletions(-)

diff --git a/app/views/anime/cover-item.php b/app/views/anime/cover-item.php
index bfad9149..92b2e559 100644
--- a/app/views/anime/cover-item.php
+++ b/app/views/anime/cover-item.php
@@ -41,14 +41,20 @@
 						<?php if ($link['meta']['link']): ?>
 							<a href="<?= $link['link'] ?>"
 							   title="Stream '<?= $item['anime']['title'] ?>' on <?= $link['meta']['name'] ?>">
-								<img class="streaming-logo" width="20" height="20"
-									 src="<?= $urlGenerator->assetUrl('images', $link['meta']['image']) ?>"
-									 alt="<?= $link['meta']['name'] ?> logo"/>
+								<?= $helper->picture("images/{$link['meta']['image']}", 'svg', [
+									'class' => 'streaming-logo',
+									'width' => 20,
+									'height' => 20,
+									'alt' => "{$link['meta']['name']} logo",
+								]); ?>
 							</a>
 						<?php else: ?>
-							<img class="streaming-logo" width="20" height="20"
-								 src="<?= $urlGenerator->assetUrl('images', $link['meta']['image']) ?>"
-								 alt="<?= $link['meta']['name'] ?> logo"/>
+							<?= $helper->picture("images/{$link['meta']['image']}", 'svg', [
+								'class' => 'streaming-logo',
+								'width' => 20,
+								'height' => 20,
+								'alt' => "{$link['meta']['name']} logo",
+							]); ?>
 						<?php endif ?>
 					</div>
 				<?php endforeach ?>
diff --git a/app/views/anime/details.php b/app/views/anime/details.php
index a5d7b549..97dbb358 100644
--- a/app/views/anime/details.php
+++ b/app/views/anime/details.php
@@ -46,7 +46,7 @@
 				<h3><?= $title ?></h3>
 			<?php endforeach ?>
 			<br />
-			<p><?= nl2br($show_data['synopsis']) ?></p>
+			<p class="description"><?= nl2br($show_data['synopsis']) ?></p>
 			<?php if (count($show_data['streaming_links']) > 0): ?>
 				<hr />
 				<h4>Streaming on:</h4>
@@ -67,19 +67,21 @@
 										href="<?= $link['link'] ?>"
 										title="Stream '<?= $show_data['title'] ?>' on <?= $link['meta']['name'] ?>"
 									>
-										<img
-											class="streaming-logo" width="50" height="50"
-											src="<?= $urlGenerator->assetUrl('images', $link['meta']['image']) ?>"
-											alt="<?= $link['meta']['name'] ?> logo"
-										/>
+										<?= $helper->picture("images/{$link['meta']['image']}", 'svg', [
+											'class' => 'streaming-logo',
+											'width' => 50,
+											'height' => 50,
+											'alt' => "{$link['meta']['name']} logo",
+										]); ?>
 										&nbsp;&nbsp;<?= $link['meta']['name'] ?>
 									</a>
 								<?php else: ?>
-									<img
-										class="streaming-logo" width="50" height="50"
-										src="<?= $urlGenerator->assetUrl('images', $link['meta']['image']) ?>"
-										alt="<?= $link['meta']['name'] ?> logo"
-									/>
+									<?= $helper->picture("images/{$link['meta']['image']}", 'svg', [
+										'class' => 'streaming-logo',
+										'width' => 50,
+										'height' => 50,
+										'alt' => "{$link['meta']['name']} logo",
+									]); ?>
 									&nbsp;&nbsp;<?= $link['meta']['name'] ?>
 								<?php endif ?>
 							</td>
@@ -91,12 +93,17 @@
 				</table>
 			<?php endif ?>
 			<?php if ( ! empty($show_data['trailer_id'])): ?>
-				<hr />
+				<div class="responsive-iframe">
 				<h4>Trailer</h4>
 				<iframe
-					width="560" height="315" src="https://www.youtube.com/embed/<?= $show_data['trailer_id'] ?>"
-					frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
+					width="560"
+					height="315"
+					src="https://www.youtube.com/embed/<?= $show_data['trailer_id'] ?>"
+					frameborder="0"
+					allow="autoplay; encrypted-media"
+					allowfullscreen
 				></iframe>
+				</div>
 			<?php endif ?>
 		</article>
 	</section>
diff --git a/app/views/anime/list.php b/app/views/anime/list.php
index 740fca5b..429f6814 100644
--- a/app/views/anime/list.php
+++ b/app/views/anime/list.php
@@ -72,10 +72,20 @@
 						<?php foreach($item['anime']['streaming_links'] as $link): ?>
 							<?php if ($link['meta']['link'] !== FALSE): ?>
 								<a href="<?= $link['link'] ?>" title="Stream '<?= $item['anime']['title'] ?>' on <?= $link['meta']['name'] ?>">
-									<img class="streaming-logo" width="50" height="50" src="<?= $urlGenerator->assetUrl('images', $link['meta']['image']) ?>" alt="<?= $link['meta']['name'] ?> logo" />
+									<?= $helper->picture("images/{$link['meta']['image']}", 'svg', [
+										'class' => 'streaming-logo',
+										'width' => 50,
+										'height' => 50,
+										'alt' => "{$link['meta']['name']} logo",
+									]); ?>
 								</a>
 							<?php else: ?>
-								<img class="streaming-logo" width="50" height="50" src="<?= $urlGenerator->assetUrl('images', $link['meta']['image']) ?>" alt="<?= $link['meta']['name'] ?> logo" />
+								<?= $helper->picture("images/{$link['meta']['image']}", 'svg', [
+									'class' => 'streaming-logo',
+									'width' => 50,
+									'height' => 50,
+									'alt' => "{$link['meta']['name']} logo",
+								]); ?>
 							<?php endif ?>
 						<?php endforeach ?>
 					</td>
diff --git a/app/views/user/details.php b/app/views/user/details.php
index 35454735..8fa17d66 100644
--- a/app/views/user/details.php
+++ b/app/views/user/details.php
@@ -3,8 +3,19 @@ use function Aviat\AnimeClient\getLocalImg;
 use Aviat\AnimeClient\API\Kitsu;
 ?>
 <main class="user-page details">
+	<h2 class="toph">
+		<?= $helper->a(
+			"https://kitsu.io/users/{$attributes['slug']}",
+			$attributes['name'], [
+			'title' => 'View profile on Kitsu'
+		])
+		?>
+	</h2>
+
+	<p><?= $escape->html($attributes['about']) ?></p>
+
 	<section class="flex flex-no-wrap">
-		<div>
+		<aside class="info">
 			<center>
 				<?php
 					$avatar = $urlGenerator->assetUrl(
@@ -14,11 +25,7 @@ use Aviat\AnimeClient\API\Kitsu;
 				?>
 			</center>
 			<br />
-			<br />
 			<table class="media-details">
-				<tr>
-					<th colspan="2">General</th>
-				</tr>
 				<tr>
 					<td>Location</td>
 					<td><?= $attributes['location'] ?></td>
@@ -41,58 +48,48 @@ use Aviat\AnimeClient\API\Kitsu;
 					</td>
 				</tr>
 				<?php endif ?>
-				<tr>
-					<th colspan="2">User Stats</th>
-				</tr>
+			</table>
+
+			<h3>User Stats</h3><br />
+			<table class="media-details">
 				<tr>
 					<td>Time spent watching anime:</td>
 					<td><?= $timeOnAnime ?></td>
 				</tr>
 				<tr>
 					<td># of Anime episodes watched</td>
-					<td><?= $stats['anime-amount-consumed']['units'] ?></td>
+					<td><?= number_format($stats['anime-amount-consumed']['units']) ?></td>
 				</tr>
 				<tr>
 					<td># of Manga chapters read</td>
-					<td><?= $stats['manga-amount-consumed']['units'] ?></td>
+					<td><?= number_format($stats['manga-amount-consumed']['units']) ?></td>
 				</tr>
 				<tr>
 					<td># of Posts</td>
-					<td><?= $attributes['postsCount'] ?></td>
+					<td><?= number_format($attributes['postsCount']) ?></td>
 				</tr>
 				<tr>
 					<td># of Comments</td>
-					<td><?= $attributes['commentsCount'] ?></td>
+					<td><?= number_format($attributes['commentsCount']) ?></td>
 				</tr>
 				<tr>
 					<td># of Media Rated</td>
-					<td><?= $attributes['ratingsCount'] ?></td>
+					<td><?= number_format($attributes['ratingsCount']) ?></td>
 				</tr>
 			</table>
-		</div>
-		<div>
-			<h2>
-				<?= $helper->a(
-					"https://kitsu.io/users/{$attributes['slug']}",
-					$attributes['name'], [
-						'title' => 'View profile on Kitsu'
-					])
-				?>
-			</h2>
-
-			<dl>
-				<dt><h3>About:</h3></dt>
-				<dd><?= $escape->html($attributes['about']) ?></dd>
-			</dl>
-
+		</aside>
+		<article>
 			<?php if ( ! empty($favorites)): ?>
 			<h3>Favorites</h3>
+			<div class="tabs">
+				<?php $i = 0 ?>
 				<?php if ( ! empty($favorites['characters'])): ?>
-					<h4>Characters</h4>
-					<section class="media-wrap">
+					<input type="radio" name="user-favorites" id="user-fav-chars" <?= $i === 0 ? 'checked' : '' ?> />
+					<label for="user-fav-chars">Characters</label>
+					<section class="content full-width media-wrap">
 					<?php foreach($favorites['characters'] as $id => $char): ?>
 						<?php if ( ! empty($char['image']['original'])): ?>
-						<article class="small-character">
+						<article class="character">
 							<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
 							<div class="name"><?= $helper->a($link, $char['canonicalName']); ?></div>
 							<a href="<?= $link ?>">
@@ -102,10 +99,12 @@ use Aviat\AnimeClient\API\Kitsu;
 						<?php endif ?>
 					<?php endforeach ?>
 					</section>
+					<?php $i++; ?>
 				<?php endif ?>
 				<?php if ( ! empty($favorites['anime'])): ?>
-					<h4>Anime</h4>
-					<section class="media-wrap">
+					<input type="radio" name="user-favorites" id="user-fav-anime" <?= $i === 0 ? 'checked' : '' ?> />
+					<label for="user-fav-anime">Anime</label>
+					<section class="content full-width media-wrap">
 						<?php foreach($favorites['anime'] as $anime): ?>
 						<article class="media">
 							<?php
@@ -126,10 +125,12 @@ use Aviat\AnimeClient\API\Kitsu;
 						</article>
 						<?php endforeach ?>
 					</section>
+					<?php $i++; ?>
 				<?php endif ?>
 				<?php if ( ! empty($favorites['manga'])): ?>
-					<h4>Manga</h4>
-					<section class="media-wrap">
+					<input type="radio" name="user-favorites" id="user-fav-manga" <?= $i === 0 ? 'checked' : '' ?> />
+					<label for="user-fav-manga">Manga</label>
+					<section class="content full-width media-wrap">
 						<?php foreach($favorites['manga'] as $manga): ?>
 						<article class="media">
 							<?php
@@ -150,8 +151,10 @@ use Aviat\AnimeClient\API\Kitsu;
 						</article>
 						<?php endforeach ?>
 					</section>
+					<?php $i++; ?>
 				<?php endif ?>
+			</div>
 			<?php endif ?>
-		</div>
+		</article>
 	</section>
 </main>
\ No newline at end of file