Update views to show streaming links

This commit is contained in:
Timothy Warren 2017-01-13 16:49:46 -05:00
parent 9e30783ecb
commit c1724397d3
6 changed files with 92 additions and 19 deletions

View File

@ -11,7 +11,7 @@
<section class="media-wrap"> <section class="media-wrap">
<?php foreach($items as $item): ?> <?php foreach($items as $item): ?>
<?php if ($item['private'] && ! $auth->is_authenticated()) continue; ?> <?php if ($item['private'] && ! $auth->is_authenticated()) continue; ?>
<article class="media" id="<?= $item['id'] ?>" data-kitsu-id="<?= $item['id'] ?>" data-mal-id="<?= $item['mal_id'] ?>"> <article class="media" data-kitsu-id="<?= $item['id'] ?>" data-mal-id="<?= $item['mal_id'] ?>">
<?php if ($auth->is_authenticated()): ?> <?php if ($auth->is_authenticated()): ?>
<button title="Increment episode count" class="plus_one" hidden>+1 Episode</button> <button title="Increment episode count" class="plus_one" hidden>+1 Episode</button>
<?php endif ?> <?php endif ?>
@ -32,6 +32,7 @@
</span> </span>
</div> </div>
<?php endif ?> <?php endif ?>
<?php if ($item['private'] || $item['rewatching']): ?> <?php if ($item['private'] || $item['rewatching']): ?>
<div class="row"> <div class="row">
<?php foreach(['private', 'rewatching'] as $attr): ?> <?php foreach(['private', 'rewatching'] as $attr): ?>
@ -41,11 +42,29 @@
<?php endforeach ?> <?php endforeach ?>
</div> </div>
<?php endif ?> <?php endif ?>
<?php if ($item['rewatched'] > 0): ?> <?php if ($item['rewatched'] > 0): ?>
<div class="row"> <div class="row">
<div>Rewatched <?= $item['rewatched'] ?> time(s)</div> <div>Rewatched <?= $item['rewatched'] ?> time(s)</div>
</div> </div>
<?php endif ?> <?php endif ?>
<?php if (count($item['anime']['streaming_links']) > 0): ?>
<div class="row">
<?php foreach($item['anime']['streaming_links'] as $link): ?>
<div class="cover_streaming_link">
<?php if($link['meta']['link']): ?>
<a href="<?= $link['link']?>">
<?= $link['meta']['logo'] ?>
</a>
<?php else: ?>
<?= $link['meta']['logo'] ?>
<?php endif ?>
</div>
<?php endforeach ?>
</div>
<?php endif ?>
<div class="row"> <div class="row">
<div class="user_rating">Rating: <?= $item['user_rating'] ?> / 10</div> <div class="user_rating">Rating: <?= $item['user_rating'] ?> / 10</div>
<div class="completion">Episodes: <div class="completion">Episodes:

View File

@ -1,10 +1,10 @@
<main class="details"> <main class="details">
<section class="flex flex-no-wrap"> <section class="flex flex-no-wrap">
<div> <div>
<img class="cover" src="<?= $data['cover_image'] ?>" alt="<?= $data['title'] ?> cover image" /> <img class="cover" src="<?= $data['cover_image'] ?>" alt="" />
<br /> <br />
<br /> <br />
<table> <table class="media_details">
<tr> <tr>
<td class="align_right">Airing Status</td> <td class="align_right">Airing Status</td>
<td><?= $data['status'] ?></td> <td><?= $data['status'] ?></td>
@ -42,7 +42,39 @@
<?php endforeach ?> <?php endforeach ?>
<br /> <br />
<p><?= nl2br($data['synopsis']) ?></p> <p><?= nl2br($data['synopsis']) ?></p>
<?php /*<pre><?= json_encode($data['included'], \JSON_PRETTY_PRINT) ?></pre> */ ?> <?php if (count($data['streaming_links']) > 0): ?>
<hr />
<h4>Streaming on:</h4>
<table class="full_width invisible">
<thead>
<tr>
<th class="align_left">Service</th>
<th>Subtitles</th>
<th>Dubs</th>
</tr>
</thead>
<tbody>
<?php foreach($data['streaming_links'] as $streaming_link): ?>
<tr>
<td class="align_left">
<?php if ($streaming_link['meta']['link'] !== FALSE): ?>
<a href="<?= $streaming_link['link'] ?>">
<?= $streaming_link['meta']['logo'] ?>
&nbsp;&nbsp;<?= $streaming_link['meta']['name'] ?>
</a>
<?php else: ?>
<?= $streaming_link['meta']['logo'] ?>
&nbsp;&nbsp;<?= $streaming_link['meta']['name'] ?>
<?php endif ?>
</td>
<td><?= implode(', ', $streaming_link['subs']) ?></td>
<td><?= implode(', ', $streaming_link['dubs']) ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<?php endif ?>
<?php /*<pre><?= print_r($data, TRUE) ?></pre> */ ?>
</div> </div>
</section> </section>
</main> </main>

