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

mobile scroll box for quest texts

Browse source
This commit is contained in:
Daniel 2014-03-21 21:32:03 +01:00
commit 69c64710f3
2 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
views/html/quests/quest.tpl
View file

@ -29,7 +29,11 @@
<?php if(!is_null($questtext)) : ?>
<section>
<h1><?=$questtext['type']?></h1>
<p><?=\hhu\z\Utils::t($questtext['text'])?></p>
<p class="qtextbox">
<?=\hhu\z\Utils::t($questtext['text'])?>
</p>
<p class="qtexticon"><i class="fa fa-angle-down"></i></p>
<ul>
<?php foreach($questtext['sidequests'] as &$sidequest) : ?>

10
www/css/desktop.css
View file

@ -75,7 +75,7 @@ menu a,#profile{display:block;padding:15px 0;color:#fff}
#toggle:checked ~ menu{display:block;opacity:1}
#navicon{display:block;color:#fff}
article{padding-top:5.375em;margin-bottom:30px}
article{padding:70px 0 30px}
.questgroups li{margin:0 0 25px 0;border-radius:3px;overflow:hidden}
.questgroups img{display:block}
@ -98,6 +98,9 @@ article{padding-top:5.375em;margin-bottom:30px}
.cta{display:inline-block;margin-top:10px;color:#fff;font-weight:700;padding:7px 20px;border-radius:4px}
.orange{text-shadow:1px 2px #d4701a;background:#f5821f;border:solid #d4701a;border-width:0 0 3px 0}
.qtextbox{font-size:0.875em;background:#fff;height:200px;padding:0 20px;margin:0;border:20px solid #fff;border-width:20px 0 10px;border-radius:3px 3px 0 0;overflow-y:scroll;-webkit-overflow-scrolling:touch}
.qtexticon{background:#fff;background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(247,245,242,1) 100%);padding-bottom:5px;border-radius:0 0 3px 3px;text-align:center}
/** Media Queries **/
@media only screen and (min-width:480px){
@ -107,10 +110,11 @@ article{padding-top:5.375em;margin-bottom:30px}
@media only screen and (min-width:1024px){
header{position:fixed;left:0;top:0;bottom:0;width:300px;margin:0}
header nav{margin:0 10%}
menu{display:block;opacity:1;position:relative}
menu a{padding:10px 0}
#profile{float:none;margin:15px 15px 0 15px}
#profile{float:none;margin:30px 0 15px 12px}
#toggle,.toggle{display:none}
.wrap{margin:0 20px 0 340px}
article{padding-top:0}
article{padding-top:20px}
}