Some stylistic updates

This commit is contained in:
Timothy Warren 2015-06-04 20:59:56 -04:00
parent c96bbb92c5
commit eff673a7bb
4 changed files with 51 additions and 15 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 > .medium_metadata {
position:absolute;
bottom: 0;
left:0;
}
.media > .media_metadata > .media_type {
border-top-left-radius: 0.25em;
border-top-right-radius: 0.25em;
.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;
}

View File

@ -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;
@ -10,4 +21,9 @@
.completion::before {
content: "";
}
.media_metadata {
padding: 0.25em;
margin: 0.75em;
}