Lots of visual updates

This commit is contained in:
Timothy Warren 2018-11-01 22:01:09 -04:00
parent 3244db3438
commit 067c9b4035
31 changed files with 1639 additions and 1068 deletions

View File

@ -15,6 +15,9 @@
*/
use const Aviat\AnimeClient\{
ALPHA_SLUG_PATTERN,
NUM_PATTERN,
SLUG_PATTERN,
DEFAULT_CONTROLLER_METHOD,
DEFAULT_CONTROLLER
};
@ -24,14 +27,13 @@ use const Aviat\AnimeClient\{
//
// Maps paths to controllers and methods
// -------------------------------------------------------------------------
return [
$routes = [
// ---------------------------------------------------------------------
// Anime List Routes
// ---------------------------------------------------------------------
'anime.add.get' => [
'path' => '/anime/add',
'action' => 'addForm',
'verb' => 'get',
],
'anime.add.post' => [
'path' => '/anime/add',
@ -42,7 +44,7 @@ return [
'path' => '/anime/details/{id}',
'action' => 'details',
'tokens' => [
'id' => '[a-z0-9\-]+',
'id' => SLUG_PATTERN,
],
],
'anime.delete' => [
@ -60,7 +62,6 @@ return [
'manga.add.get' => [
'path' => '/manga/add',
'action' => 'addForm',
'verb' => 'get',
],
'manga.add.post' => [
'path' => '/manga/add',
@ -76,7 +77,7 @@ return [
'path' => '/manga/details/{id}',
'action' => 'details',
'tokens' => [
'id' => '[a-z0-9\-]+',
'id' => SLUG_PATTERN,
],
],
// ---------------------------------------------------------------------
@ -89,13 +90,12 @@ return [
'anime.collection.add.get' => [
'path' => '/anime-collection/add',
'action' => 'form',
'params' => [],
],
'anime.collection.edit.get' => [
'path' => '/anime-collection/edit/{id}',
'action' => 'form',
'tokens' => [
'id' => '[0-9]+',
'id' => NUM_PATTERN,
],
],
'anime.collection.add.post' => [
@ -110,10 +110,8 @@ return [
],
'anime.collection.view' => [
'path' => '/anime-collection/view{/view}',
'action' => 'index',
'params' => [],
'tokens' => [
'view' => '[a-z_]+',
'view' => ALPHA_SLUG_PATTERN,
],
],
'anime.collection.delete' => [
@ -131,13 +129,12 @@ return [
'manga.collection.add.get' => [
'path' => '/manga-collection/add',
'action' => 'form',
'params' => [],
],
'manga.collection.edit.get' => [
'path' => '/manga-collection/edit/{id}',
'action' => 'form',
'tokens' => [
'id' => '[0-9]+',
'id' => NUM_PATTERN,
],
],
'manga.collection.add.post' => [
@ -152,10 +149,8 @@ return [
],
'manga.collection.view' => [
'path' => '/manga-collection/view{/view}',
'action' => 'index',
'params' => [],
'tokens' => [
'view' => '[a-z_]+',
'view' => ALPHA_SLUG_PATTERN,
],
],
'manga.collection.delete' => [
@ -168,27 +163,26 @@ return [
// ---------------------------------------------------------------------
'character' => [
'path' => '/character/{slug}',
'action' => 'index',
'params' => [],
'tokens' => [
'slug' => '[a-z0-9\-]+'
'slug' => SLUG_PATTERN
]
],
'person' => [
'path' => '/people/{id}',
'action' => 'index',
'params' => [],
'tokens' => [
'id' => '[a-z0-9\-]+'
'id' => SLUG_PATTERN
]
],
'default_user_info' => [
'path' => '/me',
'action' => 'me',
'controller' => 'user',
],
'user_info' => [
'path' => '/about/{user}',
'action' => 'about',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'get',
'path' => '/user/{username}',
'controller' => 'user',
'tokens' => [
'user' => '.*?'
'username' => '.*?'
]
],
// ---------------------------------------------------------------------
@ -197,66 +191,53 @@ return [
'anilist-redirect' => [
'path' => '/anilist-redirect',
'action' => 'anilistRedirect',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'get',
'controller' => 'user',
],
'anilist-callback' => [
'path' => '/anilist-oauth',
'action' => 'anilistCallback',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'get',
'controller' => 'user',
],
'image_proxy' => [
'path' => '/public/images/{type}/{file}',
'action' => 'images',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'get',
'action' => 'cache',
'controller' => 'images',
'tokens' => [
'type' => '[a-z0-9\-]+',
'type' => SLUG_PATTERN,
'file' => '[a-z0-9\-]+\.[a-z]{3,4}'
]
],
'cache_purge' => [
'path' => '/cache_purge',
'action' => 'clearCache',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'get',
],
'settings' => [
'path' => '/settings',
'action' => 'settings',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'get',
],
'settings-post' => [
'path' => '/settings-save',
'action' => 'settings_post',
'controller' => DEFAULT_CONTROLLER,
'path' => '/settings/update',
'action' => 'update',
'verb' => 'post',
],
'login' => [
'path' => '/login',
'action' => 'login',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'get',
],
'login.post' => [
'path' => '/login',
'action' => 'loginAction',
'controller' => DEFAULT_CONTROLLER,
'verb' => 'post',
],
'logout' => [
'path' => '/logout',
'action' => 'logout',
'controller' => DEFAULT_CONTROLLER,
],
'increment' => [
'path' => '/{controller}/increment',
'action' => 'increment',
'verb' => 'post',
'tokens' => [
'controller' => '[a-z_]+',
'controller' => ALPHA_SLUG_PATTERN,
],
],
'update' => [
@ -264,7 +245,7 @@ return [
'action' => 'update',
'verb' => 'post',
'tokens' => [
'controller' => '[a-z_]+',
'controller' => ALPHA_SLUG_PATTERN,
],
],
'update.post' => [
@ -272,28 +253,46 @@ return [
'action' => 'formUpdate',
'verb' => 'post',
'tokens' => [
'controller' => '[a-z_]+',
'controller' => ALPHA_SLUG_PATTERN,
],
],
'edit' => [
'path' => '/{controller}/edit/{id}/{status}',
'action' => 'edit',
'tokens' => [
'id' => '[0-9a-z_]+',
'id' => SLUG_PATTERN,
'status' => '([a-zA-Z\-_]|%20)+',
],
],
'list' => [
'path' => '/{controller}/{type}{/view}',
'action' => DEFAULT_CONTROLLER_METHOD,
'tokens' => [
'type' => '[a-z_]+',
'view' => '[a-z_]+',
'type' => ALPHA_SLUG_PATTERN,
'view' => ALPHA_SLUG_PATTERN,
],
],
'index_redirect' => [
'path' => '/',
'controller' => DEFAULT_CONTROLLER,
'action' => 'redirectToDefaultRoute',
],
];
$defaultMap = [
'action' => DEFAULT_CONTROLLER_METHOD,
'controller' => DEFAULT_CONTROLLER,
'params' => [],
'verb' => 'get',
];
foreach ($routes as &$route)
{
foreach($defaultMap as $key => $val)
{
if ( ! array_key_exists($key, $route))
{
$route[$key] = $val;
}
}
}
return $routes;

View File

@ -86,6 +86,11 @@ return function ($configArray = []) {
$formHelper->setContainer($container);
return $formHelper;
});
$htmlHelper->set('picture', function() use ($container) {
$pictureHelper = new Helper\Picture();
$pictureHelper->setContainer($container);
return $pictureHelper;
});
return $htmlHelper;
});

View File

@ -6,11 +6,7 @@
<?php if ($auth->isAuthenticated()): ?>
<button title="Increment episode count" class="plus_one" hidden>+1 Episode</button>
<?php endif ?>
<picture>
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$item['anime']['id']}.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$item['anime']['id']}.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/anime/{$item['anime']['id']}.jpg") ?>" alt="" />
</picture>
<?= $helper->picture("images/anime/{$item['anime']['id']}.webp") ?>
<div class="name">
<a href="<?= $url->generate('anime.details', ['id' => $item['anime']['slug']]); ?>">

View File

@ -1,13 +1,11 @@
<?php use function Aviat\AnimeClient\getLocalImg; ?>
<main class="details fixed">
<section class="flex">
<aside class="info">
<picture class="cover">
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$show_data['id']}-original.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$show_data['id']}-original.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/anime/{$show_data['id']}-original.jpg") ?>" alt="" />
</picture>
<br />
<?= $helper->picture("images/anime/{$show_data['id']}-original.webp") ?>
<br />
<table class="media_details">
<tr>
<td class="align_right">Airing Status</td>
@ -30,7 +28,8 @@
<?php if ( ! empty($show_data['age_rating'])): ?>
<tr>
<td>Age Rating</td>
<td><abbr title="<?= $show_data['age_rating_guide'] ?>"><?= $show_data['age_rating'] ?></abbr></td>
<td><abbr title="<?= $show_data['age_rating_guide'] ?>"><?= $show_data['age_rating'] ?></abbr>
</td>
</tr>
<?php endif ?>
<tr>
@ -42,7 +41,7 @@
</table>
</aside>
<article class="text">
<h2><a rel="external" href="<?= $show_data['url'] ?>"><?= $show_data['title'] ?></a></h2>
<h2 class="toph"><a rel="external" href="<?= $show_data['url'] ?>"><?= $show_data['title'] ?></a></h2>
<?php foreach ($show_data['titles'] as $title): ?>
<h3><?= $title ?></h3>
<?php endforeach ?>
@ -64,12 +63,23 @@
<tr>
<td class="align_left">
<?php if ($link['meta']['link'] !== FALSE): ?>
<a 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" />
<a
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"
/>
&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" />
<img
class="streaming-logo" width="50" height="50"
src="<?= $urlGenerator->assetUrl('images', $link['meta']['image']) ?>"
alt="<?= $link['meta']['name'] ?> logo"
/>
&nbsp;&nbsp;<?= $link['meta']['name'] ?>
<?php endif ?>
</td>
@ -83,77 +93,76 @@
<?php if ( ! empty($show_data['trailer_id'])): ?>
<hr />
<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></iframe>
<iframe
width="560" height="315" src="https://www.youtube.com/embed/<?= $show_data['trailer_id'] ?>"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
></iframe>
<?php endif ?>
</article>
</section>
<?php /* if(count($characters) > 0 && count($staff) > 0): ?>
<div class="tabs">
<?php $i = 0; ?>
</div>
<?php endif */ ?>
<?php if (count($characters) > 0): ?>
<br />
<hr />
<section>
<h2>Characters</h2>
<div class="tabs">
<?php $i = 0 ?>
<?php foreach ($characters as $role => $list): ?>
<h3><?= ucfirst($role) ?></h3>
<section class="media-wrap flex flex-wrap flex-justify-start">
<input
type="radio" name="character-types"
id="character-types-<?= $i ?>" <?= ($i === 0) ? 'checked' : '' ?> />
<label for="character-types-<?= $i ?>"><?= ucfirst($role) ?></label>
<section class="content media-wrap flex flex-wrap flex-justify-start">
<?php foreach ($list as $id => $char): ?>
<?php if ( ! empty($char['image']['original'])): ?>
<article class="character">
<article class="<?= $role === 'supporting' ? 'small_' : '' ?>character">
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<div class="name">
<?= $helper->a($link, $char['name']); ?>
</div>
<a href="<?= $link ?>">
<picture>
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>" alt="" />
</picture>
<?= $helper->picture("images/characters/{$id}.webp") ?>
</a>
</article>
<?php endif ?>
<?php endforeach ?>
</section>
<?php $i++; ?>
<?php endforeach ?>
</div>
</section>
<?php endif ?>
<?php if (count($staff) > 0): ?>
<br />
<hr />
<?php //dump($staff); ?>
<section>
<h2>Staff</h2>
<div class="vertical-tabs">
<?php $i = 0; ?>
<?php foreach ($staff as $role => $people): ?>
<h3><?= $role ?></h3>
<section class='media-wrap flex flex-wrap flex-justify-start'>
<div class="tab">
<input type="radio" name="staff-roles" id="staff-role<?= $i ?>" <?= $i === 0 ? 'checked' : '' ?> />
<label for="staff-role<?= $i ?>"><?= $role ?></label>
<section class='content media-wrap flex flex-wrap flex-justify-start'>
<?php foreach ($people as $pid => $person): ?>
<article class='character person'>
<?php $link = $url->generate('person', ['id' => $pid]) ?>
<article class='character small_person'>
<?php $link = $url->generate('person', ['id' => $person['id']]) ?>
<div class="name">
<a href="<?= $link ?>">
<?= $person['name'] ?>
</a>
</div>
<a href="<?= $link ?>">
<picture>
<source
srcset="<?= $urlGenerator->assetUrl("images/people/{$pid}.webp") ?>"
type="image/webp"
>
<source
srcset="<?= $urlGenerator->assetUrl("images/people/{$pid}.jpg") ?>"
type="image/jpeg"
>
<img src="<?= $urlGenerator->assetUrl("images/people/{$pid}.jpg") ?>" alt="" />
</picture>
<?= $helper->picture(getLocalImg($person['image']['original'] ?? NULL)) ?>
</a>
</article>
<?php endforeach ?>
</section>
</div>
<?php $i++; ?>
<?php endforeach ?>
</div>
</section>
<?php endif ?>
</main>

View File

@ -17,7 +17,7 @@
<tr>
<td rowspan="9">
<article class="media">
<?= $helper->img($urlGenerator->assetUrl('images/anime', "{$item['anime']['id']}.jpg")) ?>
<?= $helper->picture("images/anime/{$item['anime']['id']}.webp") ?>
</article>
</td>
</tr>
@ -89,11 +89,9 @@
</tbody>
</table>
</form>
<br />
<br />
<form class="js-delete" action="<?= $url->generate('anime.delete') ?>" method="post">
<fieldset>
<legend>Danger Zone</legend>
<form class="js-delete" action="<?= $url->generate('anime.delete') ?>" method="post">
<table class="form invisible">
<tbody>
<tr>
@ -110,7 +108,7 @@
</tr>
</tbody>
</table>
</form>
</fieldset>
</form>
</main>
<?php endif ?>

View File

@ -1,240 +0,0 @@
<?php
use function Aviat\AnimeClient\getLocalImg;
use Aviat\AnimeClient\API\Kitsu;
?>
<main class="details fixed">
<section class="flex flex-no-wrap">
<div>
<picture>
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$data[0]['id']}-original.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$data[0]['id']}-original.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/characters/{$data[0]['id']}-original.jpg") ?>" alt="" />
</picture>
<?php if ( ! empty($data[0]['attributes']['otherNames'])): ?>
<h3>Nicknames / Other names</h3>
<?php foreach ($data[0]['attributes']['otherNames'] as $name): ?>
<h4><?= $name ?></h4>
<?php endforeach ?>
<?php endif ?>
</div>
<div>
<h2><?= $data['name'] ?></h2>
<?php foreach ($data['names'] as $name): ?>
<h3><?= $name ?></h3>
<?php endforeach ?>
<hr />
<p class="description"><?= $data[0]['attributes']['description'] ?></p>
</div>
</section>
<?php if (array_key_exists('anime', $data['included']) || array_key_exists('manga', $data['included'])): ?>
<h3>Media</h3>
<div class="tabs">
<?php if (array_key_exists('anime', $data['included'])): ?>
<input checked="checked" type="radio" id="media-anime" name="media-tabs" />
<label for="media-anime"><h4> Anime </h4></label>
<section class="align_left media-wrap content">
<?php foreach($data['included']['anime'] as $id => $anime): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $anime['attributes']['slug']]);
$titles = Kitsu::filterTitles($anime['attributes']);
?>
<a href="<?= $link ?>">
<picture>
<source
srcset="<?= $urlGenerator->assetUrl("images/anime/{$id}.webp") ?>"
type="image/webp"
>
<source
srcset="<?= $urlGenerator->assetUrl("images/anime/{$id}.jpg") ?>"
type="image/jpeg"
>
<img
src="<?= $urlGenerator->assetUrl("images/anime/{$id}.jpg") ?>"
alt=""
/>
</picture>
</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 (array_key_exists('manga', $data['included'])): ?>
<input type="radio" id="media-manga" name="media-tabs" />
<label for="media-manga"><h4>Manga</h4></label>
<section class="align_left media-wrap content">
<?php foreach($data['included']['manga'] as $id => $manga): ?>
<article class="media">
<?php
$link = $url->generate('manga.details', ['id' => $manga['attributes']['slug']]);
$titles = Kitsu::filterTitles($manga['attributes']);
?>
<a href="<?= $link ?>">
<img src="<?= $urlGenerator->assetUrl("images/manga/{$id}.jpg") ?>" 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 ?>
</div>
<?php endif ?>
<section>
<?php if ($castCount > 0): ?>
<h3>Castings</h3>
<?php
$vas = $castings['Voice Actor'];
unset($castings['Voice Actor']);
ksort($vas)
?>
<?php if ( ! empty($vas)): ?>
<h4>Voice Actors</h4>
<div class="tabs">
<?php $i = 0; ?>
<?php foreach($vas as $language => $casting): ?>
<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="character-va<?= $i ?>"
name="character-vas"
/>
<label for="character-va<?= $i ?>"><h5><?= $language ?></h5></label>
<section class="content">
<table style='width:100%'>
<tr>
<th>Cast Member</th>
<th>Series</th>
</tr>
<?php foreach($casting as $cid => $c): ?>
<tr>
<td style="width:229px">
<article class="character">
<?php
$link = $url->generate('person', ['id' => $c['person']['id']]);
?>
<a href="<?= $link ?>">
<img
src="<?= $urlGenerator->assetUrl(getLocalImg($c['person']['image'])) ?>"
alt=""
/>
<div class="name">
<?= $c['person']['name'] ?>
</div>
</a>
</article>
</td>
<td>
<section class="align_left media-wrap-flex">
<?php foreach ($c['series'] as $series): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $series['attributes']['slug']]);
$titles = Kitsu::filterTitles($series['attributes']);
?>
<a href="<?= $link ?>">
<img
src="<?= $urlGenerator->assetUrl(getLocalImg($series['attributes']['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>
</td>
</tr>
<?php endforeach ?>
</table>
</section>
<?php $i++ ?>
<?php endforeach ?>
</div>
<?php endif ?>
<?php foreach($castings as $role => $entries): ?>
<h4><?= $role ?></h4>
<?php foreach($entries as $language => $casting): ?>
<h5><?= $language ?></h5>
<table class="min-table">
<tr>
<th>Cast Member</th>
<th>Series</th>
</tr>
<?php foreach($casting as $cid => $c):?>
<tr>
<td style="width:229px">
<article class="character">
<?php
$link = $url->generate('person', ['id' => $c['person']['id']]);
?>
<a href="<?= $link ?>">
<img src="<?= $urlGenerator->assetUrl(getLocalImg($c['person']['image'])) ?>" alt="" />
<div class="name">
<?= $c['person']['name'] ?>
</div>
</a>
</article>
</td>
<td>
<section class="align_left media-wrap">
<?php foreach($c['series'] as $series): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $series['attributes']['slug']]);
$titles = Kitsu::filterTitles($series['attributes']);
?>
<a href="<?= $link ?>">
<img src="<?= $urlGenerator->assetUrl(getLocalImg($series['attributes']['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>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php endforeach ?>
<?php endforeach ?>
<?php endif ?>
</section>
</main>

View File

@ -0,0 +1,221 @@
<?php
use function Aviat\AnimeClient\getLocalImg;
use Aviat\AnimeClient\API\Kitsu;
?>
<main class="details fixed">
<section class="flex flex-no-wrap">
<div>
<?= $helper->picture("images/characters/{$data[0]['id']}-original.webp") ?>
<?php if ( ! empty($data[0]['attributes']['otherNames'])): ?>
<h3>Nicknames / Other names</h3>
<?php foreach ($data[0]['attributes']['otherNames'] as $name): ?>
<h4><?= $name ?></h4>
<?php endforeach ?>
<?php endif ?>
</div>
<div>
<h2 class="toph"><?= $data['name'] ?></h2>
<?php foreach ($data['names'] as $name): ?>
<h3><?= $name ?></h3>
<?php endforeach ?>
<hr />
<p class="description"><?= $data[0]['attributes']['description'] ?></p>
</div>
</section>
<?php if (array_key_exists('anime', $data['included']) || array_key_exists('manga', $data['included'])): ?>
<h3>Media</h3>
<div class="tabs">
<?php if (array_key_exists('anime', $data['included'])): ?>
<input checked="checked" type="radio" id="media-anime" name="media-tabs" />
<label for="media-anime">Anime</label>
<section class="media-wrap content">
<?php foreach ($data['included']['anime'] as $id => $anime): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $anime['attributes']['slug']]);
$titles = Kitsu::filterTitles($anime['attributes']);
?>
<a href="<?= $link ?>">
<?= $helper->picture("images/anime/{$id}.webp") ?>
</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 (array_key_exists('manga', $data['included'])): ?>
<input type="radio" id="media-manga" name="media-tabs" />
<label for="media-manga">Manga</label>
<section class="media-wrap content">
<?php foreach ($data['included']['manga'] as $id => $manga): ?>
<article class="media">
<?php
$link = $url->generate('manga.details', ['id' => $manga['attributes']['slug']]);
$titles = Kitsu::filterTitles($manga['attributes']);
?>
<a href="<?= $link ?>">
<?= $helper->picture("images/manga/{$id}.webp") ?>
</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 ?>
</div>
<?php endif ?>
<section>
<?php if ($castCount > 0): ?>
<h3>Castings</h3>
<?php
$vas = $castings['Voice Actor'];
unset($castings['Voice Actor']);
ksort($vas)
?>
<?php if ( ! empty($vas)): ?>
<h4>Voice Actors</h4>
<div class="tabs">
<?php $i = 0; ?>
<?php foreach ($vas as $language => $casting): ?>
<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="character-va<?= $i ?>"
name="character-vas"
/>
<label for="character-va<?= $i ?>"><?= $language ?></label>
<section class="content">
<table class="borderless max-table">
<tr>
<th>Cast Member</th>
<th>Series</th>
</tr>
<?php foreach ($casting as $cid => $c): ?>
<tr>
<td>
<article class="character">
<?php
$link = $url->generate('person', ['id' => $c['person']['id']]);
?>
<a href="<?= $link ?>">
<?= $helper->picture(getLocalImg($c['person']['image'])) ?>
<div class="name">
<?= $c['person']['name'] ?>
</div>
</a>
</article>
</td>
<td width="75%">
<section class="align_left media-wrap-flex">
<?php foreach ($c['series'] as $series): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $series['attributes']['slug']]);
$titles = Kitsu::filterTitles($series['attributes']);
?>
<a href="<?= $link ?>">
<?= $helper->picture(getLocalImg($series['attributes']['posterImage']['small'], TRUE)) ?>
</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>
</td>
</tr>
<?php endforeach ?>
</table>
</section>
<?php $i++ ?>
<?php endforeach ?>
</div>
<?php endif ?>
<?php foreach ($castings as $role => $entries): ?>
<h4><?= $role ?></h4>
<?php foreach ($entries as $language => $casting): ?>
<h5><?= $language ?></h5>
<table class="min-table">
<tr>
<th>Cast Member</th>
<th>Series</th>
</tr>
<?php foreach ($casting as $cid => $c): ?>
<tr>
<td style="width:229px">
<article class="character">
<?php
$link = $url->generate('person', ['id' => $c['person']['id']]);
?>
<a href="<?= $link ?>">
<?= $helper->picture(getLocalImg($c['person']['image'], TRUE)) ?>
<div class="name">
<?= $c['person']['name'] ?>
</div>
</a>
</article>
</td>
<td>
<section class="align_left media-wrap">
<?php foreach ($c['series'] as $series): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $series['attributes']['slug']]);
$titles = Kitsu::filterTitles($series['attributes']);
?>
<a href="<?= $link ?>">
<?= $helper->picture(getLocalImg($series['attributes']['posterImage']['small'], TRUE)) ?>
</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>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php endforeach ?>
<?php endforeach ?>
<?php endif ?>
</section>
</main>

