From 696905af8289fe73c2884345bfd227dce473b37e Mon Sep 17 00:00:00 2001
From: Daniel <Daniel@Daniel-PC.speedport.ip>
Date: Fri, 18 Apr 2014 19:34:53 +0200
Subject: [PATCH] library design

---
 views/html/library/index.tpl | 29 ++++++++++++++++++-----------
 views/html/library/topic.tpl | 28 ++++++++++++++--------------
 views/html/users/index.tpl   |  2 +-
 www/css/desktop.css          | 34 +++++++++++++++++++++++++++++++---
 4 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/views/html/library/index.tpl b/views/html/library/index.tpl
index be5b441d..df59a4bd 100644
--- a/views/html/library/index.tpl
+++ b/views/html/library/index.tpl
@@ -3,18 +3,25 @@
 	<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><?=_('Questtopics')?></h2>
-
-<ul>
+<ul class="breadcrumbs">
+	<li><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></li>
+</ul>
+<h1><i class="fa fa-book fa-fw"></i><?=_('Questtopics')?></h1>
+<p>Hier findest du alle Themen aus der Vorlesung "Wissensrepräsentation" und die passenden Quests zum Nachschlagen und Wiederholen. Dein Fortschritt in "Die Legende von Zyren" beeinflusst den Umfang der Bibliothek, spiele also regelmäßig weiter und schalte so Quest für Quest alle Inhalte frei.</p>
+<div class="libindxpr cf">
+	<p><small>Gesamtfortschritt: 77%</small></p>
+	<div class="xpbar">
+		<span style="width:77%"></span>
+	</div>
+</div>
+<ul class="libindx cf">
 	<?php foreach($questtopics as &$topic) : ?>
-	<li>
-		<h3><a href="<?=$linker->link(array('library','topic',$seminary['url'],$topic['url']))?>"><?=$topic['title']?></a></h3>
-		<div class="cf">
-			<div class="xpbar">
-				<span style="width:<?=round($topic['characterQuestcount']/$topic['questcount']*100)?>%"></span>
-			</div>
-			<p class="xpnumeric"><?=$topic['characterQuestcount']?>/<?=$topic['questcount']?></p>
+	<li class="cf">
+		<i class="fa fa-file-o"></i>
+		<p class="ltopc"><a href="<?=$linker->link(array('library','topic',$seminary['url'],$topic['url']))?>"><?=$topic['title']?></a></p>
+		<p><small>Fortschritt: <?=$topic['characterQuestcount']?> / <?=$topic['questcount']?></small></p>
+		<div class="xpbar">
+			<span style="width:<?=round($topic['characterQuestcount']/$topic['questcount']*100)?>%"></span>
 		</div>
 	</li>
 	<?php endforeach ?>
diff --git a/views/html/library/topic.tpl b/views/html/library/topic.tpl
index be396d4f..0a87f533 100644
--- a/views/html/library/topic.tpl
+++ b/views/html/library/topic.tpl
@@ -3,26 +3,26 @@
 	<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)?>"><?=_('Questtopics')?></a></h2>
-<h3><?=$questtopic['title']?></h3>
-
-<div class="cf">
+<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)?>"><?=_('Questtopics')?></a></li>
+</ul>
+<h1><i class="fa fa-book fa-fw"></i><?=$questtopic['title']?></h1>
+<div class="libindxpr cf">
+	<p><small>Themenfortschritt: <?=$questtopic['characterQuestcount']?> / <?=$questtopic['questcount']?></small></p>
 	<div class="xpbar">
 		<span style="width:<?=round($questtopic['characterQuestcount']/$questtopic['questcount']*100)?>%"></span>
 	</div>
-	<p class="xpnumeric"><?=$questtopic['characterQuestcount']?>/<?=$questtopic['questcount']?></p>
 </div>
 
-<ul>
+<h2>Quests zu diesem Thema:</h2>
+<ul class="libtop">
 	<?php foreach($quests as &$quest) : ?>
-	<li>
-		<a href="<?=$linker->link(array('quests','quest',$seminary['url'],$quest['questgroup']['url'],$quest['url']))?>"><?=$quest['title']?></a>
-		<ul>
-			<?php foreach($quest['subtopics'] as &$subtopic) : ?>
-			<li><?=$subtopic['title']?></li>
-			<?php endforeach ?>
-		</ul>
+	<li class="cf">
+		<p><a href="<?=$linker->link(array('quests','quest',$seminary['url'],$quest['questgroup']['url'],$quest['url']))?>">Die vielen Facetten des Orden des<?=$quest['title']?></a></p>
+		<?php foreach($quest['subtopics'] as &$subtopic) : ?>
+		<p class="addon"><?=$subtopic['title']?></p>
+		<?php endforeach ?>
 	</li>
 	<?php endforeach ?>
 </ul>
