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> </section>
<?php if (count($characters) > 0): ?> <?php if (count($characters) > 0): ?>
<br />
<hr /> <hr />
<h2>Characters</h2> <h2>Characters</h2>
<?php foreach($characters as $role => $list): ?> <?php foreach($characters as $role => $list): ?>
@ -112,5 +113,41 @@
<?php endif ?> <?php endif ?>
<?php endforeach ?> <?php endforeach ?>
</section> </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 ?> <?php endif ?>
</main> </main>

15
app/views/character.php
View File

@ -43,7 +43,20 @@ use Aviat\AnimeClient\API\Kitsu;
$titles = Kitsu::filterTitles($anime['attributes']); $titles = Kitsu::filterTitles($anime['attributes']);
?> ?>
<a href="<?= $link ?>"> <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> </a>
<div class="name"> <div class="name">
<a href="<?= $link ?>"> <a href="<?= $link ?>">

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

@ -41,25 +41,36 @@
</section> </section>
<?php if (count($characters) > 0): ?> <?php if (count($characters) > 0): ?>
<h2>Characters</h2> <br />
<section class="media-wrap flex flex-wrap flex-justify-start"> <hr />
<?php foreach($characters as $id => $char): ?> <h2>Characters</h2>
<?php if ( ! empty($char['image']['original'])): ?> <?php foreach ($characters as $role => $list): ?>
<article class="character"> <h3><?= ucfirst($role) ?></h3>
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?> <section class="media-wrap flex flex-wrap flex-justify-start">
<div class="name"> <?php foreach ($list as $id => $char): ?>
<?= $helper->a($link, $char['name']); ?> <?php if ( ! empty($char['image']['original'])): ?>
</div> <article class="character">
<a href="<?= $link ?>"> <?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<picture> <div class="name">
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.webp") ?>" type="image/webp"> <?= $helper->a($link, $char['name']); ?>
<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>" type="image/jpeg"> </div>
<img src="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>" alt="" /> <a href="<?= $link ?>">
</picture> <picture>
</a> <source
</article> srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.webp") ?>"
<?php endif ?> type="image/webp"
<?php endforeach ?> >
</section> <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 ?> <?php endif ?>
</main> </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, .character,
.small_character { .small_character,
.person {
/* background: rgba(0,0,0,0.5); */ /* background: rgba(0,0,0,0.5); */
width: 225px; width: 225px;
height: 350px; height: 350px;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
position: relative;
}
.person {
width: 225px;
height: 338px;
}
.character a {
height: 350px;
} }
.character:hover .name, .character:hover .name,
@ -753,12 +764,23 @@ picture.cover {
} }
.small_character img, .small_character img,
.character img { .character img,
position: relative; .small_character picture,
.character picture,
.person img,
.person picture {
position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); left: 50%;
transform: translate(-50%, -50%);
z-index: 5; z-index: 5;
width: 100%; max-height: 350px;
max-width: 225px;
}
.person img,
.person picture {
max-height: 338px;
} }
.min-table { .min-table {

4
src/API/JsonAPI.php
View File

@ -324,13 +324,13 @@ final class JsonAPI {
foreach($relationships as $key => $data) foreach($relationships as $key => $data)
{ {
$organized[$key] = $organized[$key] ?? [];
if ( ! array_key_exists('data', $data)) if ( ! array_key_exists('data', $data))
{ {
continue; continue;
} }
$organized[$key] = $organized[$key] ?? [];
foreach ($data['data'] as $item) foreach ($data['data'] as $item)
{ {
if (\is_array($item) && array_key_exists('id', $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', 'characters' => 'slug,name,image',
'mappings' => 'externalSite,externalId', 'mappings' => 'externalSite,externalId',
'animeCharacters' => 'character,role', 'animeCharacters' => 'character,role',
'mediaCharacters' => 'character,role',
], ],
'include' => ($type === 'anime') 'include' => ($type === 'anime')
? 'staff,staff.person,categories,mappings,streamingLinks,animeCharacters.character' ? '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'])) 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]; $personDetails = $data['included']['people'][$personId];
$role = $person['role']; $role = $staffing['role'];
if ( ! array_key_exists($role, $staff)) if ( ! array_key_exists($role, $staff))
{ {
$staff[$role] = []; $staff[$role] = [];
} }
$staff[$role][$id] = [ $staff[$role][$personId] = [
'id' => $personId,
'name' => $personDetails['name'] ?? '??', 'name' => $personDetails['name'] ?? '??',
'image' => $personDetails['image'], 'image' => $personDetails['image'],
]; ];
} }
} }
uasort($characters['main'], function ($a, $b) { if ( ! empty($characters['main']))
return $a['name'] <=> $b['name']; {
}); uasort($characters['main'], function ($a, $b) {
uasort($characters['supporting'], function ($a, $b) { return $a['name'] <=> $b['name'];
return $a['name'] <=> $b['name']; });
}); }
if ( ! empty($characters['supporting']))
{
uasort($characters['supporting'], function ($a, $b) {
return $a['name'] <=> $b['name'];
});
}
ksort($characters); ksort($characters);
ksort($staff); ksort($staff);

39
src/Controller/Manga.php
View File

@ -294,11 +294,25 @@ final class Manga extends Controller {
return; 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) { if ( ! empty($characters['main']))
return $a['name'] <=> $b['name']; {
}); 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', [ $this->outputHTML('manga/details', [
'title' => $this->formatTitle( 'title' => $this->formatTitle(