View File

@ -1,10 +1,5 @@
<article class="media" id="a-<?= $item['hummingbird_id'] ?>">
<picture>
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/anime/{$item['hummingbird_id']}.jpg") ?>" alt="<?= $item['title'] ?> cover image" />
</picture>
<?= $helper->picture("images/anime/{$item['hummingbird_id']}.webp") ?>
<div class="name">
<a href="<?= $url->generate('anime.details', ['id' => $item['slug']]) ?>">
<?= $item['title'] ?>

View File

@ -10,7 +10,7 @@
<?php foreach ($sections as $name => $items): ?>
<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="collection-tab-<?= $i ?>" name="collection-tabs" />
<label for="collection-tab-<?= $i ?>"><h2><?= $name ?></h2></label>
<div class="content">
<div class="content full-height">
<section class="media-wrap">
<?php foreach ($items as $item): ?>
<?php include __DIR__ . '/cover-item.php'; ?>

View File

@ -11,8 +11,8 @@
<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="collection-tab-<?= $i ?>"
name="collection-tabs"/>
<label for="collection-tab-<?= $i ?>"><h2><?= $name ?></h2></label>
<div class="content">
<table>
<div class="content full-height">
<table class="full_width">
<thead>
<tr>
<?php if ($auth->isAuthenticated()): ?>

