From bde658d7a499e9c690bb81a0bb16792e2b17ccc5 Mon Sep 17 00:00:00 2001
From: Daniel <Daniel@Daniel-PC.speedport.ip>
Date: Thu, 17 Apr 2014 17:39:54 +0200
Subject: [PATCH] charactergroups design update

---
 views/html/charactergroups/group.tpl       | 32 ++++++++---------
 views/html/charactergroups/groupsgroup.tpl | 23 ++++++------
 views/html/charactergroups/index.tpl       |  9 ++---
 views/html/charactergroupsquests/quest.tpl | 42 +++++++++++-----------
 www/css/desktop.css                        | 35 +++++++++++-------
 5 files changed, 78 insertions(+), 63 deletions(-)

diff --git a/views/html/charactergroups/group.tpl b/views/html/charactergroups/group.tpl
index ba53c97b..0f6f88d3 100644
--- a/views/html/charactergroups/group.tpl
+++ b/views/html/charactergroups/group.tpl
@@ -3,23 +3,21 @@
 	<img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>">
 </div>
 <?php endif ?>
-<h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1>
-<h2><a href="<?=$linker->link(array('index',$seminary['url']),1)?>"><?=_('Character Groups')?></a></h2>
-<h3><a href="<?=$linker->link(array('groupsgroup',$seminary['url'],$groupsgroup['url']),1)?>"><?=$groupsgroup['name']?></a></h3>
-<section class="gdata cf">
-	<div class="gbanner">
-		<img src="http://s1.directupload.net/images/140325/3eqybn4i.png">
-	</div>
-	<div class="gdesc">
-		<h3><?=$group['name']?></h3>
-		<span><?=$group['motto']?></span>
-	</div>
-	<ul>
-		<li><i class="fa fa-th-list fa-fw"></i><?=$group['rank']?>. <?=_('Rank')?></li>
-		<li><i class="fa fa-lightbulb-o fa-fw"></i><?=$group['xps']?> XPs</li>
-		<li><i class="fa fa-users fa-fw"></i><?=count($group['characters'])?> <?=(count($group['characters']) > 1) ? _('Members') : _('Member')?></li>
-	</ul>
-</section>
+<ul class="breadcrumbs">
+	<li><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></li>
+	<li><i class="fa fa-chevron-right fa-fw"></i><a href="<?=$linker->link(array('index',$seminary['url']),1)?>"><?=_('Character Groups')?></a></li>
+	<li><i class="fa fa-chevron-right fa-fw"></i><a href="<?=$linker->link(array('groupsgroup',$seminary['url'],$groupsgroup['url']),1)?>"><?=$groupsgroup['name']?></a></li>
+</ul>
+<div class="gbanner cf">
+	<img src="http://s1.directupload.net/images/140325/3eqybn4i.png" class="gbanner">
+	<h1><?=$group['name']?></h1>
+	<p>"<?=$group['motto']?>"</p>
+</div>
+<ul class="gdata cf">
+	<li><?=$group['rank']?>. <?=_('Rank')?></li>
+	<li><?=$group['xps']?> XP</li>
+	<li><?=count($group['characters'])?> <?=(count($group['characters']) > 1) ? _('Members') : _('Member')?></li>
+</ul>
 
 <section>
 	<h1><i class="fa fa-users fa-fw"></i><?=_('Characters')?></h1>
diff --git a/views/html/charactergroups/groupsgroup.tpl b/views/html/charactergroups/groupsgroup.tpl
index 93aeaba7..3d337cf3 100644
--- a/views/html/charactergroups/groupsgroup.tpl
+++ b/views/html/charactergroups/groupsgroup.tpl
@@ -3,19 +3,22 @@
 	<img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>">
 </div>
 <?php endif ?>
-<h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1>
-<h2><a href="<?=$linker->link(array('index',$seminary['url']),1)?>"><?=_('Character Groups')?></a></h2>
-<h3><?=$groupsgroup['name']?></h3>
-
-<ul>
-	<?php foreach($groups as &$group) : ?>
-	<li><a href="<?=$linker->link(array('group',$seminary['url'],$groupsgroup['url'],$group['url']),1)?>"><?=$group['name']?> (<?=$group['xps']?> XPs)</a></li>
-	<?php endforeach ?>
+<ul class="breadcrumbs">
+	<li><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></li>
+	<li><i class="fa fa-chevron-right fa-fw"></i><a href="<?=$linker->link(array('index',$seminary['url']),1)?>"><?=_('Character Groups')?></a></li>
 </ul>
 
