colwellkr/HummingBirdAnimeClient
1
0
Fork 0
forked from timw4mail/HummingBirdAnimeClient
Code Pull Requests Activity

Fix staff section on Anime detail pages, center unusually sized images instead of stretching them

Browse Source
This commit is contained in:
Timothy Warren 2018-10-29 14:43:06 -04:00
parent 0fa54d9f7f
commit 679c369427
9 changed files with 164 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/views/anime/details.php
View File

@ -89,6 +89,7 @@
</section>
<?php if (count($characters) > 0): ?>
<br />
<hr />
<h2>Characters</h2>
<?php foreach($characters as $role => $list): ?>
@ -112,5 +113,41 @@
<?php endif ?>
<?php endforeach ?>
</section>
<?php endforeach ?>
<?php endif ?>
<?php if (count($staff) > 0): ?>
<br />
<hr />
<h2>Staff</h2>
<?php foreach($staff as $role => $people): ?>
<h3><?= $role ?></h3>
<section class='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]) ?>
<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>
</a>
</article>
<?php endforeach ?>
</section>
<?php endforeach ?>
<?php endif ?>
</main>

15
app/views/character.php
View File

@ -43,7 +43,20 @@ use Aviat\AnimeClient\API\Kitsu;
$titles = Kitsu::filterTitles($anime['attributes']);
?>
<a href="<?= $link ?>">
<img src="<?= $urlGenerator->assetUrl("images/anime/{$id}.jpg") ?>" width="220" alt="" />
<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 ?>">

51
app/views/manga/details.php
View File

@ -41,25 +41,36 @@
</section>
<?php if (count($characters) > 0): ?>
<h2>Characters</h2>
<section class="media-wrap flex flex-wrap flex-justify-start">
<?php foreach($characters as $id => $char): ?>
<?php if ( ! empty($char['image']['original'])): ?>
<article class="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>
</a>
</article>
<?php endif ?>
<?php endforeach ?>
</section>
<br />
<hr />
<h2>Characters</h2>
<?php foreach ($characters as $role => $list): ?>
<h3><?= ucfirst($role) ?></h3>
<section class="media-wrap flex flex-wrap flex-justify-start">
<?php foreach ($list as $id => $char): ?>
<?php if ( ! empty($char['image']['original'])): ?>
<article class="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>
</a>
</article>
<?php endif ?>
<?php endforeach ?>
</section>
<?php endforeach ?>
<?php endif ?>
</main>

2
public/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
public/css/base.css
View File

@ -725,12 +725,23 @@ picture.cover {
}
.character,
.small_character {
.small_character,
.person {
/* background: rgba(0,0,0,0.5); */
width: 225px;
height: 350px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.person {
width: 225px;
height: 338px;
}
.character a {
height: 350px;
}
.character:hover .name,
@ -753,12 +764,23 @@ picture.cover {
}
.small_character img,
.character img {
position: relative;
.character img,
.small_character picture,
.character picture,
.person img,
.person picture {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: 100%;
max-height: 350px;
max-width: 225px;
}
.person img,
.person picture {
max-height: 338px;
}
.min-table {

4
src/API/JsonAPI.php
View File

@ -324,13 +324,13 @@ final class JsonAPI {
foreach($relationships as $key => $data)
{
$organized[$key] = $organized[$key] ?? [];
if ( ! array_key_exists('data', $data))
{
continue;
}
$organized[$key] = $organized[$key] ?? [];
foreach ($data['data'] as $item)
{
if (\is_array($item) && array_key_exists('id', $item))

3
src/API/Kitsu/Model.php
View File

@ -966,10 +966,11 @@ final class Model {
'characters' => 'slug,name,image',
'mappings' => 'externalSite,externalId',
'animeCharacters' => 'character,role',
'mediaCharacters' => 'character,role',
],
'include' => ($type === 'anime')
? 'staff,staff.person,categories,mappings,streamingLinks,animeCharacters.character'
: 'staff,staff.person,categories,mappings,mangaCharacters.character',
: 'staff,staff.person,categories,mappings,characters.character',
]
];

28
src/Controller/Anime.php
View File

@ -309,31 +309,39 @@ final class Anime extends BaseController {
if (array_key_exists('mediaStaff', $data['included']))
{
foreach ($data['included']['mediaStaff'] as $id => $person)
foreach ($data['included']['mediaStaff'] as $id => $staffing)
{
$personId = $person['relationships']['person']['data']['id'];
$personId = $staffing['relationships']['person']['data']['id'];
$personDetails = $data['included']['people'][$personId];
$role = $person['role'];
$role = $staffing['role'];
if ( ! array_key_exists($role, $staff))
{
$staff[$role] = [];
}
$staff[$role][$id] = [
$staff[$role][$personId] = [
'id' => $personId,
'name' => $personDetails['name'] ?? '??',
'image' => $personDetails['image'],
];
}
}
uasort($characters['main'], function ($a, $b) {
return $a['name'] <=> $b['name'];
});
uasort($characters['supporting'], function ($a, $b) {
return $a['name'] <=> $b['name'];
});
if ( ! empty($characters['main']))
{
uasort($characters['main'], function ($a, $b) {
return $a['name'] <=> $b['name'];
});
}
if ( ! empty($characters['supporting']))
{
uasort($characters['supporting'], function ($a, $b) {
return $a['name'] <=> $b['name'];
});
}
ksort($characters);
ksort($staff);

39
src/Controller/Manga.php
View File

@ -294,11 +294,25 @@ final class Manga extends Controller {
return;
}
if (array_key_exists('characters', $data['included']))
// dd($data['included']);
if (array_key_exists('mediaCharacters', $data['included']))
{
foreach ($data['included']['characters'] as $id => $character)
$mediaCharacters = $data['included']['mediaCharacters'];
foreach ($mediaCharacters as $rel)
{
$characters[$id] = $character['attributes'];
// dd($rel);
// $charId = $rel['relationships']['character']['data']['id'];
$role = $rel['attributes']['role'];
foreach($rel['relationships']['character']['characters'] as $charId => $char)
{
if (array_key_exists($charId, $data['included']['characters']))
{
$characters[$role][$charId] = $char['attributes'];
}
}
}
}
@ -326,11 +340,22 @@ final class Manga extends Controller {
}
}
uasort($characters, function ($a, $b) {
return $a['name'] <=> $b['name'];
});
if ( ! empty($characters['main']))
{
uasort($characters['main'], function ($a, $b) {
return $a['name'] <=> $b['name'];
});
}
// dump($staff);
if ( ! empty($characters['supporting']))
{
uasort($characters['supporting'], function ($a, $b) {
return $a['name'] <=> $b['name'];
});
}
ksort($characters);
ksort($staff);
$this->outputHTML('manga/details', [
'title' => $this->formatTitle(