diff --git a/views/html/users/index.tpl b/views/html/users/index.tpl
index b86a0348..9f36049c 100644
--- a/views/html/users/index.tpl
+++ b/views/html/users/index.tpl
@@ -4,6 +4,6 @@
 </nav>
 <ol class="cglist">
 	<?php foreach($users as &$user) : ?>
-	<li><a href="<?=$linker->link(array('user', $user['username']), 1)?>"><?=$user['username']?></a><span class="xp"><?=sprintf(_('registered on %s'),  $dateFormatter->format(new \DateTime($user['created'])))?></span></li>
+	<li><a href="<?=$linker->link(array('user', $user['username']), 1)?>"><?=$user['username']?></a><span class="xp"><small><?=sprintf(_('registered on %s'),  $dateFormatter->format(new \DateTime($user['created'])))?></small></span></li>
 	<?php endforeach ?>
 </ol>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index 485e3713..e8dff95b 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -92,7 +92,7 @@ aside{display:none}
 .moodpic img{width:100vw}
 
 .breadcrumbs li{display:block;font-size:.875em}
-.breadcrumbs .fa{padding-right:5px;font-size:.75em}
+.breadcrumbs .fa{padding-right:5px;font-size:.75em;color:#989693}
 
 .questgroups li{margin:0 0 25px 0;border-radius:3px;overflow:hidden}
 .questgroups img{display:block;width:100%;}
@@ -162,7 +162,7 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .cranks img{float:left;margin-right:15px;width:50px;height:50px;border-radius:25px}
 .cranks p,.ctopics p{margin:0;padding:0}
 
-.ctopics .xpbar{background:#e4e1dd}
+.ctopics .xpbar,.ltopics .xpbar{background:#e4e1dd}
 .ctopics .xpbar span{background:#50a4ab}
 
 
@@ -217,6 +217,23 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .achmnts .xpnumeric{margin:0}
 
 
+/** Library **/
+
+.libindxpr{margin:20px 0}
+.libindxpr p{font-weight:bold;margin:0}
+.libindxpr .xpbar{float:none;margin:9px 0 20px 0;background:#e4e1dd;width:100%}
+.libindxpr .xpbar span{background:#50a4ab}
+
+.libindx li{text-align:center;background:#fff;border-radius:3px;margin:0 0 15px 0;padding:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
+.libindx i{margin-bottom:15px;font-size:1.25em;padding:0}
+.libindx .ltopc{overflow:hidden;text-overflow:ellipsis}
+.libindx .xpbar{width:100%;margin:0}
+
+.libtop li{background:#fff;padding:5px 5px 5px 10px;border-radius:3px;margin-bottom:6px}
+.libtop p{margin-bottom:6px}
+.libtop .addon{float:left;margin-right:5px;padding:2px 5px;border-radius:3px;background:#f7f5f2;font-size:.875em}
+
+
 /** Quest Types **/
 
 .crossword table{width:100%;max-width:800px;border-spacing:2px;border-collapse:separate}
@@ -254,6 +271,10 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 
 .achmnts .xpbar{width:89%}
 
+.libindx li{float:left;width:49%}
+.libindx li:nth-child(2n){float:right}
+.libindx .ltopc{height:80px}
+
 .opponent .hero{max-width:200px}
 }
 
@@ -270,6 +291,13 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .achmnts .desc{padding-top:0}
 .achmnts .unlcked{font-size:.75em;float:right;margin:-6px -4px 0 0;color:#878787}
 
+.libindx li{float:left;width:32%;margin-right:2%}
+.libindx li:nth-child(2n){float:left}
+.libindx li:nth-child(3n){margin-right:0}
+
+.libtop p{float:left;margin-bottom:0}
+.libtop .addon{float:right;margin:0 0 0 5px}
+
 .bossfight li{float:left;width:44%}
 .bossfight li:nth-child(even){float:right}
 .bossfight input,.bossfight p{text-align:center}
@@ -285,7 +313,7 @@ menu a{padding:10px 0}
 .wrap{margin:0 0 0 300px}
 article{padding:20px 40px 80px 40px}
 .moodpic{margin:-20px -40px 0 -40px}
-.breadcrumbs li{display:inline;padding-right:10px}
+.breadcrumbs li{display:inline;padding-right:5px}
 
 .gchars li{width:19%}
 }