timw4mail
/
HummingBirdAnimeClient
1
1
Fork 1
Code Issues 5 Pull Requests Projects 1 Releases Wiki Activity

More page style tweaks
timw4mail/HummingBirdAnimeClient/develop This commit looks good Details

This commit is contained in:
Timothy Warren 2018-10-30 13:05:49 -04:00
parent fa27abb954
commit 3244db3438
3 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/views/character.php
View File

@ -4,7 +4,7 @@ use Aviat\AnimeClient\API\Kitsu;
?>
<main class="details fixed">
<section class="flex flex-no-wrap">
<aside class="info cover">
<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">
@ -16,8 +16,8 @@ use Aviat\AnimeClient\API\Kitsu;
<h4><?= $name ?></h4>
<?php endforeach ?>
<?php endif ?>
</aside>
<article class="text">
</div>
<div>
<h2><?= $data['name'] ?></h2>
<?php foreach ($data['names'] as $name): ?>
<h3><?= $name ?></h3>
@ -26,7 +26,7 @@ use Aviat\AnimeClient\API\Kitsu;
<hr />
<p class="description"><?= $data[0]['attributes']['description'] ?></p>
</article>
</div>
</section>
<?php if (array_key_exists('anime', $data['included']) || array_key_exists('manga', $data['included'])): ?>
@ -147,7 +147,7 @@ use Aviat\AnimeClient\API\Kitsu;
</article>
</td>
<td>
<section class="align_left media-wrap">
<section class="align_left media-wrap-flex">
<?php foreach ($c['series'] as $series): ?>
<article class="media">
<?php

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

File diff suppressed because one or more lines are too long

19
public/css/base.css
View File

@ -111,6 +111,10 @@ a:hover, a:active {
justify-content: space-around
}
.flex-center {
justify-content: center;
}
.flex-self-center {
align-self: center
}
@ -152,11 +156,23 @@ a:hover, a:active {
}
.media-wrap {
text-align: center;
text-align: left;
margin: 0 auto;
position: relative;
}
.media-wrap-flex {
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
justify-content: space-between;
position:relative;
}
td .media-wrap-flex {
justify-content: center;
}
.danger {
background-color: #ff4136;
border-color: #924949;
@ -453,6 +469,7 @@ picture.cover {
}
.media > .name a {
display: inline-block;
transition: none;
}