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 | 16 | $.fn.codaSlider = function(settings) { |
17 | 17 | |
18 | 18 | settings = $.extend({ |
19 | - autoHeight: true, | |
19 | + autoHeight: false, | |
20 | 20 | autoHeightEaseDuration: 1000, |
21 | 21 | autoHeightEaseFunction: "easeInOutExpo", |
22 | 22 | autoSlide: false, |
... | ... | @@ -47,7 +47,7 @@ $.fn.codaSlider = function(settings) { |
47 | 47 | if (settings.dynamicArrows) { |
48 | 48 | slider.parent().addClass("arrows"); |
49 | 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 | 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 | 16 | .coda-slider { background: #ebebeb } |
17 | 17 | |
18 | 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 | 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 | 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 | 26 | .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px } |
27 | 27 | |
28 | 28 | /* Arrow styling | ... | ... |
src/web/static/css/style.css
... | ... | @@ -51,7 +51,7 @@ blockquote:before, blockquote:after, q:before, q:after { content: ""; } |
51 | 51 | */ |
52 | 52 | |
53 | 53 | body{ |
54 | -background: #d8e1e7; /* f2f6f8 */ | |
54 | +background: #b7d2ef; | |
55 | 55 | font-family: Arial, Verdana, sans-serif; |
56 | 56 | font-size: 0.9em; |
57 | 57 | line-height: 1.1; |
... | ... | @@ -84,6 +84,8 @@ outline: medium none; |
84 | 84 | padding: 15px; |
85 | 85 | } |
86 | 86 | |
87 | +body.about #header { display: none; } | |
88 | + | |
87 | 89 | #logo span { display: none; } |
88 | 90 | #logo { |
89 | 91 | display: none; | ... | ... |
src/web/static/css/survey.css
... | ... | @@ -26,7 +26,7 @@ width: 420px; |
26 | 26 | display: none; |
27 | 27 | position: absolute; |
28 | 28 | top: 15px; |
29 | -width: 300px; | |
29 | +width: 400px; | |
30 | 30 | right: 0px; |
31 | 31 | font-size: 11px; |
32 | 32 | font-weight: normal; |
... | ... | @@ -40,18 +40,13 @@ display: block; |
40 | 40 | z-index: 3; |
41 | 41 | } |
42 | 42 | |
43 | -#next-button:hover, | |
44 | -#controls-form input:hover { | |
45 | -background: white; | |
46 | -} | |
47 | - | |
48 | - | |
49 | 43 | .innertube { |
50 | 44 | margin: 30px; |
51 | 45 | } |
52 | 46 | |
53 | 47 | .coda-slider { |
54 | 48 | background: none; |
49 | +height: auto; | |
55 | 50 | } |
56 | 51 | |
57 | 52 | #wrap { |
... | ... | @@ -64,14 +59,12 @@ min-height: 450px; |
64 | 59 | } |
65 | 60 | |
66 | 61 | /* Display None itens Survey */ |
67 | -#footer, | |
68 | 62 | #coda-nav-left-1, |
69 | 63 | #coda-nav-right-1, |
70 | 64 | body.survey #header, |
65 | +body.survey #footer, | |
71 | 66 | #recommender-box #upfile, |
72 | 67 | #advanced-button, |
73 | -#copyright span, | |
74 | -#navbar, | |
75 | 68 | #pkgs_list { |
76 | 69 | display: none; |
77 | 70 | } |
... | ... | @@ -89,6 +82,7 @@ list-style: none; |
89 | 82 | margin-bottom: 10px; |
90 | 83 | } |
91 | 84 | |
85 | +.radioButton, | |
92 | 86 | #next-button, |
93 | 87 | #restart-button, |
94 | 88 | #strategy-button, |
... | ... | @@ -109,14 +103,28 @@ z-index: 2; |
109 | 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 | 61 | <div class="panel"> |
62 | 62 | <div class="panel-wrapper"> |
63 | 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 | 80 | </div><!-- #panel-controls --> |
81 | + <p> | |
71 | 82 | <h1 id="title_pkg">$pkg['package'] <br /> |
72 | 83 | <span>$pkg['description']</span></h1> |
84 | + </p> | |
73 | 85 | <div class="content-pkg"> |
74 | 86 | <div class="screenshot"> |
75 | 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 | 3 | $var cssfiles: static/css/survey.css |
4 | 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 | 13 | <p>Your personal identification is not mandatory, since it won't be processed |
10 | 14 | along with the experiments results. It is collected by means of demographic |
11 | 15 | characterization of the participants population.</p> |
12 | 16 | |
13 | - <h1>Thanks!</h1> | |
17 | +<h1>Thanks!</h1> | |
14 | 18 | </center> |
15 | 19 | |
16 | 20 | </div> |
21 | + | |
22 | +</div><!-- class="innertube" --> | |
23 | +</div><!-- id="maincontent" --> | |
24 | + | ... | ... |