View File

@ -1,4 +1,5 @@
<?php if ($auth->is_authenticated()): ?> <?php if ($auth->is_authenticated()): ?>
<?php /* <pre><?= json_encode($item, \JSON_PRETTY_PRINT); ?></pre> */ ?>
<main> <main>
<h2>Edit Anime List Item</h2> <h2>Edit Anime List Item</h2>
<form action="<?= $action ?>" method="post"> <form action="<?= $action ?>" method="post">

View File

@ -19,7 +19,7 @@
<th>Type</th> <th>Type</th>
<th>Progress</th> <th>Progress</th>
<th>Rated</th> <th>Rated</th>
<th>Attributes</th> <th colspan="2">Attributes</th>
<th>Notes</th> <th>Notes</th>
<th>Genres</th> <th>Genres</th>
</tr> </tr>
@ -61,6 +61,17 @@
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>
</td> </td>
<td>
<?php foreach($item['anime']['streaming_links'] as $link): ?>
<?php if ($link['meta']['link'] !== FALSE): ?>
<a href="<?= $link['link'] ?>">
<?= $link['meta']['logo'] ?>
</a>
<?php else: ?>
<?= $link['meta']['logo'] ?>
<?php endif ?>
<?php endforeach ?>
</td>
<td> <td>
<p><?= $escape->html($item['notes']) ?></p> <p><?= $escape->html($item['notes']) ?></p>
</td> </td>

View File

@ -794,6 +794,10 @@ a:hover, a:active {
background-color:#db7d12; background-color:#db7d12;
} }
.full_width {
width: 100%;
}
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
CSS loading icon CSS loading icon
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
@ -1208,7 +1212,7 @@ a:hover, a:active {
text-align:center; text-align:center;
color: greenyellow; color: greenyellow;
position:absolute; position:absolute;
top:5px; top:147px;
left:0; left:0;
height:100%; height:100%;
width:100%; width:100%;
@ -1248,8 +1252,9 @@ a:hover, a:active {
} }
.details .cover { .details .cover {
max-width: 300px; display: block;
max-height: 435px; width: 284px;
height: 402px;
} }
.details h2 { .details h2 {
@ -1261,11 +1266,11 @@ a:hover, a:active {
margin: 1rem; margin: 1rem;
} }
.details table { .details .media_details {
max-width:300px; max-width:300px;
} }
.details td { .details .media_details td {
padding:0 15px; padding:0 15px;
padding:0 1.5rem; padding:0 1.5rem;
} }
@ -1274,13 +1279,13 @@ a:hover, a:active {
text-align:justify; text-align:justify;
} }
.details td:nth-child(odd) { .details .media_details td:nth-child(odd) {
width:1%; width:1%;
white-space:nowrap; white-space:nowrap;
text-align:right; text-align:right;
} }
.details td:nth-child(even) { .details .media_details td:nth-child(even) {
text-align:left; text-align:left;
} }

View File

@ -115,6 +115,10 @@ a:hover, a:active {
background-color: var(--edit-link-hover-color); background-color: var(--edit-link-hover-color);
} }
.full_width {
width: 100%;
}
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
CSS loading icon CSS loading icon
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
@ -471,7 +475,7 @@ a:hover, a:active {
text-align:center; text-align:center;
color: greenyellow; color: greenyellow;
position:absolute; position:absolute;
top:5px; top:147px;
left:0; left:0;
height:100%; height:100%;
width:100%; width:100%;
@ -505,8 +509,9 @@ a:hover, a:active {
} }
.details .cover { .details .cover {
max-width: 300px; display: block;
max-height: 435px; width: 284px;
height: 402px;
} }
.details h2 { .details h2 {
@ -517,10 +522,10 @@ a:hover, a:active {
margin: 1rem; margin: 1rem;
} }
.details table { .details .media_details {
max-width:300px; max-width:300px;
} }
.details td { .details .media_details td {
padding:0 1.5rem; padding:0 1.5rem;
} }
@ -528,12 +533,12 @@ a:hover, a:active {
text-align:justify; text-align:justify;
} }
.details td:nth-child(odd) { .details .media_details td:nth-child(odd) {
width:1%; width:1%;
white-space:nowrap; white-space:nowrap;
text-align:right; text-align:right;
} }
.details td:nth-child(even) { .details .media_details td:nth-child(even) {
text-align:left; text-align:left;
} }