Commit 4cd43aa7c57d8d37b652cf6848806578c712f7fd
1 parent
228bfd63
Exists in
master
and in
1 other branch
fix several bugs on radio buttons and apply style
Showing
9 changed files
with
61 additions
and
31 deletions
Show diff stats
src/web/static/coda-slider-2.0/javascripts/jquery.coda-slider-2.0.js
| @@ -16,7 +16,7 @@ var sliderCount = 1; | @@ -16,7 +16,7 @@ var sliderCount = 1; | ||
| 16 | $.fn.codaSlider = function(settings) { | 16 | $.fn.codaSlider = function(settings) { |
| 17 | 17 | ||
| 18 | settings = $.extend({ | 18 | settings = $.extend({ |
| 19 | - autoHeight: true, | 19 | + autoHeight: false, |
| 20 | autoHeightEaseDuration: 1000, | 20 | autoHeightEaseDuration: 1000, |
| 21 | autoHeightEaseFunction: "easeInOutExpo", | 21 | autoHeightEaseFunction: "easeInOutExpo", |
| 22 | autoSlide: false, | 22 | autoSlide: false, |
| @@ -47,7 +47,7 @@ $.fn.codaSlider = function(settings) { | @@ -47,7 +47,7 @@ $.fn.codaSlider = function(settings) { | ||
| 47 | if (settings.dynamicArrows) { | 47 | if (settings.dynamicArrows) { |
| 48 | slider.parent().addClass("arrows"); | 48 | slider.parent().addClass("arrows"); |
| 49 | slider.before('<div class="coda-nav-left" id="coda-nav-left-' + sliderCount + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>'); | 49 | slider.before('<div class="coda-nav-left" id="coda-nav-left-' + sliderCount + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>'); |
| 50 | - slider.after('<div class="coda-nav-right" id="coda-nav-right-' + sliderCount + '"><a accesskey="n" class="glass" id="next-button" onClick="document.getElementById(coda-nav-right-1).style.display = none;" href="#">' + settings.dynamicArrowRightText + '</a></div>'); | 50 | + slider.after('<div class="coda-nav-right" id="coda-nav-right-' + sliderCount + '"><a class="glass" id="next-button" onClick="document.getElementById(coda-nav-right-1).style.display = none;" href="#">' + settings.dynamicArrowRightText + '</a></div>'); |
| 51 | }; | 51 | }; |
| 52 | 52 | ||
| 53 | var panelWidth = slider.find(".panel").width(); | 53 | var panelWidth = slider.find(".panel").width(); |
src/web/static/coda-slider-2.0/stylesheets/coda-slider-2.0.css
| @@ -16,13 +16,13 @@ | @@ -16,13 +16,13 @@ | ||
| 16 | .coda-slider { background: #ebebeb } | 16 | .coda-slider { background: #ebebeb } |
| 17 | 17 | ||
| 18 | /* Use this to keep the slider content contained in a box even when JavaScript is disabled */ | 18 | /* Use this to keep the slider content contained in a box even when JavaScript is disabled */ |
| 19 | - .coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px } | 19 | + .coda-slider-no-js .coda-slider { height: 300px; overflow: auto !important; padding-right: 20px } |
| 20 | 20 | ||
| 21 | /* Change the width of the entire slider (without dynamic arrows) */ | 21 | /* Change the width of the entire slider (without dynamic arrows) */ |
| 22 | - .coda-slider, .coda-slider .panel { width: 600px } | 22 | + .coda-slider, .coda-slider .panel { width: 700px } |
| 23 | 23 | ||
| 24 | /* Change margin and width of the slider (with dynamic arrows) */ | 24 | /* Change margin and width of the slider (with dynamic arrows) */ |
| 25 | - .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 500px } | 25 | + .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px } |
| 26 | .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px } | 26 | .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px } |
| 27 | 27 | ||
| 28 | /* Arrow styling | 28 | /* Arrow styling |
src/web/static/css/style.css
| @@ -51,7 +51,7 @@ blockquote:before, blockquote:after, q:before, q:after { content: ""; } | @@ -51,7 +51,7 @@ blockquote:before, blockquote:after, q:before, q:after { content: ""; } | ||
| 51 | */ | 51 | */ |
| 52 | 52 | ||
| 53 | body{ | 53 | body{ |
| 54 | -background: #d8e1e7; /* f2f6f8 */ | 54 | +background: #b7d2ef; |
| 55 | font-family: Arial, Verdana, sans-serif; | 55 | font-family: Arial, Verdana, sans-serif; |
| 56 | font-size: 0.9em; | 56 | font-size: 0.9em; |
| 57 | line-height: 1.1; | 57 | line-height: 1.1; |
| @@ -84,6 +84,8 @@ outline: medium none; | @@ -84,6 +84,8 @@ outline: medium none; | ||
| 84 | padding: 15px; | 84 | padding: 15px; |
| 85 | } | 85 | } |
| 86 | 86 | ||
| 87 | +body.about #header { display: none; } | ||
| 88 | + | ||
| 87 | #logo span { display: none; } | 89 | #logo span { display: none; } |
| 88 | #logo { | 90 | #logo { |
| 89 | display: none; | 91 | display: none; |
src/web/static/css/survey.css
| @@ -26,7 +26,7 @@ width: 420px; | @@ -26,7 +26,7 @@ width: 420px; | ||
| 26 | display: none; | 26 | display: none; |
| 27 | position: absolute; | 27 | position: absolute; |
| 28 | top: 15px; | 28 | top: 15px; |
| 29 | -width: 300px; | 29 | +width: 400px; |
| 30 | right: 0px; | 30 | right: 0px; |
| 31 | font-size: 11px; | 31 | font-size: 11px; |
| 32 | font-weight: normal; | 32 | font-weight: normal; |
| @@ -40,18 +40,13 @@ display: block; | @@ -40,18 +40,13 @@ display: block; | ||
| 40 | z-index: 3; | 40 | z-index: 3; |
| 41 | } | 41 | } |
| 42 | 42 | ||
| 43 | -#next-button:hover, | ||
| 44 | -#controls-form input:hover { | ||
| 45 | -background: white; | ||
| 46 | -} | ||
| 47 | - | ||
| 48 | - | ||
| 49 | .innertube { | 43 | .innertube { |
| 50 | margin: 30px; | 44 | margin: 30px; |
| 51 | } | 45 | } |
| 52 | 46 | ||
| 53 | .coda-slider { | 47 | .coda-slider { |
| 54 | background: none; | 48 | background: none; |
| 49 | +height: auto; | ||
| 55 | } | 50 | } |
| 56 | 51 | ||
| 57 | #wrap { | 52 | #wrap { |
| @@ -64,14 +59,12 @@ min-height: 450px; | @@ -64,14 +59,12 @@ min-height: 450px; | ||
| 64 | } | 59 | } |
| 65 | 60 | ||
| 66 | /* Display None itens Survey */ | 61 | /* Display None itens Survey */ |
| 67 | -#footer, | ||
| 68 | #coda-nav-left-1, | 62 | #coda-nav-left-1, |
| 69 | #coda-nav-right-1, | 63 | #coda-nav-right-1, |
| 70 | body.survey #header, | 64 | body.survey #header, |
| 65 | +body.survey #footer, | ||
| 71 | #recommender-box #upfile, | 66 | #recommender-box #upfile, |
| 72 | #advanced-button, | 67 | #advanced-button, |
| 73 | -#copyright span, | ||
| 74 | -#navbar, | ||
| 75 | #pkgs_list { | 68 | #pkgs_list { |
| 76 | display: none; | 69 | display: none; |
| 77 | } | 70 | } |
| @@ -89,6 +82,7 @@ list-style: none; | @@ -89,6 +82,7 @@ list-style: none; | ||
| 89 | margin-bottom: 10px; | 82 | margin-bottom: 10px; |
| 90 | } | 83 | } |
| 91 | 84 | ||
| 85 | +.radioButton, | ||
| 92 | #next-button, | 86 | #next-button, |
| 93 | #restart-button, | 87 | #restart-button, |
| 94 | #strategy-button, | 88 | #strategy-button, |
| @@ -109,14 +103,28 @@ z-index: 2; | @@ -109,14 +103,28 @@ z-index: 2; | ||
| 109 | cursor: pointer; | 103 | cursor: pointer; |
| 110 | } | 104 | } |
| 111 | 105 | ||
| 112 | -#next-button { | ||
| 113 | -height: 20px; | 106 | +.radioButton:hover, |
| 107 | +#next-button:hover, | ||
| 108 | +#controls-form input:hover { | ||
| 109 | +background: white; | ||
| 110 | +} | ||
| 111 | + | ||
| 112 | +.radioButton { | ||
| 113 | +text-align: left; | ||
| 114 | +vertical-align: middle; | ||
| 115 | +float: right; | ||
| 116 | +cursor: normal; | ||
| 114 | } | 117 | } |
| 115 | 118 | ||
| 116 | -#panel-controls, | ||
| 117 | -#controls-form { | ||
| 118 | -float: right; | ||
| 119 | -position: relative; | 119 | +#controls-form, |
| 120 | +#next-button { | ||
| 121 | +text-align: center; | ||
| 122 | +position: absolute; | ||
| 123 | +top: 145px; | ||
| 124 | +left: 50%; | ||
| 125 | +margin-left: -250px; | ||
| 126 | +width: 500px; | ||
| 127 | +height: 20px; | ||
| 120 | } | 128 | } |
| 121 | 129 | ||
| 122 | 130 |
2.58 KB
2.72 KB
2.51 KB
src/web/templates/survey.html
| @@ -61,15 +61,27 @@ $for pkg in pkg_details: | @@ -61,15 +61,27 @@ $for pkg in pkg_details: | ||
| 61 | <div class="panel"> | 61 | <div class="panel"> |
| 62 | <div class="panel-wrapper"> | 62 | <div class="panel-wrapper"> |
| 63 | <div id="panel-controls"> | 63 | <div id="panel-controls"> |
| 64 | - <label for="poor">Poor</label> | ||
| 65 | - <input accesskey="p" class="radio" type="radio" onClick="; showNext();" name="evaluation-$pkg_details.index(pkg)" value="poor" /><br /> | ||
| 66 | - <label for="good">Good</label> | ||
| 67 | - <input accesskey="g" class="radio" type="radio" onClick="javascript: showNext();" name="evaluation-$pkg_details.index(pkg)" value="good" /><br /> | ||
| 68 | - <label for="surprising">Surprising</label> | ||
| 69 | - <input accesskey="s" class="radio" type="radio" onClick="showNext()" name="evaluation-$pkg_details.index(pkg)" value="surprising" /> | 64 | + <label class="glass radioButton"> |
| 65 | + <img src="/static/images/smile-s.png" alt="Smile Surprising" style="float: right;"> | ||
| 66 | + <input class="radio" type="radio" name="evaluation-$pkg_details.index(pkg)" value="surprising" /> | ||
| 67 | + Surprising | ||
| 68 | + </label> | ||
| 69 | + <label class="glass radioButton"> | ||
| 70 | + <img src="/static/images/smile-g.png" alt="Smile Good" style="float: right;"> | ||
| 71 | + <input class="radio" type="radio" name="evaluation-$pkg_details.index(pkg)" value="good" /> | ||
| 72 | + Good | ||
| 73 | + </label> | ||
| 74 | + <label class="glass radioButton"> | ||
| 75 | + <img src="/static/images/smile-p.png" alt="Smile Poor" style="float: right;"> | ||
| 76 | + <input class="radio" type="radio" name="evaluation-$pkg_details.index(pkg)" value="poor" /> | ||
| 77 | + Poor | ||
| 78 | + </label> | ||
| 79 | + <br style="clear: both;" /> | ||
| 70 | </div><!-- #panel-controls --> | 80 | </div><!-- #panel-controls --> |
| 81 | + <p> | ||
| 71 | <h1 id="title_pkg">$pkg['package'] <br /> | 82 | <h1 id="title_pkg">$pkg['package'] <br /> |
| 72 | <span>$pkg['description']</span></h1> | 83 | <span>$pkg['description']</span></h1> |
| 84 | + </p> | ||
| 73 | <div class="content-pkg"> | 85 | <div class="content-pkg"> |
| 74 | <div class="screenshot"> | 86 | <div class="screenshot"> |
| 75 | <a class="link-thumb" rel="facebox" href="http://screenshots.debian.net/screenshot/$pkg['package']?.jpg" title="Screenshot of package $pkg['package']"> | 87 | <a class="link-thumb" rel="facebox" href="http://screenshots.debian.net/screenshot/$pkg['package']?.jpg" title="Screenshot of package $pkg['package']"> |
src/web/templates/thanks.html
| @@ -3,14 +3,22 @@ $var mod = 'thanks'; | @@ -3,14 +3,22 @@ $var mod = 'thanks'; | ||
| 3 | $var cssfiles: static/css/survey.css | 3 | $var cssfiles: static/css/survey.css |
| 4 | $var jsfiles: | 4 | $var jsfiles: |
| 5 | 5 | ||
| 6 | - <div class="index_include"> | ||
| 7 | -<center> | ||
| 8 | 6 | ||
| 7 | +<div id="maincontent"> | ||
| 8 | +<div class="innertube"> | ||
| 9 | + | ||
| 10 | +<div class="index_include"> | ||
| 11 | + | ||
| 12 | +<center> | ||
| 9 | <p>Your personal identification is not mandatory, since it won't be processed | 13 | <p>Your personal identification is not mandatory, since it won't be processed |
| 10 | along with the experiments results. It is collected by means of demographic | 14 | along with the experiments results. It is collected by means of demographic |
| 11 | characterization of the participants population.</p> | 15 | characterization of the participants population.</p> |
| 12 | 16 | ||
| 13 | - <h1>Thanks!</h1> | 17 | +<h1>Thanks!</h1> |
| 14 | </center> | 18 | </center> |
| 15 | 19 | ||
| 16 | </div> | 20 | </div> |
| 21 | + | ||
| 22 | +</div><!-- class="innertube" --> | ||
| 23 | +</div><!-- id="maincontent" --> | ||
| 24 | + |