+<h1><?=$groupsgroup['name']?></h1>
 
-<h3><?=_('Character Groups Quests')?></h3>
-<ul>
+<ol class="cglist">
+	<?php foreach($groups as &$group) : ?>
+	<li><a href="<?=$linker->link(array('group',$seminary['url'],$groupsgroup['url'],$group['url']),1)?>"><?=$group['name']?></a><span class="xp"><?=$group['xps']?> XP</span></li>
+	<?php endforeach ?>
+</ol>
+
+
+<h2><?=_('Character Groups Quests')?></h2>
+<ul class="cgqlist">
 	<?php foreach($quests as &$quest) : ?>
 	<li><a href="<?=$linker->link(array('charactergroupsquests','quest',$seminary['url'],$groupsgroup['url'],$quest['url']))?>"><?=$quest['title']?></a></li>
 	<?php endforeach ?>
diff --git a/views/html/charactergroups/index.tpl b/views/html/charactergroups/index.tpl
index e0f54b94..d88d25eb 100644
--- a/views/html/charactergroups/index.tpl
+++ b/views/html/charactergroups/index.tpl
@@ -3,10 +3,11 @@
 	<img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>">
 </div>
 <?php endif ?>
-<h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1>
-<h2><?=_('Character Groups')?></h2>
-
-<ul>
+<ul class="breadcrumbs">
+	<li><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></li>
+</ul>
+<h1><?=_('Character Groups')?></h1>
+<ul class="cgqlist">
 	<?php foreach($groupsgroups as &$group) : ?>
 	<li><a href="<?=$linker->link(array('groupsgroup',$seminary['url'],$group['url']),1)?>"><?=$group['name']?></a></li>
 	<?php endforeach ?>
diff --git a/views/html/charactergroupsquests/quest.tpl b/views/html/charactergroupsquests/quest.tpl
index 8112a913..060cf3ab 100644
--- a/views/html/charactergroupsquests/quest.tpl
+++ b/views/html/charactergroupsquests/quest.tpl
@@ -3,19 +3,23 @@
 	<img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>">
 </div>
 <?php endif ?>
-<h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1>
-<h2><?=_('Character Groups Quests')?></h2>
-<h3><a href="<?=$linker->link(array('charactergroups','groupsgroup',$seminary['url'],$groupsgroup['url']))?>"><?=$groupsgroup['name']?></a></h3>
-<h4><?=$quest['title']?></h4>
+<ul class="breadcrumbs">
+	<li><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></li>
+	<li><i class="fa fa-chevron-right fa-fw"></i><a href="<?=$linker->link(array('charactergroups','groupsgroup',$seminary['url'],$groupsgroup['url']))?>"><?=$groupsgroup['name']?></a></li>
+	<li><i class="fa fa-chevron-right fa-fw"></i><?=_('Character Groups Quests')?></li>
+</ul>
 
-<?php if(!is_null($media)) : ?>
-<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>" />
-<?php endif ?>
+<h1><?=$quest['title']?></h1>
+<small>Maximale Belohnung: <span class="fwb"><?=$quest['xps']?> XP</span></small>
 
 <section>
-	<p>XPs: <?=$quest['xps']?></p>
 	<h1><?=_('Description')?></h1>
-	<p><?=\hhu\z\Utils::t($quest['description'])?></p>
+	<p>
+	<?php if(!is_null($media)) : ?>
+	<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>" class="grpqimg" />
+	<?php endif ?>
+	<?=\hhu\z\Utils::t($quest['description'])?>
+	</p>
 	<?php if(!empty($quest['rules'])) : ?>
 	<h1><?=_('Rules')?></h1>
 	<p><?=\hhu\z\Utils::t($quest['rules'])?></p>
@@ -37,15 +41,13 @@
 
 <section>
 	<h1><?=$groupsgroup['name']?></h1>