View File

@ -51,7 +51,7 @@ $hasManga = stripos($_SERVER['REQUEST_URI'], 'manga') !== FALSE;
</span>
<span class="flex-no-wrap small-font">[<?= $helper->a(
$url->generate('user_info', ['user' => 'me']),
$url->generate('default_user_info'),
'About '. $config->get('whose_list')
) ?>]</span>

View File

@ -23,11 +23,7 @@
<?php /* <button class="plus_one_volume">+1 Volume</button> */ ?>
</div>
<?php endif ?>
<picture>
<source srcset="<?= $urlGenerator->assetUrl("images/manga/{$item['manga']['id']}.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/manga/{$item['manga']['id']}.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/manga/{$item['manga']['id']}.jpg") ?>" alt="" />
</picture>
<?= $helper->picture("images/manga/{$item['manga']['id']}.webp") ?>
<div class="name">
<a href="<?= $url->generate('manga.details', ['id' => $item['manga']['slug']]) ?>">
<?= $escape->html($item['manga']['title']) ?>

View File

@ -1,14 +1,11 @@
<main class="details fixed">
<section class="flex flex-no-wrap">
<aside class="info">
<picture class="cover">
<source srcset="<?= $urlGenerator->assetUrl("images/manga/{$data['id']}-original.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/manga/{$data['id']}-original.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/manga/{$data['id']}-original.jpg") ?>" alt="" />
</picture>
<?= $helper->picture("images/manga/{$data['id']}-original.webp", 'jpg', ['class' => 'cover']) ?>
<br />
<br />
<table>
<table class="media_details">
<tr>
<td>Manga Type</td>
<td><?= ucfirst($data['manga_type']) ?></td>
@ -30,7 +27,7 @@
</table>
</aside>
<article class="text">
<h2><a rel="external" href="<?= $data['url'] ?>"><?= $data['title'] ?></a></h2>
<h2 class="toph"><a rel="external" href="<?= $data['url'] ?>"><?= $data['title'] ?></a></h2>
<?php foreach ($data['titles'] as $title): ?>
<h3><?= $title ?></h3>
<?php endforeach ?>
@ -41,47 +38,45 @@
</section>
<?php if (count($characters) > 0): ?>
<br />
<hr />
<h2>Characters</h2>
<div class="tabs">
<?php $i = 0 ?>
<?php foreach ($characters as $role => $list): ?>
<h3><?= ucfirst($role) ?></h3>
<section class="media-wrap flex flex-wrap flex-justify-start">
<input
type="radio" name="character-role-tabs"
id="character-tabs<?= $i ?>" <?= $i === 0 ? 'checked' : '' ?> />
<label for="character-tabs<?= $i ?>"><?= ucfirst($role) ?></label>
<section class="content media-wrap flex flex-wrap flex-justify-start">
<?php foreach ($list as $id => $char): ?>
<?php if ( ! empty($char['image']['original'])): ?>
<article class="character">
<article class="<?= $role === 'supporting' ? 'small_' : '' ?>character">
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<div class="name">
<?= $helper->a($link, $char['name']); ?>
</div>
<a href="<?= $link ?>">
<picture>
<source
srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.webp") ?>"
type="image/webp"
>
<source
srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>"
type="image/jpeg"
>
<img src="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>" alt="" />
</picture>
<?= $helper->picture("images/characters/{$id}.webp") ?>
</a>
</article>
<?php endif ?>
<?php endforeach ?>
</section>
<?php $i++ ?>
<?php endforeach ?>
</div>
<?php endif ?>
<?php if (count($staff) > 0): ?>
<br />
<hr />
<h2>Staff</h2>
<div class="vertical-tabs">
<?php $i = 0 ?>
<?php foreach ($staff as $role => $people): ?>
<h3><?= $role ?></h3>
<section class='media-wrap flex flex-wrap flex-justify-start'>
<div class="tab">
<input
type="radio" name="staff-roles" id="staff-role<?= $i ?>" <?= $i === 0 ? 'checked' : '' ?> />
<label for="staff-role<?= $i ?>"><?= $role ?></label>
<section class='content media-wrap flex flex-wrap flex-justify-start'>
<?php foreach ($people as $pid => $person): ?>
<article class='character person'>
<?php $link = $url->generate('person', ['id' => $pid]) ?>
@ -91,21 +86,14 @@
</a>
</div>
<a href="<?= $link ?>">
<picture>
<source
srcset="<?= $urlGenerator->assetUrl("images/people/{$pid}.webp") ?>"
type="image/webp"
>
<source
srcset="<?= $urlGenerator->assetUrl("images/people/{$pid}.jpg") ?>"
type="image/jpeg"
>
<img src="<?= $urlGenerator->assetUrl("images/people/{$pid}.jpg") ?>" alt="" />
</picture>
<?= $helper->picture("images/people/{$pid}.webp") ?>
</a>
</article>
<?php endforeach ?>
</section>
</div>
<?php $i++ ?>
<?php endforeach ?>
</div>
<?php endif ?>
</main>

