Tweak display of descriptions on detail pages

This commit is contained in:
Timothy Warren 2019-05-08 16:08:51 -04:00
parent aa1e6675c2
commit 62781355b1
5 changed files with 36 additions and 14 deletions

View File

@ -49,7 +49,9 @@
<h3><?= $title ?></h3>
<?php endforeach ?>
<br />
<p class="description"><?= nl2br($data['synopsis']) ?></p>
<div class="description">
<p><?= str_replace("\n", '</p><p>', $data['synopsis']) ?></p>
</div>
<?php if (count($data['streaming_links']) > 0): ?>
<hr />
<h4>Streaming on:</h4>

View File

@ -8,12 +8,6 @@ use Aviat\AnimeClient\API\Kitsu;
<section class="flex flex-no-wrap">
<div>
<?= $helper->picture("images/characters/{$data['id']}-original.webp") ?>
<?php if ( ! empty($data['otherNames'])): ?>
<h3>Nicknames / Other names</h3>
<?php foreach ($data['otherNames'] as $name): ?>
<h4><?= $name ?></h4>
<?php endforeach ?>
<?php endif ?>
</div>
<div>
<h2 class="toph"><?= $data['name'] ?></h2>
@ -21,9 +15,19 @@ use Aviat\AnimeClient\API\Kitsu;
<h3><?= $name ?></h3>
<?php endforeach ?>
<?php if ( ! empty($data['otherNames'])): ?>
<h4>Also Known As:</h4>
<ul>
<?php foreach ($data['otherNames'] as $name): ?>
<li><h5><?= $name ?></h5></li>
<?php endforeach ?>
</ul>
<?php endif ?>
<br />
<hr />
<p class="description"><?= $data['description'] ?></p>
<div class="description">
<p><?= str_replace("\n", '</p><p>', $data['description']) ?></p>
</div>
</div>
</section>

View File

@ -35,7 +35,9 @@
<?php endforeach ?>
<br />
<p><?= nl2br($data['synopsis']) ?></p>
<div class="description">
<p><?= str_replace("\n", '</p><p>', $data['synopsis']) ?></p>
</div>
</article>
</section>

File diff suppressed because one or more lines are too long

View File

@ -21,6 +21,7 @@ body {
margin: 0.5em;
}
button {
background: #fff;
background: linear-gradient(#ddd, #eee, #fff, #eee, #ddd);
@ -682,7 +683,20 @@ picture.cover {
}
.description {
max-width: 80rem;
/* max-width: 80rem;*/
columns: 4 28rem;
columns: 4 28em;
margin-bottom: 1.6em;
margin-bottom: 1.6rem;
}
p.description br + br {
page-break-before: avoid;
page-break-after: auto;
page-break-inside: avoid;
break-inside: avoid;
break-after: auto;
break-before: avoid;
}
.fixed {
@ -820,9 +834,9 @@ aside.info picture, aside.info img {
margin: 0 auto;
}
aside.info + article {
/* aside.info + article {
max-width: 66%;
}
} */
/* ----------------------------------------------------------------------------
User page styles