Details and user page updates, resolves #27

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

View File

@ -76,25 +76,25 @@
<?php endif ?> <?php endif ?>
</div> </div>
</section> </section>
<section>
<?php if (count($characters) > 0): ?> <?php if (count($characters) > 0): ?>
<h2>Characters</h2> <h2>Characters</h2>
<div class="flex flex-wrap"> <section class="media-wrap">
<?php foreach($characters as $char): ?> <?php foreach($characters as $char): ?>
<?php if ( ! empty($char['image']['original'])): ?> <?php if ( ! empty($char['image']['original'])): ?>
<div class="character"> <article class="character">
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?> <?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<div class="name">
<?= $helper->a($link, $char['name']); ?> <?= $helper->a($link, $char['name']); ?>
<br /> </div>
<a href="<?= $link ?>"> <a href="<?= $link ?>">
<?= $helper->img($char['image']['original'], [ <?= $helper->img($char['image']['original'], [
'width' => '225' 'width' => '225'
]) ?> ]) ?>
</a> </a>
</div> </article>
<?php endif ?> <?php endif ?>
<?php endforeach ?> <?php endforeach ?>
</div>
<?php endif ?>
</section> </section>
<?php endif ?>
</main> </main>

View File

@ -1,7 +1,7 @@
<main class="details fixed"> <main class="details fixed">
<section class="flex flex-no-wrap"> <section class="flex flex-no-wrap">
<div> <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>
<div> <div>
<h2><?= $data['name'] ?></h2> <h2><?= $data['name'] ?></h2>

View File

@ -35,26 +35,25 @@
<p><?= nl2br($data['synopsis']) ?></p> <p><?= nl2br($data['synopsis']) ?></p>
</div> </div>
</section> </section>
<section>
<?php if (count($characters) > 0): ?> <?php if (count($characters) > 0): ?>
<h2>Characters</h2> <h2>Characters</h2>
<div class="flex flex-wrap"> <section class="media-wrap">
<?php foreach($characters as $char): ?> <?php foreach($characters as $char): ?>
<?php if ( ! empty($char['image']['original'])): ?> <?php if ( ! empty($char['image']['original'])): ?>
<div class="character"> <article class="character">
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?> <?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<div class="name">
<?= $helper->a($link, $char['name']); ?> <?= $helper->a($link, $char['name']); ?>
<br /> </div>
<a href="<?= $link ?>"> <a href="<?= $link ?>">
<?= $helper->img($char['image']['original'], [ <?= $helper->img($char['image']['original'], [
'width' => '225' 'width' => '225'
]) ?> ]) ?>
</a> </a>
</div> </article>
<?php endif ?> <?php endif ?>
<?php endforeach ?> <?php endforeach ?>
</div>
<?php endif ?>
</section> </section>
<?php endif ?>
</main> </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"> <section class="flex flex-no-wrap">
<div> <div>
<h2><?= $attributes['name'] ?></h2> <h2><?= $attributes['name'] ?></h2>
@ -54,29 +55,73 @@
<dd><?= $escape->html($attributes['bio']) ?></dd> <dd><?= $escape->html($attributes['bio']) ?></dd>
</dl> </dl>
<?php if ( ! empty($favorites)): ?> <?php if ( ! empty($favorites)): ?>
<h3>Favorites:</h3>
<?php if ( ! empty($favorites['characters'])): ?> <?php if ( ! empty($favorites['characters'])): ?>
<section> <h4>Favorite Characters</h4>
<h4>Characters</h4> <section class="media-wrap">
<div class="flex flex-wrap">
<?php foreach($favorites['characters'] as $char): ?> <?php foreach($favorites['characters'] as $char): ?>
<?php if ( ! empty($char['image']['original'])): ?> <?php if ( ! empty($char['image']['original'])): ?>
<div class="small_character"> <article class="small_character">
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?> <?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<?= $helper->a($link, $char['name']); ?> <div class="name"><?= $helper->a($link, $char['name']); ?></div>
<br />
<a href="<?= $link ?>"> <a href="<?= $link ?>">
<?= $helper->img($char['image']['original'], [ <?= $helper->img($char['image']['original']) ?>
'width' => '225'
]) ?>
</a> </a>
</div> </article>
<?php endif ?> <?php endif ?>
<?php endforeach ?> <?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> </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> </section>
<?php endif ?> <?php endif ?>
<?php endif ?> <?php endif ?>
</div> </div>
</section> </section>
</main> </main>