View File

@ -2,14 +2,19 @@
use function Aviat\AnimeClient\getLocalImg;
use Aviat\AnimeClient\API\Kitsu;
?>
<?php foreach ($entries as $type => $casting): ?>
<?php if($type === 'characters'): ?>
<table class="min-table">
<h3>Voice Acting Roles</h3>
<div class="tabs">
<?php $i = 0; ?>
<?php foreach($characters as $role => $characterList): ?>
<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" name="character-type-tabs" id="character-type-<?= $i ?>" />
<label for="character-type-<?= $i ?>"><h5><?= ucfirst($role) ?></h5></label>
<section class="content">
<table class="borderless max-table">
<tr>
<th>Character</th>
<th>Series</th>
</tr>
<?php foreach ($casting as $cid => $character): ?>
<?php foreach ($characterList as $cid => $character): ?>
<tr>
<td style="width:229px">
<article class="character">
@ -18,10 +23,11 @@ use Aviat\AnimeClient\API\Kitsu;
?>
<a href="<?= $link ?>">
<?php $imgPath = ($character['character']['image'] === NULL)
? $urlGenerator->assetUrl('images/characters/empty.png')
: $urlGenerator->assetUrl(getLocalImg($character['character']['image']['original']));
? 'images/characters/empty.png'
: getLocalImg($character['character']['image']['original']);
echo $helper->picture($imgPath);
?>
<img src="<?= $imgPath ?>" alt="" />
<div class="name">
<?= $character['character']['canonicalName'] ?>
</div>
@ -37,10 +43,7 @@ use Aviat\AnimeClient\API\Kitsu;
$titles = Kitsu::filterTitles($series);
?>
<a href="<?= $link ?>">
<img
src="<?= $urlGenerator->assetUrl("images/anime/{$sid}.jpg") ?>"
width="220" alt=""
/>
<?= $helper->picture("images/anime/{$sid}.webp") ?>
</a>
<div class="name">
<a href="<?= $link ?>">
@ -58,5 +61,7 @@ use Aviat\AnimeClient\API\Kitsu;
</tr>
<?php endforeach; ?>
</table>
<?php endif ?>
</section>
<?php $i++ ?>
<?php endforeach ?>
</div>

