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 class="table">
<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>
<div class="row">

25
public/css/base.css
View File

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