Some stylistic updates
This commit is contained in:
parent
c96bbb92c5
commit
eff673a7bb
@ -15,11 +15,14 @@
|
||||
<?= ($item['anime']['alternate_title'] != "") ? "<br />({$item['anime']['alternate_title']})" : ""; ?>
|
||||
</a></div>
|
||||
<div class="media_metadata">
|
||||
<div class="media_type"><?= $item['anime']['show_type'] ?></div>
|
||||
<div class="airing_status"><?= $item['anime']['status'] ?></div>
|
||||
<div class="user_rating"><?= (int)($item['rating']['value'] * 2) ?> / 10</div>
|
||||
<div class="completion">Episodes: <?= $item['episodes_watched'] ?> / <?= $item['anime']['episode_count'] ?></div>
|
||||
</div>
|
||||
<div class="medium_metadata">
|
||||
<div class="media_type"><?= $item['anime']['show_type'] ?></div>
|
||||
<div class="age_rating"><?= $item['anime']['age_rating'] ?></div>
|
||||
</div>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
</section>
|
||||
|
@ -22,7 +22,6 @@
|
||||
<?= (isset($item['manga']['english_title'])) ? "<br />({$item['manga']['english_title']})" : ""; ?>
|
||||
</a></div>
|
||||
<div class="media_metadata">
|
||||
<div class="media_type"><?= $item['manga']['manga_type'] ?></div>
|
||||
<?php /*<div class="airing_status"><?= $item['manga']['status'] ?></div>*/ ?>
|
||||
<div class="user_rating"><?= ($item['rating'] > 0) ? (int)($item['rating'] * 2) : '-' ?> / 10</div>
|
||||
<div class="completion">
|
||||
@ -30,6 +29,9 @@
|
||||
Volumes: <?= $item['volumes_read'] ?> / <?= ($item['manga']['volume_count'] > 0) ? $item['manga']['volume_count'] : "-" ?>*/ ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php /*<div class="medium_metadata">
|
||||
<div class="media_type"><?= $item['manga']['manga_type'] ?></div>
|
||||
</div> */ ?>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
</section>
|
||||
|
@ -17,34 +17,49 @@ body {
|
||||
margin:0.25em;
|
||||
}
|
||||
.media > img {
|
||||
border-radius:0.25em;
|
||||
border-radius:0.5em;
|
||||
}
|
||||
|
||||
.name, .media_type, .airing_status, .user_rating, .completion {
|
||||
.name, .media_type, .airing_status, .user_rating, .completion, .age_rating {
|
||||
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #fff;
|
||||
padding:0.25em;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.media_type, .age_rating {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.media > .media_metadata {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
}
|
||||
|
||||
.media > .media_metadata > .media_type {
|
||||
border-top-left-radius: 0.25em;
|
||||
border-top-right-radius: 0.25em;
|
||||
.media > .medium_metadata {
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
.media > .media_metadata > .airing_status,
|
||||
.media > .medium_metadata > .media_type
|
||||
{
|
||||
border-top-left-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
}
|
||||
|
||||
.media > .media_metadata > .completion {
|
||||
border-bottom-left-radius: 0.25em;
|
||||
border-bottom-right-radius: 0.25em;
|
||||
.media > .media_metadata > .completion,
|
||||
.media > .medium_metadata > .age_rating
|
||||
{
|
||||
border-bottom-left-radius: 0.5em;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
}
|
||||
|
||||
.media > .name {
|
||||
border-radius:0.25em;
|
||||
border-radius:0.5em;
|
||||
position:absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
@ -1,8 +1,19 @@
|
||||
.media,
|
||||
.media > .name,
|
||||
.media > img,
|
||||
.media > .media_metadata > .user_rating,
|
||||
.media > .media_metadata > .completion
|
||||
{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.media > .name {
|
||||
padding:0.5em;
|
||||
margin:1em;
|
||||
}
|
||||
|
||||
.media {
|
||||
position:relative;
|
||||
vertical-align:top;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
border:1px solid #ddd;
|
||||
width:200px;
|
||||
height:290px;
|
||||
margin:0.25em;
|
||||
@ -11,3 +22,8 @@
|
||||
.completion::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.media_metadata {
|
||||
padding: 0.25em;
|
||||
margin: 0.75em;
|
||||
}
|
Loading…
Reference in New Issue
Block a user