View File

@ -0,0 +1,67 @@
<?php
use Aviat\AnimeClient\API\Kitsu;
?>
<main class="details fixed">
<section class="flex flex-no-wrap">
<div>
<?= $helper->picture("images/people/{$data['id']}-original.webp", 'jpg', ['class' => 'cover' ]) ?>
</div>
<div>
<h2 class="toph"><?= $data['attributes']['name'] ?></h2>
</div>
</section>
<?php if ( ! empty($staff)): ?>
<section>
<h3>Castings</h3>
<div class="vertical-tabs">
<?php $i = 0 ?>
<?php foreach ($staff as $role => $entries): ?>
<div class="tab">
<input
type="radio" name="staff-roles" id="staff-role<?= $i ?>" <?= $i === 0 ? 'checked' : '' ?> />
<label for="staff-role<?= $i ?>"><?= $role ?></label>
<?php foreach ($entries as $type => $casting): ?>
<?php if ($type === 'characters') continue; ?>
<?php if ( ! (empty($entries['manga']) || empty($entries['anime']))): ?>
<h4><?= ucfirst($type) ?></h4>
<?php endif ?>
<section class="content">
<?php foreach ($casting as $sid => $series): ?>
<article class="media">
<?php
$mediaType = (in_array($type, ['anime', 'manga'])) ? $type : 'anime';
$link = $url->generate("{$mediaType}.details", ['id' => $series['slug']]);
$titles = Kitsu::filterTitles($series);
?>
<a href="<?= $link ?>">
<?= $helper->picture("images/{$type}/{$sid}.webp") ?>
</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 endforeach ?>
</div>
<?php $i++ ?>
<?php endforeach ?>
</div>
</section>
<?php endif ?>
<?php if ( ! (empty($characters['main']) || empty($characters['supporting']))): ?>
<section>
<?php include 'character-mapping.php' ?>
</section>
<?php endif ?>
</main>

View File

@ -1,78 +0,0 @@
<?php
use Aviat\AnimeClient\API\Kitsu;
?>
<main class="details fixed">
<section class="flex flex-no-wrap">
<div>
<picture class="cover">
<source
srcset="<?= $urlGenerator->assetUrl("images/people/{$data['id']}-original.webp") ?>"
type="image/webp"
>
<source
srcset="<?= $urlGenerator->assetUrl("images/people/{$data['id']}-original.jpg") ?>"
type="image/jpeg"
>
<img src="<?= $urlGenerator->assetUrl("images/people/{$data['id']}-original.jpg") ?>" alt="" />
</picture>
</div>
<div>
<h2><?= $data['attributes']['name'] ?></h2>
</div>
</section>
<section>
<?php if ($castCount > 0): ?>
<h3>Castings</h3>
<?php foreach ($castings as $role => $entries): ?>
<h4><?= $role ?></h4>
<?php if($role === 'Voice Actor'): ?>
<?php include 'character-mapping.php' ?>
<?php else: ?>
<?php foreach ($entries as $type => $casting): ?>
<?php if ($type === 'characters') continue; ?>
<?php if ( ! empty($entries['manga'])): ?>
<h5><?= ucfirst($type) ?></h5>
<?php endif ?>
<section class="align_left media-wrap">
<?php foreach ($casting as $sid => $series): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $series['attributes']['slug']]);
$titles = Kitsu::filterTitles($series['attributes']);
?>
<a href="<?= $link ?>">
<picture>
<source
srcset="<?= $urlGenerator->assetUrl("images/{$type}/{$sid}.webp") ?>"
type="image/webp"
/>
<source
srcset="<?= $urlGenerator->assetUrl("images/{$type}/{$sid}.jpg") ?>"
type="image/jpeg"
/>
<img
src="<?= $urlGenerator->assetUrl("images/{$type}/{$sid}.jpg") ?>"
width="220" alt=""
/>
</picture>
</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>
<br />
<?php endforeach ?>
<?php endif ?>
<?php endforeach ?>
<?php endif ?>
</section>
</main>

View File

@ -48,7 +48,6 @@ $nestedPrefix = 'config';
'Update Access Token'
) ?>
<?php endif ?>
<?php endif ?>
</section>
<?php $i++; ?>

View File