View File

@ -1025,7 +1025,7 @@ a:hover, a:active {
Base list styles Base list styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.media { .media, .character, .small_character {
position:relative; position:relative;
vertical-align:top; vertical-align:top;
display:inline-block; display:inline-block;
@ -1035,7 +1035,9 @@ a:hover, a:active {
margin:0.25em 0.125em; margin:0.25em 0.125em;
} }
.media > img { .media > img,
.character > img,
.small_character > img {
width: 100%; width: 100%;
} }
@ -1076,6 +1078,8 @@ a:hover, a:active {
top: 0; top: 0;
} }
.small_character:hover > .name,
.character:hover > .name,
.media:hover > .name, .media:hover > .name,
.media:hover > .media_metadata > div, .media:hover > .media_metadata > div,
.media:hover > .medium_metadata > div, .media:hover > .medium_metadata > div,
@ -1094,6 +1098,10 @@ a:hover, a:active {
display:block; display:block;
} }
.small_character > .name a,
.small_character > .name a small,
.character > .name a,
.character > .name a small,
.media > .name a, .media > .name a,
.media > .name a small .media > .name a small
{ {
@ -1263,7 +1271,7 @@ a:hover, a:active {
.details .cover { .details .cover {
display: block; display: block;
width: 284px; width: 284px;
height: 402px; /* height: 402px; */
} }
.details h2 { .details h2 {
@ -1298,12 +1306,56 @@ a:hover, a:active {
text-align:left; 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 User page styles
-----------------------------------------------------------------------------*/ -----------------------------------------------------------------------------*/
.small_character img { .small_character {
max-width: 300px; 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 Base list styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.media { .media, .character, .small_character {
position:relative; position:relative;
vertical-align:top; vertical-align:top;
display:inline-block; display:inline-block;
@ -307,7 +307,9 @@ a:hover, a:active {
margin: var(--normal-padding); margin: var(--normal-padding);
} }
.media > img { .media > img,
.character > img,
.small_character > img {
width: 100%; width: 100%;
} }
@ -347,7 +349,8 @@ a:hover, a:active {
position:absolute; position:absolute;
top: 0; top: 0;
} }
.small_character:hover > .name,
.character:hover > .name,
.media:hover > .name, .media:hover > .name,
.media:hover > .media_metadata > div, .media:hover > .media_metadata > div,
.media:hover > .medium_metadata > div, .media:hover > .medium_metadata > div,
@ -364,6 +367,10 @@ a:hover, a:active {
display:block; display:block;
} }
.small_character > .name a,
.small_character > .name a small,
.character > .name a,
.character > .name a small,
.media > .name a, .media > .name a,
.media > .name a small .media > .name a small
{ {
@ -521,7 +528,7 @@ a:hover, a:active {
.details .cover { .details .cover {
display: block; display: block;
width: 284px; width: 284px;
height: 402px; /* height: 402px; */
} }
.details h2 { .details h2 {
@ -552,13 +559,54 @@ a:hover, a:active {
text-align:left; 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 User page styles
-----------------------------------------------------------------------------*/ -----------------------------------------------------------------------------*/
.small_character img { .small_character {
max-width: 300px; width: 160px;
height: 250px;
} }
.user-page .media-wrap {
text-align: left;
}
.media a {
display: inline-block;
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
Viewport-based styles Viewport-based styles

View File

@ -433,6 +433,12 @@ class Model {
] ]
]; ];
$data = $this->getRequest("anime/{$kitsuAnimeId}", $options); $data = $this->getRequest("anime/{$kitsuAnimeId}", $options);
if ( ! array_key_exists('included', $data))
{
return NULL;
}
$mappings = array_column($data['included'], 'attributes'); $mappings = array_column($data['included'], 'attributes');
foreach($mappings as $map) foreach($mappings as $map)

View File

@ -284,6 +284,17 @@ class Controller {
], NULL, $httpCode); ], 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 * Set a session flash variable to display a message on
* next page load * 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 private function organizeFavorites(array $rawfavorites): array
{ {
// return $rawfavorites; // return $rawfavorites;