mobile scroll box for quest texts

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

View file

@ -29,7 +29,11 @@
<?php if(!is_null($questtext)) : ?> <?php if(!is_null($questtext)) : ?>
<section> <section>
<h1><?=$questtext['type']?></h1> <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> <ul>
<?php foreach($questtext['sidequests'] as &$sidequest) : ?> <?php foreach($questtext['sidequests'] as &$sidequest) : ?>

View file

@ -75,7 +75,7 @@ menu a,#profile{display:block;padding:15px 0;color:#fff}
#toggle:checked ~ menu{display:block;opacity:1} #toggle:checked ~ menu{display:block;opacity:1}
#navicon{display:block;color:#fff} #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 li{margin:0 0 25px 0;border-radius:3px;overflow:hidden}
.questgroups img{display:block} .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} .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} .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 Queries **/
@media only screen and (min-width:480px){ @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){ @media only screen and (min-width:1024px){
header{position:fixed;left:0;top:0;bottom:0;width:300px;margin:0} 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{display:block;opacity:1;position:relative}
menu a{padding:10px 0} 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} #toggle,.toggle{display:none}
.wrap{margin:0 20px 0 340px} .wrap{margin:0 20px 0 340px}
article{padding-top:0} article{padding-top:20px}
} }