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

Some stylistic updates

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/views/anime_list.php
View File

@ -15,11 +15,14 @@
<?= ($item['anime']['alternate_title'] != "") ? "<br />({$item['anime']['alternate_title']})" : ""; ?> <?= ($item['anime']['alternate_title'] != "") ? "<br />({$item['anime']['alternate_title']})" : ""; ?>
</a></div> </a></div>
<div class="media_metadata"> <div class="media_metadata">
<div class="media_type"><?= $item['anime']['show_type'] ?></div>
<div class="airing_status"><?= $item['anime']['status'] ?></div> <div class="airing_status"><?= $item['anime']['status'] ?></div>
<div class="user_rating"><?= (int)($item['rating']['value'] * 2) ?> / 10</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 class="completion">Episodes: <?= $item['episodes_watched'] ?> / <?= $item['anime']['episode_count'] ?></div>
</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> </article>
<?php endforeach ?> <?php endforeach ?>
</section> </section>

4
app/views/manga_list.php
View File

@ -22,7 +22,6 @@
<?= (isset($item['manga']['english_title'])) ? "<br />({$item['manga']['english_title']})" : ""; ?> <?= (isset($item['manga']['english_title'])) ? "<br />({$item['manga']['english_title']})" : ""; ?>
</a></div> </a></div>
<div class="media_metadata"> <div class="media_metadata">
<div class="media_type"><?= $item['manga']['manga_type'] ?></div>
<?php /*<div class="airing_status"><?= $item['manga']['status'] ?></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="user_rating"><?= ($item['rating'] > 0) ? (int)($item['rating'] * 2) : '-' ?> / 10</div>
<div class="completion"> <div class="completion">
@ -30,6 +29,9 @@
Volumes: <?= $item['volumes_read'] ?> / <?= ($item['manga']['volume_count'] > 0) ? $item['manga']['volume_count'] : "-" ?>*/ ?> Volumes: <?= $item['volumes_read'] ?> / <?= ($item['manga']['volume_count'] > 0) ? $item['manga']['volume_count'] : "-" ?>*/ ?>
</div> </div>
</div> </div>
<?php /*<div class="medium_metadata">
<div class="media_type"><?= $item['manga']['manga_type'] ?></div>
</div> */ ?>
</article> </article>
<?php endforeach ?> <?php endforeach ?>
</section> </section>

33
public/css/base.css
View File

@ -17,34 +17,49 @@ body {
margin:0.25em; margin:0.25em;
} }
.media > img { .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); background: rgba(0, 0, 0, 0.45);
color: #fff; color: #fff;
padding:0.25em; padding:0.25em;
text-align:right; text-align:right;
} }
.media_type, .age_rating {
text-align:left;
}
.media > .media_metadata { .media > .media_metadata {
position:absolute; position:absolute;
bottom:0; bottom:0;
right:0; right:0;
} }
.media > .media_metadata > .media_type { .media > .medium_metadata {
border-top-left-radius: 0.25em; position:absolute;
border-top-right-radius: 0.25em; 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 { .media > .media_metadata > .completion,
border-bottom-left-radius: 0.25em; .media > .medium_metadata > .age_rating
border-bottom-right-radius: 0.25em; {
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
} }
.media > .name { .media > .name {
border-radius:0.25em; border-radius:0.5em;
position:absolute; position:absolute;
top: 0; top: 0;
} }

24
public/css/manga.css
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 { .media {
position:relative; border:1px solid #ddd;
vertical-align:top;
display:inline-block;
text-align:center;
width:200px; width:200px;
height:290px; height:290px;
margin:0.25em; margin:0.25em;
@ -11,3 +22,8 @@
.completion::before { .completion::before {
content: ""; content: "";
} }
.media_metadata {
padding: 0.25em;
margin: 0.75em;
}