more view styling

3 files changed, 50 insertions, 31 deletions

diff --git a/views/anime/view.html.php b/views/anime/view.html.php
index 7f2847f..11ac437 100644
--- a/views/anime/view.html.php
+++ b/views/anime/view.html.php
@@ -12,7 +12,7 @@ $this->styles($this->html->style('view'));
 
 <section id="info"><p>
 <?php if(isset($anime->foreign_titles)):
-	$str = 'Foreign titles:';
+	$str = '<b>Foreign titles:</b>';
 	for ($i = 0; $i < count($anime->foreign_titles); $i++) {
 		if ($i > 0) $str .= '<b>,</b>';
 		$str .= ' ' . $anime->foreign_titles[$i];
@@ -22,7 +22,7 @@ $this->styles($this->html->style('view'));
 	<?= $str ?>
 <?php endif; ?>
 <?php if(isset($anime->alternative_titles)):
-	$str = 'Alternative titles:';
+	$str = '<b>Alternative titles:</b>';
 	for ($i = 0; $i < count($anime->alternative_titles); $i++) {
 		if ($i > 0) $str .= '<b>,</b>';
 		$str .= ' ' . $anime->alternative_titles[$i];
@@ -31,35 +31,35 @@ $this->styles($this->html->style('view'));
 	?>
 	<?= $str ?>
 <?php endif; ?>
-Type: <?= $anime->view_type ?><br>
-Episodes: <?= $anime->episode_count ?><br>
-Aired: <?= $anime->aired ?><br>
-Producers: <?php
+<b>Type:</b> <?= $anime->view_type ?><br>
+<b>Episodes:</b> <?= $anime->episode_count ?><br>
+<b>Aired:</b> <?= $anime->aired ?><br>
+<b>Producers:</b> <?php
 $str = '';
 for ($i = 0; $i < count($anime->producers); $i++) {
 	if ($i > 0) $str .= ',';
 	$str .= ' <a href="/producer/view/' . $anime->producers[$i] . '">' . $anime->producers[$i] . '</a>';
 } ?><?= $str ?><br>
-Genres: <?php
+<b>Genres:</b> <?php
 $str = '';
 for ($i = 0; $i < count($anime->genres); $i++) {
 	if ($i > 0) $str .= ',';
 	$str .= ' <a href="/genre/view/' . $anime->genres[$i] . '">' . $anime->genres[$i] . '</a>';
 } ?><?= $str ?><br>
-Duration: <?= $anime->episode_duration ?><br>
-Rating: <?= $anime->rated ?><br>
-Related: <?= $related ?>
+<b>Duration:</b> <?= $anime->episode_duration ?><br>
+<b>Rating:</b> <?= $anime->rated ?><br>
+<b>Related:</b> <?= $related ?>
 </p>
 </section>
 
 <aside id="malstats">
 <h2>MAL Stats</h2>
 <p>
-Score: <?= $anime->mal_score ?><br>
-Votes: <?= $anime->mal_score_voted ?><br>
-Ranked: <?= $anime->mal_rank ?><br>
-Popularity: <?= $anime->mal_popularity ?><br>
-Members: <?= $anime->mal_score ?>
+<b>Score:</b> <?= $anime->mal_score ?><br>
+<b>Votes:</b> <?= $anime->mal_score_voted ?><br>
+<b>Ranked:</b> <?= $anime->mal_rank ?><br>
+<b>Popularity:</b> <?= $anime->mal_popularity ?><br>
+<b>Members:</b> <?= $anime->mal_score ?>
 </p>
 </aside>
 
@@ -68,14 +68,14 @@ Members: <?= $anime->mal_score ?>
 <a href="/anime/cast/<?= $anime->special_id ?>" onclick="return toggleCast()">Cast &#x2193;</a>
 </p>
 <table>
-<?php foreach($anime->cast as $char): ?>
-	<tr>
+<?php for ($i = 0; $i < count($anime->cast); $i++): ?>
+	<tr<? if ($i > 0) echo ' class="char"' ?>>
 		<td colspan="3">
-			<?= $char->character ?>
+			<?= $anime->cast[$i]->character ?>
 		</td>
 	</tr>
-	<?php if (isset($char->people)): ?>
-		<?php foreach($char->people as $actor): ?>
+	<?php if (isset($anime->cast[$i]->people)): ?>
+		<?php foreach($anime->cast[$i]->people as $actor): ?>
 			<tr>
 				<td></td>
 				<td><?= $actor->name ?></td>
@@ -83,7 +83,7 @@ Members: <?= $anime->mal_score ?>
 			</tr>
 		<?php endforeach; ?>
 	<?php endif; ?>
-<?php endforeach; ?>
+<?php endfor; ?>
 </table>
 <br>
 <p id="castlink">
diff --git a/webroot/css/view.css b/webroot/css/view.css
index 4b0a9a1..7d10164 100644
--- a/webroot/css/view.css
+++ b/webroot/css/view.css
@@ -15,13 +15,31 @@ section#cast {
 	float: left;
 	width: 620px;
 }
-section#cast p {
-	margin: 0;
+section#cast a {
+	padding: 4px 7px;
+	border: 1px solid #aaa;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	background: #ddd;
+	background: -moz-linear-gradient(top, #ddd, #bbb);
+	background: -webkit-linear-gradient(top, #ddd, #bbb);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#bbbbbb');
+	color: #111;
+}
+section#cast a:hover {
+	background: #eee;
+	background: -moz-linear-gradient(top, #eee, #ccc);
+	background: -webkit-linear-gradient(top, #eee, #ccc);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
 }
 section#cast table {
 	table-layout: fixed;
 	display: none;
 }
+section#cast tr.char {
+	border-top: 1px solid #ccc;
+}
 section#cast td {
 	padding: 3px;
 }
@@ -29,10 +47,10 @@ section#cast td:nth-child(1) {
 	width: 60px;
 }
 section#cast td:nth-child(2) {
-	width: 250px;
+	width: 300px;
 }
 section#cast td:nth-child(3) {
-	width: 200px;
+	width: 60px;
 }
 section#cast #castlink {
 	display: none;
@@ -41,8 +59,9 @@ section#cast #castlink {
 aside#malstats {
 	float: right;
 	width: 150px;
+	border-left: 1px solid #ccc;
+	padding-left: 15px;
 }
-
-p {
-	text-indent: 0;
+aside#malstats p {
+	margin-bottom: 2px;
 }
diff --git a/webroot/js/functions.js b/webroot/js/functions.js
index 86f3f3c..5f7d7ae 100644
--- a/webroot/js/functions.js
+++ b/webroot/js/functions.js
@@ -18,14 +18,14 @@ jQuery(document).ready(function($) {
 
 function toggleCast() {
 	var table = $('#cast table');
-	if (table.css('display') == 'inline') {
+	if (table.css('display') == 'block') {
 		table.css('display', 'none');
 		$('#cast > p > a').text('Cast ↓');
 		$('#castlink').css('display', 'none');
 	} else {
-		table.css('display', 'inline');
+		table.css('display', 'block');
 		$('#cast > p > a').text('Cast ↑');
-		$('#castlink').css('display', 'inline');
+		$('#castlink').css('display', 'block');
 	}
 	return false;
 }