From 1d7cfc6ceb63fbe8cc39f7e8002f7368863bca06 Mon Sep 17 00:00:00 2001
From: Daniel <Daniel@Daniel-PC.speedport.ip>
Date: Wed, 16 Apr 2014 15:28:09 +0200
Subject: [PATCH] boss fight design

---
 questtypes/bossfight/html/quest.tpl      | 64 +++++++++----------
 questtypes/bossfight/html/submission.tpl | 79 +++++++++++-------------
 www/css/desktop.css                      | 10 +++
 3 files changed, 75 insertions(+), 78 deletions(-)

diff --git a/questtypes/bossfight/html/quest.tpl b/questtypes/bossfight/html/quest.tpl
index ba427577..d28a153e 100644
--- a/questtypes/bossfight/html/quest.tpl
+++ b/questtypes/bossfight/html/quest.tpl
@@ -1,39 +1,31 @@
-<table>
-	<tbody>
-		<tr>
-			<td>
-				<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$character['avatar_url']))?>" />
-			</td>
-			<td>
-				<?php if(array_key_exists('bossmedia', $fight)) : ?>
-				<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$fight['bossmedia']['url']))?>" />
-				<?php endif ?>
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<?=$character['name']?>:
-				<?php if($lives['character'] > 0) : ?>
-				<?php foreach(range(1,$lives['character']) as $i) : ?>
-				♥
-				<?php endforeach ?>
-				<?php else : ?>
-				<?=_('lost')?>
-				<?php endif ?>
-			</td>
-			<td>
-				<?=$fight['bossname']?>:
-				<?php if($lives['boss'] > 0) : ?>
-				<?php foreach(range(1,$lives['boss']) as $i) : ?>
-				♥
-				<?php endforeach ?>
-				<?php else : ?>
-				<?=_('lost')?>
-				<?php endif ?>
-			</td>
-		</tr>
-	</tbody>
-</table>
+<div class="cf">
+<section class="opponent">
+	<p class="fwb"><?=$character['name']?></p>
+	<p class="portrait"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$character['avatar_url']))?>" class="hero" /></p>
+	<p>
+		<?php if($lives['character'] > 0) : ?>
+		<?php foreach(range(1,$lives['character']) as $i) : ?>
+		<i class="fa fa-heart fa-fw"></i>
+		<?php endforeach ?>
+		<?php else : ?>
+		<?=_('lost')?>
+		<?php endif ?>
+	</p>
+</section>
+<section class="opponent">
+	<p class="fwb"><?=$fight['bossname']?></p>
+	<p class="portrait"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$fight['bossmedia']['url']))?>" class="boss" /></p>
+	<p>
+		<?php if($lives['boss'] > 0) : ?>
+		<?php foreach(range(1,$lives['boss']) as $i) : ?>
+		<i class="fa fa-heart fa-fw"></i>
+		<?php endforeach ?>
+		<?php else : ?>
+		<?=_('lost')?>
+		<?php endif ?>
+	</p>
+</section>
+</div>
 
 <p><?=\hhu\z\Utils::t($stage['text'])?></p>
 
diff --git a/questtypes/bossfight/html/submission.tpl b/questtypes/bossfight/html/submission.tpl
index 33cf172f..6861e0ea 100644
--- a/questtypes/bossfight/html/submission.tpl
+++ b/questtypes/bossfight/html/submission.tpl
@@ -1,43 +1,38 @@
-<table>
-	<tbody>
-		<tr>
-			<td>
-				<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$character['avatar_url']))?>" />
-			</td>
-			<td>
-				<?php if(array_key_exists('bossmedia', $fight)) : ?>
-				<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$fight['bossmedia']['url']))?>" />
-				<?php endif ?>
-			</td>
-		</tr>
-		<?php foreach($stages as &$stage) : ?>
-		<tr>
-			<td colspan="2">
-				<?=$stage['question']?>
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<?=$character['name']?>:
-				<?php if($stage['lives']['character'] > 0) : ?>
-				<?php foreach(range(1,$stage['lives']['character']) as $i) : ?>
-				♥
-				<?php endforeach ?>
-				<?php else : ?>
-				<?=_('lost')?>
-				<?php endif ?>
-			</td>
-			<td>
-				<?=$fight['bossname']?>:
-				<?php if($stage['lives']['boss'] > 0) : ?>
-				<?php foreach(range(1,$stage['lives']['boss']) as $i) : ?>
-				♥
-				<?php endforeach ?>
-				<?php else : ?>
-				<?=_('lost')?>
-				<?php endif ?>
-			</td>
-		</tr>
+<div class="cf">
+<section class="opponent">
+	<p class="portrait"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$character['avatar_url']))?>" class="hero" /></p>
+</section>
+<section class="opponent">
+	<p class="portrait"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$fight['bossmedia']['url']))?>" class="boss" /></p>
+</section>
+</div>
+
+<?php foreach($stages as &$stage) : ?>
+<p><?=$stage['question']?></p>
+<div class="cf">
+<section class="opponent">
+	<p class="fwb"><?=$character['name']?></p>
+	<p>
+		<?php if($lives['character'] > 0) : ?>
+		<?php foreach(range(1,$lives['character']) as $i) : ?>
+		<i class="fa fa-heart fa-fw"></i>
 		<?php endforeach ?>
-	</tbody>
-</table>
+		<?php else : ?>
+		<?=_('lost')?>
+		<?php endif ?>
+	</p>
+</section>
+<section class="opponent">
+	<p class="fwb"><?=$fight['bossname']?></p>
+	<p>
+		<?php if($lives['boss'] > 0) : ?>
+		<?php foreach(range(1,$lives['boss']) as $i) : ?>
+		<i class="fa fa-heart fa-fw"></i>
+		<?php endforeach ?>
+		<?php else : ?>
+		<?=_('lost')?>
+		<?php endif ?>
+	</p>
+</section>
+</div>
+<?php endforeach ?>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index b9dabe4a..ed0f25b3 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -182,6 +182,14 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .crossword li{margin-top:20px}
 .crossword .index{position:absolute;font-size:0.625em;margin:-2px 0 0 2px}
 
+.opponent{width:50%;float:left}
+.opponent .portrait{height:250px;overflow:hidden;margin-bottom:15px}
+.opponent .hero{background:#fff;max-width:130px}
+.opponent .boss{max-width:100%}
+.opponent p{text-align:center}
+.opponent .fa{font-size:1.25em;color:#c7135b;padding-right:0}
+
+
 /** Media Queries **/
 
 @media only screen and (min-width:480px){
@@ -198,6 +206,8 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .gdata ul{clear:both}
 .gchars li{width:32%;margin-right:5px}
 .gchars li:nth-child(even){float:left}
+
+.opponent .hero{max-width:200px}
 }
 
 @media only screen and (min-width:768px){