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

The best layouts use flex-box

Browse Source
This commit is contained in:
Timothy Warren 2015-06-17 16:46:10 -04:00
parent 401c21e98f
commit b0b044b282
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/anime/cover.php
View File

@ -13,7 +13,7 @@
</div> </div>
<div class="table"> <div class="table">
<div class="row"> <div class="row">
<div class="user_rating">Rating: <?= (int)($item['rating']['value'] * 2) ?> / 10</div> <div class="user_rating">Rating: <?= ($item['rating']['value'] > 0) ? (int)($item['rating']['value'] * 2) : " - " ?> / 10</div>
<div class="completion">Episodes: <?= $item['episodes_watched'] ?>&nbsp;/&nbsp;<?= ($item['anime']['episode_count'] != 0) ? $item['anime']['episode_count'] : "-" ?></div> <div class="completion">Episodes: <?= $item['episodes_watched'] ?>&nbsp;/&nbsp;<?= ($item['anime']['episode_count'] != 0) ? $item['anime']['episode_count'] : "-" ?></div>
</div> </div>
<div class="row"> <div class="row">

25
public/css/base.css
View File

@ -36,6 +36,11 @@ tbody > tr:nth-child(odd) {
} }
.media-wrap { .media-wrap {
display:flex;
justify-content: center;
align-content: space-around;
align-items: center;
flex-wrap: wrap;
text-align:center; text-align:center;
margin:0 auto; margin:0 auto;
} }
@ -50,8 +55,6 @@ tbody > tr:nth-child(odd) {
margin:0.25em; margin:0.25em;
} }
.name, .media_type, .airing_status, .user_rating, .completion, .age_rating { .name, .media_type, .airing_status, .user_rating, .completion, .age_rating {
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); 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);
@ -100,12 +103,16 @@ tbody > tr:nth-child(odd) {
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Anime-list-specific styles Anime-list-specific styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.anime .name {width:100%;} .anime .name {
text-align:center;
width:100%;
padding:0.5em 0.6em;;
}
.anime .media_type, .anime .media_type,
.anime .airing_status, .anime .airing_status,
.anime .user_rating, .anime .user_rating,
.anime .completion, .anime .completion,
.anime .age_rating { .anime .age_rating {
background: none; background: none;
text-align:center; text-align:center;
@ -123,13 +130,17 @@ tbody > tr:nth-child(odd) {
width:100%; width:100%;
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.45);
display:table; display:table;
display:flex;
align-content:center;
justify-content: space-around;
text-align:center; text-align:center;
padding:0 inherit; padding:0 inherit;
} }
.anime .row > div { .anime .row > div {
font-size:0.8em; font-size:0.8em;
display:table-cell; display:flex-item;
align-self:center;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
} }