@ -7,9 +7,11 @@ use Aviat\AnimeClient\API\Kitsu;
<div>
<center>
<?php
$avatar = getLocalImg($attributes['avatar']['original']);
$avatar = $urlGenerator->assetUrl(
getLocalImg($attributes['avatar']['original'], FALSE)
);
echo $helper->img($avatar, ['alt' => '']);
?>
<img src="<?= $urlGenerator->assetUrl($avatar) ?>" alt="" />
</center>
<br />
<br />
@ -46,6 +48,14 @@ use Aviat\AnimeClient\API\Kitsu;
<td>Time spent watching anime:</td>
<td><?= $timeOnAnime ?></td>
</tr>
<tr>
<td># of Anime episodes watched</td>
<td><?= $stats['anime-amount-consumed']['units'] ?></td>
</tr>
<tr>
<td># of Manga chapters read</td>
<td><?= $stats['manga-amount-consumed']['units'] ?></td>
</tr>
<tr>
<td># of Posts</td>
<td><?= $attributes['postsCount'] ?></td>
@ -62,12 +72,12 @@ use Aviat\AnimeClient\API\Kitsu;
</div>
<div>
<h2>
<a
title='View profile on Kisu'
href="https://kitsu.io/users/<?= $attributes['slug'] ?>"
>
<?= $attributes['name'] ?>
</a>
<?= $helper->a(
"https://kitsu.io/users/{$attributes['slug']}",
$attributes['name'], [
'title' => 'View profile on Kitsu'
])
?>
</h2>
<dl>
@ -86,11 +96,7 @@ use Aviat\AnimeClient\API\Kitsu;
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<div class="name"><?= $helper->a($link, $char['canonicalName']); ?></div>
<a href="<?= $link ?>">
<picture>
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$char['id']}.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$char['id']}.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/characters/{$char['id']}.jpg") ?>" alt="" />
</picture>
<?= $helper->picture("images/characters/{$char['id']}.webp") ?>
</a>
</article>
<?php endif ?>
@ -107,11 +113,7 @@ use Aviat\AnimeClient\API\Kitsu;
$titles = Kitsu::filterTitles($anime);
?>
<a href="<?= $link ?>">
<picture width="220">
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$anime['id']}.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/anime/{$anime['id']}.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/anime/{$anime['id']}.jpg") ?>" width="220" alt="" />
</picture>
<?= $helper->picture("images/anime/{$anime['id']}.webp") ?>
</a>
<div class="name">
<a href="<?= $link ?>">
@ -135,11 +137,7 @@ use Aviat\AnimeClient\API\Kitsu;
$titles = Kitsu::filterTitles($manga);
?>
<a href="<?= $link ?>">
<picture width="220">
<source srcset="<?= $urlGenerator->assetUrl("images/manga/{$manga['id']}.webp") ?>" type="image/webp">
<source srcset="<?= $urlGenerator->assetUrl("images/manga/{$manga['id']}.jpg") ?>" type="image/jpeg">
<img src="<?= $urlGenerator->assetUrl("images/manga/{$manga['id']}.jpg") ?>" width="220" alt="" />
</picture>
<?= $helper->picture("images/manga/{$manga['id']}.webp") ?>
</a>
<div class="name">
<a href="<?= $link ?>">

File diff suppressed because one or more lines are too long

View File

