From b0b044b2829ea5b611ba33ffaa26dc4e68c63b46 Mon Sep 17 00:00:00 2001
From: "Timothy J. Warren" <tim@timshomepage.net>
Date: Wed, 17 Jun 2015 16:46:10 -0400
Subject: [PATCH] The best layouts use flex-box

---
 app/views/anime/cover.php |  2 +-
 public/css/base.css       | 25 ++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/views/anime/cover.php b/app/views/anime/cover.php
index 171fc0b6..6d0de01d 100644
--- a/app/views/anime/cover.php
+++ b/app/views/anime/cover.php
@@ -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">
diff --git a/public/css/base.css b/public/css/base.css
index 74c3fd5d..8e35cb10 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -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;
 }