Download as
Browse Code »

Commit fa2544ed104374bf3096ae0173f5be3d60bc8904

Authored by Valessio Soares de Brito
1 parent e2af716a
Exists in master and in 1 other branch add_vagrant

theme with bg class=glass gradient

Showing 5 changed files with 106 additions and 71 deletions   Show diff stats
src/web/static/coda-slider-2.0/stylesheets/coda-slider-2.0.css
  Diff comments   View file @fa2544e
... ... @@ -22,7 +22,7 @@
22 22 .coda-slider, .coda-slider .panel { width: 600px }
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: 600px }
  25 + .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 500px }
26 26 .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
27 27  
28 28 /* Arrow styling */
... ... @@ -51,4 +51,4 @@
51 51 .coda-slider .panel-container { position: relative }
52 52 .coda-nav-left, .coda-nav-right { float: left }
53 53 .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
54   -
55 54 \ No newline at end of file
  55 +
... ...
src/web/static/css/style.css
  Diff comments   View file @fa2544e
... ... @@ -46,7 +46,6 @@ caption, th, td { text-align: left; font-weight: normal; }
46 46 blockquote:before, blockquote:after, q:before, q:after { content: ""; }
47 47  
48 48  
49   -
50 49 /*
51 50 * Layout, font, size.. colors..
52 51 */
... ... @@ -70,14 +69,6 @@ margin-left: auto;
70 69 background-color: white;
71 70 border-radius: 10px;
72 71 box-shadow: 0 2px 20px #545454;
73   -background: #e0e0e0; /* Old browsers: generate by http://www.colorzilla.com/gradient-editor/ */
74   -background: -moz-linear-gradient(top, #e0e0e0 0%, #ffffff 46%); /* FF3.6+ */
75   -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(46%,#ffffff)); /* Chrome,Safari4+ */
76   -background: -webkit-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* Chrome10+,Safari5.1+ */
77   -background: -o-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* Opera11.10+ */
78   -background: -ms-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* IE10+ */
79   -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
80   -background: linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* W3C */
81 72 }
82 73  
83 74 #header {
... ... @@ -91,10 +82,6 @@ border-radius: 0 0 20px 20px;
91 82 box-shadow: 0 2px 20px #545454;
92 83 outline: medium none;
93 84 padding: 15px;
94   -background: #eeeeec;
95   -filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeec', endColorstr='#babdb6');
96   -background: -webkit-gradient(linear, left top, left bottom, from(#babdb6), to(#babdb6));
97   -background: -moz-linear-gradient(top, #eeeeec, #babdb6);
98 85 }
99 86  
100 87 #logo span { display: none; }
... ... @@ -213,10 +200,12 @@ margin-top: 0.5em;
213 200 h1 {
214 201 font-weight: normal;
215 202 font-size: 1.8em;
  203 +color: #4b86d1;
216 204 }
217 205 h2 {
218 206 font-size: 1.4em;
219 207 font-weight: normal;
  208 +color: #678cbb;
220 209 }
221 210 h3 {
222 211 font-size: 1.125em;
... ... @@ -258,36 +247,6 @@ margin: 0;
258 247 padding:0;
259 248 }
260 249  
261   -/* Gray Box */
262   -
263   -.graybox {
264   -background: #dfdfdf;
265   -border-radius: 5px;
266   -padding: 5px;
267   -}
268   -
269   -.horiz-grad {
270   -background: #dfdfdf; /* Old browsers */
271   -background: -moz-linear-gradient(left, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
272   -background: -webkit-gradient(linear, left top, right top, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
273   -background: -webkit-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
274   -background: -o-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
275   -background: -ms-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
276   -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
277   -background: linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* W3C */
278   -}
279   -
280   -.vert-grad {
281   -background: #dfdfdf; /* Old browsers */
282   -background: -moz-linear-gradient(top, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
283   -background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
284   -background: -webkit-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
285   -background: -o-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
286   -background: -ms-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
287   -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
288   -background: linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* W3C */
289   -}
290   -
291 250 /* Tip */
292 251 div.tip
293 252 , div.important
... ... @@ -302,6 +261,8 @@ font-size: 0.75em;
302 261 line-height: 2em;
303 262 background-color:#FFFFCB;
304 263 border:0.15em solid #CCCCA3;
  264 +border-radius: 10px;
  265 +box-shadow: 0 1px 5px #545454;
305 266 }
306 267 div.tip p
307 268 , div.important p
... ... @@ -330,13 +291,11 @@ background-image: url('../images/admon-note.png');
330 291 #recommender-box {
331 292 position: relative;
332 293 margin:0;
333   -/* width: 560px; FIXME: remove logo */
334   -/* float: right; */
335 294 vertical-align: top;
336 295 border: 1px solid #888a85;
337 296 border-radius: 4px;
338 297 box-shadow: 0 1px 4px gray inset;
339   -background: white;
  298 +background: #ffffff;
340 299 z-index: 3;
341 300 }
342 301  
... ... @@ -394,13 +353,9 @@ position: relative;
394 353 border: 1px solid #888a85;
395 354 box-shadow: 0 1px 4px gray inset;
396 355 border-radius: 0;
397   -background: #ffffff; /* for non-css3 browsers */
398   -filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d3d7cf'); /* for IE */
399   -background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d3d7cf)); /* for webkit browsers */
400   -background: -moz-linear-gradient(top, #ffffff, #d3d7cf); /* for firefox 3.6+ */
401 356 color: #585C60;
402 357 font-size: 12px;
403   -font-weight: 600;
  358 +font-weight: bold;
404 359 width: 135px;
405 360 height: 30px;
406 361 line-height: 14px;
... ... @@ -409,16 +364,12 @@ padding: 5px;
409 364 position: absolute;
410 365 right: -1px;
411 366 top: -1px;
412   -text-shadow: 0 1px 0 gray;
413 367 z-index: 2;
414 368 cursor: pointer;
415 369 }
416 370  
417 371 #submit-button:hover {
418   -background: #d3d7cf;
419   -filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d7cf', endColorstr='#d3d7cf');
420   -background: -webkit-gradient(linear, left top, left bottom, from(#d3d7cf), to(#d3d7cf));
421   -background: -moz-linear-gradient(top, #d3d7cf, #d3d7cf);
  372 +background: #ffffff;
422 373 }
423 374  
424 375 /* Advance Query */
... ... @@ -461,10 +412,6 @@ margin: 10px;
461 412 display: none;
462 413 position: absolute;
463 414 top: 0px;
464   -background: #fef7bc;
465   -padding: 10px;
466   -border-radius: 10px;
467   -box-shadow: 0 1px 10px #545454;
468 415 z-index: 1;
469 416 }
470 417  
... ... @@ -473,3 +420,43 @@ display: block;
473 420 }
474 421  
475 422  
  423 +/* Gradients */
  424 +
  425 +.graybox {
  426 +background: #dfdfdf;
  427 +border-radius: 5px;
  428 +padding: 5px;
  429 +}
  430 +
  431 +.horiz-grad {
  432 +background: #dfdfdf; /* Old browsers */
  433 +background: -moz-linear-gradient(left, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
  434 +background: -webkit-gradient(linear, left top, right top, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  435 +background: -webkit-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  436 +background: -o-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
  437 +background: -ms-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
  438 +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
  439 +background: linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* W3C */
  440 +}
  441 +
  442 +.vert-grad {
  443 +background: #dfdfdf; /* Old browsers */
  444 +background: -moz-linear-gradient(top, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
  445 +background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  446 +background: -webkit-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  447 +background: -o-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
  448 +background: -ms-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
  449 +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  450 +background: linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* W3C */
  451 +}
  452 +
  453 +.glass {
  454 +background: #e2e2e2; /* Old browsers */
  455 +background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
  456 +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
  457 +background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
  458 +background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera11.10+ */
  459 +background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
  460 +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
  461 +background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
  462 +}
... ...
src/web/static/css/survey.css
  Diff comments   View file @fa2544e
... ... @@ -3,6 +3,16 @@ display: block;
3 3 position: absolute;
4 4 top: 0px;
5 5 left: 0px;
  6 +padding: 0px;
  7 +}
  8 +
  9 +#header,
  10 +#recommender-box {
  11 +height: 40px;
  12 +}
  13 +
  14 +#submit-button {
  15 +height: 42px;
6 16 }
7 17  
8 18 #tip-upload {
... ... @@ -10,6 +20,22 @@ top: 40px;
10 20 width: 420px;
11 21 }
12 22  
  23 +#tip-finish,
  24 +#tip-strategy .tip {
  25 +display: none;
  26 +position: absolute;
  27 +top: 25px;
  28 +width: 250px;
  29 +right: 0px;
  30 +font-size: 11px;
  31 +font-weight: normal;
  32 +color: #000000;
  33 +}
  34 +
  35 +#finish-button:hover #tip-finish,
  36 +#tip-strategy:hover .tip { display: block; }
  37 +
  38 +