-	<table>
-		<tbody>
-			<?php foreach($groups as &$group) : ?>
-			<tr>
-				<td><?=$dateFormatter->format(new \DateTime($group['created']))?></td>
-				<td><a href="<?=$linker->link(array('charactergroups','group',$seminary['url'],$groupsgroup['url'],$group['url']))?>"><?=$group['name']?></a></td>
-				<td><?=$group['xps']?>/<?=$quest['xps']?> XPs</td>
-			</tr>
-			<?php endforeach ?>
-		</tbody>
-	</table>
+	<ul class="grpqlist">
+		<?php foreach($groups as &$group) : ?>
+		<li>
+			<span class="date"><?=$dateFormatter->format(new \DateTime($group['created']))?></span>
+			<span class="group"><a href="<?=$linker->link(array('charactergroups','group',$seminary['url'],$groupsgroup['url'],$group['url']))?>"><?=$group['name']?></a></span>
+			<span class="xp"><?=$group['xps']?> XP</span>
+		</li>
+		<?php endforeach ?>
+	</ul>
 </section>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index cfff8097..fa06d795 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -113,7 +113,7 @@ aside{display:none}
 
 #qtextbox{font-size:.875em;border-radius:5px;background:#fff;border:15px solid #fff;height:200px;overflow:hidden}
 .qtext{padding-right:15px}
-.qtext img{float:right;margin-left:15px;max-width:30%;border-radius:3px}
+.qtext img,.grpqimg{float:right;margin-left:15px;max-width:30%;border-radius:3px}
 
 .xpinfo{display:none}
 .xpbar{width:60%;float:left;height:10px;position:relative;background:#eee;border-radius:25px;margin:8px 0 16px}
@@ -163,12 +163,19 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .ctopics .xpbar span{background:#50a4ab}
 
 
+/** Charactergroup List **/
+
+.cglist li{list-style-type:decimal;background:#fff;margin:0 0 6px 25px;padding:5px 15px;border-radius:3px}
+.cglist .xp{float:right}
+.cgqlist li{list-style-type:square;margin-left:25px;padding:2px 15px}
+
 /** Charactergroup Profile **/
 
-.gdata{margin-top:20px}
-.gdata img{border-radius:3px;margin-bottom:15px}
-.gdata h1{margin:0;padding:0}
-.gdata .fa{color:#aca8a1}
+.gbanner img{margin-top:10px;border-radius:3px}
+.gbanner h1{margin:10px 0 5px 0}
+
+.gdata{margin:20px 0 40px 0}
+.gdata li{float:left;background:#fff;padding:5px 15px;margin:0 5px 5px 0;border-radius:3px}
 
 .gchars li{background:#fff;padding:15px 0;border-radius:3px;float:left;margin-bottom:5px;width:49%}
 .gchars li:nth-child(even){float:right}
@@ -182,6 +189,14 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .gquests .xp{display:block}
 
 
+/** Charactergroup Quest **/
+
+.grpqlist li{background:#fff;margin-bottom:6px;padding:5px 15px 5px 0;font-size:.875em;border-radius:3px}
+.grpqlist .date{padding:0 15px;border-right:1px solid #dad8d5}
+.grpqlist .group{padding:0 15px}
+.grpqlist .xp{float:right}
+
+
 /** Achievements **/
 
 .rare ol{margin-bottom:40px}
@@ -228,9 +243,9 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .cinfo{float:left;width:70%}
 .cportrait{float:right;width:25%}
 
-.gdata .gbanner{float:left;min-width:100px}
-.gdata .gdesc{float:left;width:75%}
-.gdata ul{clear:both}
+.gbanner img{float:left;margin:20px 20px 0 0}
+.gbanner h1{margin:25px 0 2px}
+
 .gchars li{width:32%;margin-right:5px}
 .gchars li:nth-child(even){float:left}
 
@@ -242,10 +257,6 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 @media only screen and (min-width:768px){
 .xpbar{width:70%}
 
-.gdata{margin-top:40px}
-.gdata .gdesc{width:60%}
-.gdata li{font-size:.875em;padding-bottom:5px}
-.gdata ul{clear:none;float:right;width:20%;margin:0;padding:0}
 .gchars li{width:19%}
 
 .gquests .date{display:inline;margin-right:15px}