coderkun/questlab
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Wiki Activity

library design

Browse source
This commit is contained in:
Daniel 2014-04-18 19:34:53 +02:00
commit 696905af82
4 changed files with 64 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

25
views/html/library/index.tpl
View file

@ -3,19 +3,26 @@
<img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>" /> <img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>" />
</div> </div>
<?php endif ?> <?php endif ?>
<h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1> <ul class="breadcrumbs">
<h2><?=_('Questtopics')?></h2> <li><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></li>
</ul>
<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) : ?> <?php foreach($questtopics as &$topic) : ?>
<li> <li class="cf">
<h3><a href="<?=$linker->link(array('library','topic',$seminary['url'],$topic['url']))?>"><?=$topic['title']?></a></h3> <i class="fa fa-file-o"></i>
<div class="cf"> <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"> <div class="xpbar">
<span style="width:<?=round($topic['characterQuestcount']/$topic['questcount']*100)?>%"></span> <span style="width:<?=round($topic['characterQuestcount']/$topic['questcount']*100)?>%"></span>
</div> </div>
<p class="xpnumeric"><?=$topic['characterQuestcount']?>/<?=$topic['questcount']?></p>
</div>
</li> </li>
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>

24
views/html/library/topic.tpl
View file

@ -3,26 +3,26 @@
<img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>" /> <img src="<?=$linker->link(array('media','seminaryheader',$seminary['url']))?>" />
</div> </div>
<?php endif ?> <?php endif ?>
<h1><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></h1> <ul class="breadcrumbs">
<h2><a href="<?=$linker->link(array('index',$seminary['url']),1)?>"><?=_('Questtopics')?></a></h2> <li><a href="<?=$linker->link(array('seminaries',$seminary['url']))?>"><?=$seminary['title']?></a></li>
<h3><?=$questtopic['title']?></h3> <li><i class="fa fa-chevron-right fa-fw"></i><a href="<?=$linker->link(array('index',$seminary['url']),1)?>"><?=_('Questtopics')?></a></li>
</ul>
<div class="cf"> <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"> <div class="xpbar">
<span style="width:<?=round($questtopic['characterQuestcount']/$questtopic['questcount']*100)?>%"></span> <span style="width:<?=round($questtopic['characterQuestcount']/$questtopic['questcount']*100)?>%"></span>
</div> </div>
<p class="xpnumeric"><?=$questtopic['characterQuestcount']?>/<?=$questtopic['questcount']?></p>
</div> </div>
<ul> <h2>Quests zu diesem Thema:</h2>
<ul class="libtop">
<?php foreach($quests as &$quest) : ?> <?php foreach($quests as &$quest) : ?>
<li> <li class="cf">
<a href="<?=$linker->link(array('quests','quest',$seminary['url'],$quest['questgroup']['url'],$quest['url']))?>"><?=$quest['title']?></a> <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>
<ul>
<?php foreach($quest['subtopics'] as &$subtopic) : ?> <?php foreach($quest['subtopics'] as &$subtopic) : ?>
<li><?=$subtopic['title']?></li> <p class="addon"><?=$subtopic['title']?></p>
<?php endforeach ?> <?php endforeach ?>
</ul>
</li> </li>
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>

2
views/html/users/index.tpl
View file

@ -4,6 +4,6 @@
</nav> </nav>
<ol class="cglist"> <ol class="cglist">
<?php foreach($users as &$user) : ?> <?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 ?> <?php endforeach ?>
</ol> </ol>

34
www/css/desktop.css
View file

@ -92,7 +92,7 @@ aside{display:none}
.moodpic img{width:100vw} .moodpic img{width:100vw}
.breadcrumbs li{display:block;font-size:.875em} .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 li{margin:0 0 25px 0;border-radius:3px;overflow:hidden}
.questgroups img{display:block;width:100%;} .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 img{float:left;margin-right:15px;width:50px;height:50px;border-radius:25px}
.cranks p,.ctopics p{margin:0;padding:0} .cranks p,.ctopics p{margin:0;padding:0}
.ctopics .xpbar{background:#e4e1dd} .ctopics .xpbar,.ltopics .xpbar{background:#e4e1dd}
.ctopics .xpbar span{background:#50a4ab} .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} .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 **/ /** Quest Types **/
.crossword table{width:100%;max-width:800px;border-spacing:2px;border-collapse:separate} .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%} .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} .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 .desc{padding-top:0}
.achmnts .unlcked{font-size:.75em;float:right;margin:-6px -4px 0 0;color:#878787} .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{float:left;width:44%}
.bossfight li:nth-child(even){float:right} .bossfight li:nth-child(even){float:right}
.bossfight input,.bossfight p{text-align:center} .bossfight input,.bossfight p{text-align:center}
@ -285,7 +313,7 @@ menu a{padding:10px 0}
.wrap{margin:0 0 0 300px} .wrap{margin:0 0 0 300px}
article{padding:20px 40px 80px 40px} article{padding:20px 40px 80px 40px}
.moodpic{margin:-20px -40px 0 -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%} .gchars li{width:19%}
} }