13 39 .innertube {
14 40 margin: 30px;
15 41 }
... ... @@ -57,10 +83,28 @@ list-style: none;
57 83 margin-bottom: 10px;
58 84 }
59 85  
60   -/* Panel */
  86 +#strategy-button,
  87 +#finish-button {
  88 +border: 1px solid #888a85;
  89 +box-shadow: 0 1px 4px gray inset;
  90 +border-radius: 5px;
  91 +color: #585C60;
  92 +font-size: 12px;
  93 +font-weight: 600;
  94 +width: 135px;
  95 +height: 30px;
  96 +line-height: 14px;
  97 +margin: 0;
  98 +margin-left: 10px;
  99 +padding: 5px;
  100 +z-index: 2;
  101 +cursor: pointer;
  102 +}
61 103  
62   -#panel-controls {
63   -float: right;
  104 +#panel-controls,
  105 +#controls-form {
  106 +float: right;
  107 +position: relative;
64 108 }
65 109  
66 110  
... ...
src/web/templates/layout.html
  Diff comments   View file @fa2544e
... ... @@ -56,14 +56,14 @@ if ((u==null) && (x==null) || (x=="Write your list App here or send a file list
56 56  
57 57 <body class="$content.mod">
58 58  
59   -<div id="wrap">
60   -<div id="header">
  59 +<div id="wrap" class="glass">
  60 +<div id="header" class="glass">
61 61 <a href="$url_base" title="AppRecommender"><h1 id="logo"><span>AppRecommender</span></h1></a>
62 62 <div id="recommender-box">
63 63 <form action="apprec" enctype="multipart/form-data" method="post" name="weboptions" onsubmit="return validateForm()">
64 64 <fieldset>
65 65 <div id="submit-box">
66   - <input type="submit" value="RECOMMENDER" id="submit-button"><br />
  66 + <input type="submit" value="RECOMMENDER" id="submit-button" class="glass"><br />
67 67 <a id="advanced-button">advanced query?</a>
68 68 </div>
69 69 <div id="input-box">
... ... @@ -80,7 +80,7 @@ if ((u==null) &amp;&amp; (x==null) || (x==&quot;Write your list App here or send a file list
80 80 <p>
81 81 <label title="Upload file">Upload file: <input type="file" name="pkgs_file" size="20" /></label>
82 82 </p>
83   - <div id="tip-upload">
  83 + <div id="tip-upload" class="tip important">
84 84 <p>
85 85 You can use file <strong>/var/log/popularity-contest</strong> or create a with <strong>dpkg</strong>, use:
86 86 </p>
... ...
src/web/templates/survey.html
  Diff comments   View file @fa2544e
... ... @@ -5,7 +5,6 @@ $var cssfiles: static/coda-slider-2.0/stylesheets/coda-slider-2.0.css static/css
5 5 $var jsfiles: static/coda-slider-2.0/javascripts/jquery-1.3.2.min.js static/coda-slider-2.0/javascripts/jquery.coda-slider-2.0.js static/coda-slider-2.0/javascripts/jquery.easing.1.3.js static/js/facebox.js
6 6  
7 7  
8   -<!-- survey slides -->
9 8 <script type="text/javascript">
10 9 $$(document).ready(function() {
11 10 $$('a[rel*=facebox]').facebox({
... ... @@ -62,7 +61,12 @@ $for pkg in pkg_details:
62 61 </div><!-- .coda-slider -->
63 62 </div><!-- .coda-slider-wrapper -->
64 63  
65   -<input id="conclude-button" type="submit" value="Conclude" />
  64 +<div id="controls-form">
  65 +<a href="#finish" id="finish-button" class="glass">Finish
  66 + <div class="tip important" id="tip-finish"><p>Tem certeza que não gostaria de avaliar uma nova estratégia? </p></div>
  67 +</a>
  68 +<label for="strategy_button" id="tip-strategy"><div class="tip note"><p> Gerar um novo resultado com uma estratégia diferente para mesma lista de pacotes. </p></div><input id="strategy-button" name="strategy_button" type="submit" value="New Strategy" class="glass" /></label>
  69 +</div>
66 70  
67 71 </form>
68 72  
... ...