@ -30,6 +30,7 @@ button {
table {
/* min-width: 85%; */
box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
margin: 0 auto;
}
@ -124,6 +125,7 @@ a:hover, a:active {
}
.flex {
display: inline-block;
display: flex
}
@ -156,12 +158,13 @@ a:hover, a:active {
}
.media-wrap {
text-align: left;
text-align: center;
margin: 0 auto;
position: relative;
}
.media-wrap-flex {
display: inline-block;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
@ -202,6 +205,14 @@ td .media-wrap-flex {
width: 100%;
}
.full-height {
max-height: none;
}
.toph {
margin-top: 0;
}
/* -----------------------------------------------------------------------------
Main Nav
------------------------------------------------------------------------------*/
@ -330,10 +341,19 @@ td .media-wrap-flex {
background: inherit;
}
.invisible tr, .invisible td, .invisible th {
.borderless,
.borderless tr,
.borderless td,
.borderless th,
.invisible tr,
.invisible td,
.invisible th {
box-shadow: none;
border: 0;
}
/* -----------------------------------------------------------------------------
Message boxes
------------------------------------------------------------------------------*/
@ -410,10 +430,7 @@ td .media-wrap-flex {
height: 311px;
margin: var(--normal-padding);
z-index: 0;
}
.small_character {
background: rgba(0,0,0,0.15);
}
.details picture.cover,
@ -428,10 +445,6 @@ picture.cover {
width: 100%;
}
.small_character {
}
.media .edit_buttons > button {
margin: 0.5em auto;
}
@ -561,6 +574,7 @@ picture.cover {
.anime .row, .manga .row {
width: 100%;
display: inline-block;
display: flex;
align-content: space-around;
justify-content: space-around;
@ -575,6 +589,7 @@ picture.cover {
.anime .row > div, .manga .row > div {
font-size: 0.8em;
display: inline-block;
display: flex-item;
align-self: center;
text-align: center;
@ -719,12 +734,6 @@ picture.cover {
.details .cover {
display: block;
width: 284px;
/* height: 402px; */
}
.details h2 {
margin-top: 0;
}
.details .flex > * {
@ -749,6 +758,11 @@ picture.cover {
text-align: left;
}
.details a h1,
.details a h2 {
margin-top: 0;
}
.character,
.small_character,
.person {
@ -765,6 +779,11 @@ picture.cover {
height: 338px;
}
.small_person {
width: 200px;
height: 300px;
}
.character a {
height: 350px;
}
@ -808,11 +827,22 @@ picture.cover {
max-height: 338px;
}
.small_person img,
.small_person picture {
max-height: 300px;
max-width: 200px;
}
.min-table {
min-width: 0;
margin-left: 0;
}
.max-table {
min-width:100%;
margin: 0;
}
aside.info {
max-width: 390px;
}
@ -930,6 +960,7 @@ aside.info picture, aside.info img {
CSS Tabs
-----------------------------------------------------------------------------*/
.tabs {
display: inline-block;
display: flex;
flex-wrap: wrap;
background: #efefef;
@ -978,13 +1009,22 @@ CSS Tabs
border: 1px solid #e5e5e5;
border-top: 0;
display: block;
padding: 20px 30px 30px;
padding: 15px;
background: #fff;
width: 100%;
margin: 0 auto;
overflow: auto;
/* text-align: center; */
}
.tabs .content {
display: none;
max-height: 950px;
}
.tabs .content.full-height {
max-height: none;
}
@media (min-width: 600px) {
@ -997,6 +1037,78 @@ CSS Tabs
}
}
/* ---------------------------------------------------------------------------
Vertical Tabs
----------------------------------------------------------------------------*/
.vertical-tabs {
border: 1px solid #e5e5e5;
box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
margin: 0 auto;
position: relative;
width: 100%;
}
.vertical-tabs input[type="radio"] {
display: none;
}
.vertical-tabs .tab {
align-items: center;
display: inline-block;
display: flex;
flex-wrap: nowrap;
}
.vertical-tabs .tab label {
align-items: center;
background: #e5e5e5;
border: 1px solid #e5e5e5;
color: #7f7f7f;
cursor: pointer;
font-size: 18px;
font-weight: bold;
padding: 0 20px;
width: 28%;
}
.vertical-tabs .tab label:hover {
background: #d8d8d8;
}
.vertical-tabs .tab label:active {
background: #ccc;
}
.vertical-tabs .tab .content {
display: none;
border: 1px solid #e5e5e5;
border-left: 0;
border-right: 0;
max-height: 950px;
overflow: auto;
}
.vertical-tabs .tab .content.full-height {
max-height: none;
}
.vertical-tabs [type=radio]:checked + label {
border: 0;
background: #fff;
color: #000;
width: 38%;
}
.vertical-tabs [type=radio]:focus + label {
box-shadow: inset 0px 0px 0px 3px #2aa1c0;
z-index: 1;
}
.vertical-tabs [type=radio]:checked ~ .content {
display: block;
}
/* ----------------------------------------------------------------------------
Settings Form
-----------------------------------------------------------------------------*/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 242 B

After

Width:  |  Height:  |  Size: 807 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -6,11 +6,11 @@ evt,listener)});sel.addEventListener(event,listener,false)}function delegateEven
listener)})};function ajaxSerialize(data){var pairs=[];Object.keys(data).forEach(function(name){var value=data[name].toString();name=encodeURIComponent(name);value=encodeURIComponent(value);pairs.push(name+"\x3d"+value)});return pairs.join("\x26")}AnimeClient.ajax=function(url,config){var defaultConfig={data:{},type:"GET",dataType:"",success:AnimeClient.noop,mimeType:"application/x-www-form-urlencoded",error:AnimeClient.noop};config=Object.assign({},defaultConfig,config);var request=new XMLHttpRequest;
var method=String(config.type).toUpperCase();if(method==="GET")url+=url.match(/\?/)?ajaxSerialize(config.data):"?"+ajaxSerialize(config.data);request.open(method,url);request.onreadystatechange=function(){if(request.readyState===4){var responseText="";if(request.responseType==="json")responseText=JSON.parse(request.responseText);else responseText=request.responseText;if(request.status>299)config.error.call(null,request.status,responseText,request.response);else config.success.call(null,responseText,
request.status)}};if(config.dataType==="json"){config.data=JSON.stringify(config.data);config.mimeType="application/json"}else config.data=ajaxSerialize(config.data);request.setRequestHeader("Content-Type",config.mimeType);switch(method){case "GET":request.send(null);break;default:request.send(config.data);break}};AnimeClient.get=function(url,data,callback){callback=callback===undefined?null:callback;if(callback===null){callback=data;data={}}return AnimeClient.ajax(url,{data:data,success:callback})};
AnimeClient.on("header","click",".message",function(e){AnimeClient.hide(e.target)});AnimeClient.on("form.js-delete","submit",function(event){var proceed=confirm("Are you ABSOLUTELY SURE you want to delete this item?");if(proceed===false){event.preventDefault();event.stopPropagation()}});AnimeClient.on(".js-clear-cache","click",function(){AnimeClient.get("/cache_purge",function(){AnimeClient.showMessage("success","Successfully purged api cache")})});if("serviceWorker"in navigator)navigator.serviceWorker.register("/sw.js").then(function(reg){console.log("Service worker registered",
reg.scope)})["catch"](function(error){console.error("Failed to register service worker",error)});AnimeClient.on("main","change",".big-check",function(e){var id=e.target.id;document.getElementById("mal_"+id).checked=true});function renderAnimeSearchResults(data){var results=[];data.forEach(function(x){var item=x.attributes;var titles=item.titles.reduce(function(prev,current){return prev+(current+"\x3cbr /\x3e")},[]);results.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"mal-check" id\x3d"mal_'+
item.slug+'" name\x3d"mal_id" value\x3d"'+x.mal_id+'" /\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"big-check" id\x3d"'+item.slug+'" name\x3d"id" value\x3d"'+x.id+'" /\x3e\n\t\t\t\t\t\x3clabel for\x3d"'+item.slug+'"\x3e\n\t\t\t\t\t\t\x3cpicture width\x3d"220"\x3e\n\t\t\t\t\t\t\t\x3csource srcset\x3d"/public/images/anime/'+x.id+'.webp" type\x3d"image/webp" /\x3e\n\t\t\t\t\t\t\t\x3csource srcset\x3d"/public/images/anime/'+x.id+'.jpg" type\x3d"image/jpeg" /\x3e\n\t\t\t\t\t\t\t\x3cimg src\x3d"/public/images/anime/'+
x.id+'.jpg" alt\x3d"" width\x3d"220" /\x3e\n\t\t\t\t\t\t\x3c/picture\x3e\n\t\t\t\t\t\t\n\t\t\t\t\t\t\x3cspan class\x3d"name"\x3e\n\t\t\t\t\t\t\t'+item.canonicalTitle+"\x3cbr /\x3e\n\t\t\t\t\t\t\t\x3csmall\x3e"+titles+'\x3c/small\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/label\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3cdiv class\x3d"table"\x3e\n\t\t\t\t\t\x3cdiv class\x3d"row"\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"edit"\x3e\n\t\t\t\t\t\t\t\x3ca class\x3d"bracketed" href\x3d"/anime/details/'+item.slug+
'"\x3eInfo Page\x3c/a\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\x3c/article\x3e\n\t\t')});return results.join("")}function renderMangaSearchResults(data){var results=[];data.forEach(function(x){var item=x.attributes;var titles=item.titles.reduce(function(prev,current){return prev+(current+"\x3cbr /\x3e")},[]);results.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" id\x3d"mal_'+
AnimeClient.on("header","click",".message",function(e){AnimeClient.hide(e.target)});AnimeClient.on("form.js-delete","submit",function(event){var proceed=confirm("Are you ABSOLUTELY SURE you want to delete this item?");if(proceed===false){event.preventDefault();event.stopPropagation()}});AnimeClient.on(".js-clear-cache","click",function(){AnimeClient.get("/cache_purge",function(){AnimeClient.showMessage("success","Successfully purged api cache")})});AnimeClient.on(".vertical-tabs input","change",function(event){var el=
event.currentTarget.parentElement;var rect=el.getBoundingClientRect();var top=rect.top+window.pageYOffset;var bottom=rect.bottom+window.pageYOffset;window.scrollTo({bottom:bottom,behavior:"smooth"})});AnimeClient.on("main","change",".big-check",function(e){var id=e.target.id;document.getElementById("mal_"+id).checked=true});function renderAnimeSearchResults(data){var results=[];data.forEach(function(x){var item=x.attributes;var titles=item.titles.reduce(function(prev,current){return prev+(current+
"\x3cbr /\x3e")},[]);results.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"mal-check" id\x3d"mal_'+item.slug+'" name\x3d"mal_id" value\x3d"'+x.mal_id+'" /\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"big-check" id\x3d"'+item.slug+'" name\x3d"id" value\x3d"'+x.id+'" /\x3e\n\t\t\t\t\t\x3clabel for\x3d"'+item.slug+'"\x3e\n\t\t\t\t\t\t\x3cpicture width\x3d"220"\x3e\n\t\t\t\t\t\t\t\x3csource srcset\x3d"/public/images/anime/'+
x.id+'.webp" type\x3d"image/webp" /\x3e\n\t\t\t\t\t\t\t\x3csource srcset\x3d"/public/images/anime/'+x.id+'.jpg" type\x3d"image/jpeg" /\x3e\n\t\t\t\t\t\t\t\x3cimg src\x3d"/public/images/anime/'+x.id+'.jpg" alt\x3d"" width\x3d"220" /\x3e\n\t\t\t\t\t\t\x3c/picture\x3e\n\t\t\t\t\t\t\n\t\t\t\t\t\t\x3cspan class\x3d"name"\x3e\n\t\t\t\t\t\t\t'+item.canonicalTitle+"\x3cbr /\x3e\n\t\t\t\t\t\t\t\x3csmall\x3e"+titles+'\x3c/small\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/label\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3cdiv class\x3d"table"\x3e\n\t\t\t\t\t\x3cdiv class\x3d"row"\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"edit"\x3e\n\t\t\t\t\t\t\t\x3ca class\x3d"bracketed" href\x3d"/anime/details/'+
item.slug+'"\x3eInfo Page\x3c/a\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\x3c/article\x3e\n\t\t')});return results.join("")}function renderMangaSearchResults(data){var results=[];data.forEach(function(x){var item=x.attributes;var titles=item.titles.reduce(function(prev,current){return prev+(current+"\x3cbr /\x3e")},[]);results.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" id\x3d"mal_'+
item.slug+'" name\x3d"mal_id" value\x3d"'+x.mal_id+'" /\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"big-check" id\x3d"'+item.slug+'" name\x3d"id" value\x3d"'+x.id+'" /\x3e\n\t\t\t\t\t\x3clabel for\x3d"'+item.slug+'"\x3e\n\t\t\t\t\t\t\x3cpicture width\x3d"220"\x3e\n\t\t\t\t\t\t\t\x3csource srcset\x3d"/public/images/manga/'+x.id+'.webp" type\x3d"image/webp" /\x3e\n\t\t\t\t\t\t\t\x3csource srcset\x3d"/public/images/manga/'+x.id+'.jpg" type\x3d"image/jpeg" /\x3e\n\t\t\t\t\t\t\t\x3cimg src\x3d"/public/images/manga/'+
x.id+'.jpg" alt\x3d"" width\x3d"220" /\x3e\n\t\t\t\t\t\t\x3c/picture\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"name"\x3e\n\t\t\t\t\t\t\t'+item.canonicalTitle+"\x3cbr /\x3e\n\t\t\t\t\t\t\t\x3csmall\x3e"+titles+'\x3c/small\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/label\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3cdiv class\x3d"table"\x3e\n\t\t\t\t\t\x3cdiv class\x3d"row"\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"edit"\x3e\n\t\t\t\t\t\t\t\x3ca class\x3d"bracketed" href\x3d"/manga/details/'+item.slug+'"\x3eInfo Page\x3c/a\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\x3c/article\x3e\n\t\t')});
return results.join("")}var search=function(query){AnimeClient.$(".cssload-loader")[0].removeAttribute("hidden");AnimeClient.get(AnimeClient.url("/anime-collection/search"),{query:query},function(searchResults,status){searchResults=JSON.parse(searchResults);AnimeClient.$(".cssload-loader")[0].setAttribute("hidden","hidden");AnimeClient.$("#series_list")[0].innerHTML=renderAnimeSearchResults(searchResults.data)})};if(AnimeClient.hasElement(".anime #search"))AnimeClient.on("#search","keyup",AnimeClient.throttle(250,

File diff suppressed because one or more lines are too long

View File

@ -6,6 +6,6 @@ evt,listener)});sel.addEventListener(event,listener,false)}function delegateEven
listener)})};function ajaxSerialize(data){var pairs=[];Object.keys(data).forEach(function(name){var value=data[name].toString();name=encodeURIComponent(name);value=encodeURIComponent(value);pairs.push(name+"\x3d"+value)});return pairs.join("\x26")}AnimeClient.ajax=function(url,config){var defaultConfig={data:{},type:"GET",dataType:"",success:AnimeClient.noop,mimeType:"application/x-www-form-urlencoded",error:AnimeClient.noop};config=Object.assign({},defaultConfig,config);var request=new XMLHttpRequest;
var method=String(config.type).toUpperCase();if(method==="GET")url+=url.match(/\?/)?ajaxSerialize(config.data):"?"+ajaxSerialize(config.data);request.open(method,url);request.onreadystatechange=function(){if(request.readyState===4){var responseText="";if(request.responseType==="json")responseText=JSON.parse(request.responseText);else responseText=request.responseText;if(request.status>299)config.error.call(null,request.status,responseText,request.response);else config.success.call(null,responseText,
request.status)}};if(config.dataType==="json"){config.data=JSON.stringify(config.data);config.mimeType="application/json"}else config.data=ajaxSerialize(config.data);request.setRequestHeader("Content-Type",config.mimeType);switch(method){case "GET":request.send(null);break;default:request.send(config.data);break}};AnimeClient.get=function(url,data,callback){callback=callback===undefined?null:callback;if(callback===null){callback=data;data={}}return AnimeClient.ajax(url,{data:data,success:callback})};
AnimeClient.on("header","click",".message",function(e){AnimeClient.hide(e.target)});AnimeClient.on("form.js-delete","submit",function(event){var proceed=confirm("Are you ABSOLUTELY SURE you want to delete this item?");if(proceed===false){event.preventDefault();event.stopPropagation()}});AnimeClient.on(".js-clear-cache","click",function(){AnimeClient.get("/cache_purge",function(){AnimeClient.showMessage("success","Successfully purged api cache")})});if("serviceWorker"in navigator)navigator.serviceWorker.register("/sw.js").then(function(reg){console.log("Service worker registered",
reg.scope)})["catch"](function(error){console.error("Failed to register service worker",error)})})();
AnimeClient.on("header","click",".message",function(e){AnimeClient.hide(e.target)});AnimeClient.on("form.js-delete","submit",function(event){var proceed=confirm("Are you ABSOLUTELY SURE you want to delete this item?");if(proceed===false){event.preventDefault();event.stopPropagation()}});AnimeClient.on(".js-clear-cache","click",function(){AnimeClient.get("/cache_purge",function(){AnimeClient.showMessage("success","Successfully purged api cache")})});AnimeClient.on(".vertical-tabs input","change",function(event){var el=
event.currentTarget.parentElement;var rect=el.getBoundingClientRect();var top=rect.top+window.pageYOffset;var bottom=rect.bottom+window.pageYOffset;window.scrollTo({bottom:bottom,behavior:"smooth"})})})();
//# sourceMappingURL=scripts.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -23,3 +23,16 @@ _.on('.js-clear-cache', 'click', () => {
_.showMessage('success', 'Successfully purged api cache');
});
});
// Alleviate some page jumping
_.on('.vertical-tabs input', 'change', (event) => {
const el = event.currentTarget.parentElement;
const rect = el.getBoundingClientRect();
const top = rect.top + window.pageYOffset;
window.scrollTo({
top,
behavior: 'smooth',
});
});

View File

@ -1,10 +1,10 @@
import './base/events.js';
if ('serviceWorker' in navigator) {
/* if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(reg => {
console.log('Service worker registered', reg.scope);
}).catch(error => {
console.error('Failed to register service worker', error);
});
}
} */

View File

@ -1,4 +1,5 @@
{
"license": "MIT",
"scripts": {
"build": "npm run build:css && npm run build:js",
"build:css": "node ./tools/css.js",
@ -8,15 +9,13 @@
"watch": "concurrently \"npm:watch:css\" \"npm:watch:js\" --kill-others"
},
"devDependencies": {
"concurrently": "^3.6.1",
"concurrently": "^4.0.1",
"cssnano": "^4.0.5",
"postcss-cachify": "^1.3.1",
"postcss-cssnext": "^3.0.0",
"postcss-import": "^12.0.0",
"rollup": "^0.64.1",
"rollup": "^0.66.6",
"rollup-plugin-closure-compiler-js": "^1.0.6",
"watch": "^1.0.2"
},
"dependencies": {
"rollup-plugin-closure-compiler-js": "^1.0.6"
}
}

File diff suppressed because it is too large Load Diff