Details and user page updates, resolves #27

This commit is contained in:
Timothy Warren 2017-03-31 16:36:22 -04:00
parent ca402bd826
commit 06bc655a59
9 changed files with 205 additions and 55 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>Characters</h4>
<div class="flex flex-wrap">
<h4>Favorite Characters</h4>
<section class="media-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']); ?>
<br />
<div class="name"><?= $helper->a($link, $char['name']); ?></div>
<a href="<?= $link ?>">
<?= $helper->img($char['image']['original'], [
'width' => '225'
]) ?>
<?= $helper->img($char['image']['original']) ?>
</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>

View File

@ -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,7 +1078,9 @@ a:hover, a:active {
top: 0;
}
.media:hover > .name,
.small_character:hover > .name,
.character:hover > .name,
.media:hover > .name,
.media:hover > .media_metadata > div,
.media:hover > .medium_metadata > div,
.media:hover > .table .row
@ -1094,7 +1098,11 @@ a:hover, a:active {
display:block;
}
.media > .name a,
.small_character > .name a,
.small_character > .name a small,
.character > .name a,
.character > .name a small,
.media > .name a,
.media > .name a small
{
background:none;
@ -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 {
max-width: 300px;
.small_character {
width: 160px;
height: 250px;
}
.user-page .media-wrap {
text-align: left;
}
.media a {
display: inline-block;
width: 100%;
height: 100%;
}
/* ----------------------------------------------------------------------------

View File

@ -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 {
max-width: 300px;
.small_character {
width: 160px;
height: 250px;
}
.user-page .media-wrap {
text-align: left;
}
.media a {
display: inline-block;
width: 100%;
height: 100%;
}
/* ----------------------------------------------------------------------------
Viewport-based styles

View File

@ -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)

View File

@ -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

View File

@ -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;