realing buttons

Valessio Soares de Brito
1 parent 265c3da0
Showing 2 changed files with 40 additions and 22 deletions Show diff stats
src/web/static/css/survey.css
src/web/templates/survey.html
@@ -20,22 +20,20 @@ top: 40px;
 width: 420px;
 }
-#tip-restart .tip,
-#tip-finish .tip,
-#tip-strategy .tip {
+#panel-controls label .tip,
+#controls-form label .tip {
 display: none;
 position: absolute;
-top: 15px;
-width: 400px;
-right: 0px;
+width: 200px;
+margin-top: -30px;
+right: 160px;
 font-size: 11px;
 font-weight: normal;
 color: #000000;
 }
-#tip-restart:hover .tip,
-#tip-finish:hover .tip,
-#tip-strategy:hover .tip { 
+#panel-controls label:hover .tip,
+#controls-form label:hover .tip { 
 display: block; 
 z-index: 3;
 }
@@ -53,9 +51,14 @@ height: auto;
 max-width: 780px;
 }
+#sidebar {
+min-height: 200px; 
+}
+
 body.survey #wrap {
 padding-top: 0px;
 min-height: 450px;
+position: relative;
 }
 /* Display None itens Survey */
@@ -85,7 +88,7 @@ margin-bottom: 10px;
 .radioButton,
 #next-button,
 #restart-button,
-#strategy-button,
+#continue-button,
 #finish-button {
 border: 1px solid #888a85;
 box-shadow: 0 1px 4px gray inset;
@@ -93,7 +96,7 @@ border-radius: 5px;
 color: #585C60;
 font-size: 12px;
 font-weight: 600;
-width: 135px;
+width: 150px;
 height: 30px;
 line-height: 14px;
 margin: 0;
@@ -114,11 +117,13 @@ text-align: left;
 vertical-align: middle;
 cursor: normal;
 width: 150px;
+height: 20px;
 margin-bottom: 10px;
 float: left;
 }
-#panel-controls { 
+#panel-controls {
+position: relative; 
 width: 180px;
 float: right;
 }
@@ -127,11 +132,17 @@ float: right;
 #next-button {
 text-align: center;
 position: absolute;
-top: 145px;
-left: 50%;
-margin-left: -250px;
-width: 500px;
+top: 120px;
+right: 65px;
+width: 150px;
 height: 20px;
+z-index: 3;
+}
+
+#controls-form {
+top: 90px;
+right: 85px;
+height: auto;
 }
@@ -30,21 +30,19 @@ $var jsfiles: static/coda-slider-2.0/javascripts/jquery-1.3.2.min.js static/coda
 <input type="hidden" name="user_id" value=$request.user_id>
 <input type="hidden" name="strategy" value=$request.strategy>
 <div id="controls-form" style="display: none;"><!-- display show in the end form -->
-
 <label for="finish_button" id="tip-finish">
    <div class="tip important">
    <p>Conclude your participation in this survey</p>
    </div>
    <input id="finish-button" name="finish_button" type="submit" value="Finish" class="glass" />
 </label>
-
-<label for="strategy_button" id="tip-strategy">
+<br />
+<label for="strategy_button" id="tip-continue">
    <div class="tip tip">
    <p>Evaluate more suggestions </p>
    </div>
-   <input id="strategy-button" name="strategy_button" type="submit" value="Continue" class="glass" />
+   <input id="continue-button" name="strategy_button" type="submit" value="Continue" class="glass" />
 </label>
-
 </div><!-- id="controls-form" -->
 <div class="coda-slider-wrapper">
@@ -59,17 +57,26 @@ $for pkg in pkg_details:
 		     	<div id="panel-controls">
 			<label class="glass radioButton">
 			<input class="radio" type="radio" name="evaluation-$pkg_details.index(pkg)" value="surprising" />
-			Pleasantly surprising
+			Pleasantly surprising 
+			<div class="tip tip">
+			<p>Pleasantly $pkg['package'] FIXME </p>
+			</div>
 			</label><br />
        			<label class="glass radioButton">
 			<img src="/static/images/yes-enb.JPG" alt="Yes, Good" style="float: right;">
 			<input class="radio" type="radio" name="evaluation-$pkg_details.index(pkg)" value="good" />
 			Good
+			<div class="tip tip">
+			<p>Good $pkg['package'] FIXME </p>
+			</div>
 			</label><br />
 			<label class="glass radioButton">
 			<img src="/static/images/no-dis.JPG" alt="Poor" style="float: right;">
 			<input class="radio" type="radio" name="evaluation-$pkg_details.index(pkg)" value="poor" />
 			Poor
+			<div class="tip tip">
+			<p>Poor $pkg['package'] FIXME </p>
+			</div>
 			</label>
 			<br style="clear: both;" />
 				<div class="screenshot">