Download as
Browse Code »

Commit e2af716acb2104f2aeee284142d145103c88b986

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

change style theme and fix css survey

Showing 6 changed files with 178 additions and 55 deletions   Show diff stats
src/web/static/css/style.css
  Diff comments   View file @e2af716
@@ -52,11 +52,11 @@ blockquote:before, blockquote:after, q:before, q:after { content: ""; } @@ -52,11 +52,11 @@ blockquote:before, blockquote:after, q:before, q:after { content: ""; }
52 */ 52 */
53 53
54 body{ 54 body{
  55 +background: #b0c9e5 url('../images/pattern.gif');
55 font-family: Arial, Verdana, sans-serif; 56 font-family: Arial, Verdana, sans-serif;
56 font-size: 0.9em; 57 font-size: 0.9em;
57 line-height: 1.1; 58 line-height: 1.1;
58 font-weight: normal; 59 font-weight: normal;
59 -background-image: url('../images/pattern.gif');  
60 } 60 }
61 61
62 #wrap { 62 #wrap {
@@ -69,7 +69,7 @@ margin-right: auto; @@ -69,7 +69,7 @@ margin-right: auto;
69 margin-left: auto; 69 margin-left: auto;
70 background-color: white; 70 background-color: white;
71 border-radius: 10px; 71 border-radius: 10px;
72 -box-shadow: 0 0 20px #000000; 72 +box-shadow: 0 2px 20px #545454;
73 background: #e0e0e0; /* Old browsers: generate by http://www.colorzilla.com/gradient-editor/ */ 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+ */ 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+ */ 75 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(46%,#ffffff)); /* Chrome,Safari4+ */
@@ -86,28 +86,27 @@ top: 0px; @@ -86,28 +86,27 @@ top: 0px;
86 left: -310px; 86 left: -310px;
87 margin-left: 50%; 87 margin-left: 50%;
88 width: 620px; 88 width: 620px;
89 -height: 60px;  
90 -border-radius: 0 0 10px 10px;  
91 -box-shadow: 0 -1px 5px #000000 inset, 0 2px 20px #545454; 89 +height: 50px;
  90 +border-radius: 0 0 20px 20px;
  91 +box-shadow: 0 2px 20px #545454;
92 outline: medium none; 92 outline: medium none;
93 padding: 15px; 93 padding: 15px;
94 -background: #6f2525;  
95 -/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#babdb6', endColorstr='#000000');  
96 - * background: -webkit-gradient(linear, left top, left bottom, from(#babdb6), to(#000000));  
97 - * background: -moz-linear-gradient(top, #babdb6, #000000);  
98 - */ 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);
99 } 98 }
100 99
101 #logo span { display: none; } 100 #logo span { display: none; }
102 #logo { 101 #logo {
103 -position: absolute; 102 +display: none;
  103 +position: absolute; /* FIXME: Remove Logo */
104 top: 0; 104 top: 0;
105 left: -32px; 105 left: -32px;
106 background: url('../images/icon95.png') no-repeat; 106 background: url('../images/icon95.png') no-repeat;
107 width: 105px; 107 width: 105px;
108 height: 95px; 108 height: 95px;
109 margin: 0px; 109 margin: 0px;
110 -display: block;  
111 } 110 }
112 111
113 #navbar { 112 #navbar {
@@ -331,13 +330,13 @@ background-image: url('../images/admon-note.png'); @@ -331,13 +330,13 @@ background-image: url('../images/admon-note.png');
331 #recommender-box { 330 #recommender-box {
332 position: relative; 331 position: relative;
333 margin:0; 332 margin:0;
334 -width: 560px; 333 +/* width: 560px; FIXME: remove logo */
  334 +/* float: right; */
335 vertical-align: top; 335 vertical-align: top;
336 border: 1px solid #888a85; 336 border: 1px solid #888a85;
337 border-radius: 4px; 337 border-radius: 4px;
338 box-shadow: 0 1px 4px gray inset; 338 box-shadow: 0 1px 4px gray inset;
339 background: white; 339 background: white;
340 -float: right;  
341 z-index: 3; 340 z-index: 3;
342 } 341 }
343 342
@@ -445,9 +444,12 @@ cursor: pointer; @@ -445,9 +444,12 @@ cursor: pointer;
445 #upload-slide, 444 #upload-slide,
446 #advanced-slide { display: none; } 445 #advanced-slide { display: none; }
447 446
  447 +#upload-slide label,
448 #advanced-slide legend { 448 #advanced-slide legend {
449 font-weight: bold; 449 font-weight: bold;
450 } 450 }
  451 +
  452 +#upload-slide,
451 #advanced-slide fieldset { 453 #advanced-slide fieldset {
452 boder: 1px solid gray; 454 boder: 1px solid gray;
453 font-size: 0.9em; 455 font-size: 0.9em;
@@ -455,5 +457,19 @@ padding: 5px; @@ -455,5 +457,19 @@ padding: 5px;
455 margin: 10px; 457 margin: 10px;
456 } 458 }
457 459
  460 +#tip-upload {
  461 +display: none;
  462 +position: absolute;
  463 +top: 0px;
  464 +background: #fef7bc;
  465 +padding: 10px;
  466 +border-radius: 10px;
  467 +box-shadow: 0 1px 10px #545454;
  468 +z-index: 1;
  469 +}
  470 +
  471 +#upload-slide:hover #tip-upload {
  472 +display: block;
  473 +}
458 474
459 475
src/web/static/css/survey.css
  Diff comments   View file @e2af716
1 #upload-slide { 1 #upload-slide {
2 display: block; 2 display: block;
3 position: absolute; 3 position: absolute;
4 -top: 10px;  
5 -left: 10px; 4 +top: 0px;
  5 +left: 0px;
6 } 6 }
7 7
8 -#header,  
9 -#recommender-box {  
10 -height: 80px; 8 +#tip-upload {
  9 +top: 40px;
  10 +width: 420px;
11 } 11 }
12 12
13 .innertube { 13 .innertube {
14 -margin: 50px; 14 +margin: 30px;
  15 +}
  16 +
  17 +.coda-slider {
  18 +background: none;
  19 +}
  20 +
  21 +.coda-slider-wrapper {
  22 +margin-right: auto;
  23 +margin-left: auto;
15 } 24 }
16 25
17 body.survey #wrap { 26 body.survey #wrap {
18 padding-top: 0px; 27 padding-top: 0px;
  28 +min-height: 450px;
19 } 29 }
20 30
21 /* Display None itens Survey */ 31 /* Display None itens Survey */
@@ -29,14 +39,98 @@ body.survey #header, @@ -29,14 +39,98 @@ body.survey #header,
29 display: none; 39 display: none;
30 } 40 }
31 41
  42 +.screenshot {
  43 +float: right;
  44 +margin: 5px;
  45 +}
  46 +
  47 +.content-pkg {
  48 +overflow: auto;
  49 +height: 250px;
  50 +}
  51 +
  52 +.content-pkg ul {
  53 +list-style: none;
  54 +}
  55 +
  56 +.content-pkg ul li {
  57 +margin-bottom: 10px;
  58 +}
32 59
33 -/* FIXME: não funciona porque as vezes o resultado final não é 10.  
34 - * #conclude-button,  
35 - * #10:target #coda-nav-right-1 {  
36 - * display: none;  
37 - * }  
38 - * #10:target #conclude-button {  
39 - * display: block;  
40 - * } 60 +/* Panel */
  61 +
  62 +#panel-controls {
  63 +float: right;
  64 +}
  65 +
  66 +
  67 +/*
  68 + * Package Box
41 */ 69 */
42 70
  71 +#title_pkg {
  72 +font-weight: bold;
  73 +}
  74 +
  75 +#title_pkg span {
  76 +color: gray;
  77 +font-style:italic;
  78 +font-weight: normal;
  79 +font-size: 0.8em;
  80 +}
  81 +
  82 +#debtags_box {
  83 +display: block;
  84 +float: right;
  85 +width: 150px;
  86 +font-size: 0.8em;
  87 +}
  88 +
  89 +#debtags_box h2 {
  90 +font-weight: bold;
  91 +}
  92 +
  93 +#debtags_pkg ul {
  94 +padding: 3px;
  95 +}
  96 +
  97 +#debtags_pkg li {
  98 +font-weight: bold;
  99 +cursor: pointer;
  100 +}
  101 +
  102 +#debtags_pkg li ul li {
  103 +font-weight: normal;
  104 +margin-left: 5px;
  105 +border-left: 1px solid white;
  106 +border-bottom: 1px solid white;
  107 +cursor: pointer;
  108 +}
  109 +
  110 +#debresources_box {
  111 +float: left;
  112 +margin-top: 20px;
  113 +}
  114 +
  115 +#debresources_box li {
  116 +margin-bottom: 4px;
  117 +}
  118 +
  119 +/* Details BOX */
  120 +
  121 +#details_box {
  122 +margin-top: 50px;
  123 +padding: 20px;
  124 +font-size: 0.8;
  125 +color: #545454;
  126 +}
  127 +
  128 +#details_box h2 {
  129 +margin: -5px 0 15px 0px;
  130 +color: #000;
  131 +}
  132 +
  133 +#details_box li {
  134 +margin-bottom: 10px;
  135 +}
  136 +
src/web/static/images/ajax-loader.gif 0 → 100755
View file @e2af716

10.6 KB
src/web/static/images/pattern.gif
View file @e2af716

4.93 KB | W: | H:

276 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/web/templates/layout.html
  Diff comments   View file @e2af716
@@ -75,7 +75,21 @@ if ((u==null) && (x==null) || (x=="Write your list App here or send a file list @@ -75,7 +75,21 @@ if ((u==null) && (x==null) || (x=="Write your list App here or send a file list
75 >Write your list App here or send a file list this icon:</textarea></label> 75 >Write your list App here or send a file list this icon:</textarea></label>
76 </div> 76 </div>
77 </fieldset> 77 </fieldset>
78 - 78 + <div id="upload-slide">
  79 + <fieldset>
  80 + <p>
  81 + <label title="Upload file">Upload file: <input type="file" name="pkgs_file" size="20" /></label>
  82 + </p>
  83 + <div id="tip-upload">
  84 + <p>
  85 + You can use file <strong>/var/log/popularity-contest</strong> or create a with <strong>dpkg</strong>, use:
  86 + </p>
  87 + <p>
  88 + <code> # dpkg -l > blih.list </code>
  89 + </p>
  90 + </div><!-- id="tip-upload" -->
  91 + </fieldset>
  92 + </div><!-- id="upload-slide" -->
79 <div id="advanced-slide"> 93 <div id="advanced-slide">
80 <fieldset> 94 <fieldset>
81 <legend>General</legend> 95 <legend>General</legend>
@@ -124,19 +138,6 @@ if ((u==null) &amp;&amp; (x==null) || (x==&quot;Write your list App here or send a file list @@ -124,19 +138,6 @@ if ((u==null) &amp;&amp; (x==null) || (x==&quot;Write your list App here or send a file list
124 </div> 138 </div>
125 </fieldset> 139 </fieldset>
126 </div><!-- id="advanced-slide" --> 140 </div><!-- id="advanced-slide" -->
127 - <div id="upload-slide">  
128 - <fieldset>  
129 - <p>  
130 - <label title="Upload file">Upload file: <input type="file" name="pkgs_file" size="18" /></label>  
131 - </p>  
132 - <p>  
133 - You can use file <strong>/var/log/popularity-contest</strong> or create a with <strong>dpkg</strong>, use:  
134 - </p>  
135 - <p>  
136 - <code> # dpkg -l > blih.list </code>  
137 - </p>  
138 - </fieldset>  
139 - </div><!-- id="upload-slide" -->  
140 </form> 141 </form>
141 </div> 142 </div>
142 143
src/web/templates/survey.html
  Diff comments   View file @e2af716
1 $def with (recommends, pkg_details, form, request) 1 $def with (recommends, pkg_details, form, request)
2 $var title: Survey 2 $var title: Survey
3 $var mod = 'survey'; 3 $var mod = 'survey';
4 -$var cssfiles: static/coda-slider-2.0/stylesheets/coda-slider-2.0.css static/css/survey.css  
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 4 +$var cssfiles: static/coda-slider-2.0/stylesheets/coda-slider-2.0.css static/css/facebox.css static/css/survey.css
  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 --> 8 <!-- survey slides -->
9 <script type="text/javascript"> 9 <script type="text/javascript">
10 - $$().ready(function() {  
11 - $$('#coda-slider-1').codaSlider({dynamicTabs: false, dynamicArrowLeftText: "&#171;", dynamicArrowRightText:"next &#187;" }); 10 + $$(document).ready(function() {
  11 + $$('a[rel*=facebox]').facebox({
  12 + loadingImage : '/static/images/loading.gif',
  13 + closeImage : '/static/images/closelabel.png'
  14 + });
  15 + $$('#coda-slider-1').codaSlider({dynamicTabs: false, dynamicArrowLeftText: "&#171;", dynamicArrowRightText:"next &#187;" });
12 }); 16 });
13 </script> 17 </script>
14 18
@@ -25,14 +29,22 @@ $var jsfiles: static/coda-slider-2.0/javascripts/jquery-1.3.2.min.js static/coda @@ -25,14 +29,22 @@ $var jsfiles: static/coda-slider-2.0/javascripts/jquery-1.3.2.min.js static/coda
25 $for pkg in pkg_details: 29 $for pkg in pkg_details:
26 <div class="panel"> 30 <div class="panel">
27 <div class="panel-wrapper"> 31 <div class="panel-wrapper">
28 - <h1>$pkg['package']</h1>  
29 - <span>$pkg['description']</span><br />  
30 - <input type="checkbox" name="good-$pkg['package']" /> Good <br />  
31 - <input type="checkbox" name="surprise-$pkg['package']" /> Surprise  
32 - <p> 32 + <div id="panel-controls">
  33 + <label for="good-$pkg['package']">Good</label>
  34 + <input type="checkbox" name="good-$pkg['package']" /><br />
  35 + <label for="surprise-$pkg['package']">Surprise</label>
  36 + <input type="checkbox" name="surprise-$pkg['package']" />
  37 + </div><!-- #panel-controls -->
  38 + <h1 id="title_pkg">$pkg['package'] <br />
  39 + <span>$pkg['description']</span></h1>
  40 + <div class="content-pkg">
  41 + <div class="screenshot">
  42 + <a class="link-thumb" rel="facebox" href="http://screenshots.debian.net/screenshot/$pkg['package']?.jpg" title="Screenshot of package $pkg['package']">
  43 + <img src="http://screenshots.debian.net/thumbnail/$pkg['package']" alt="Screenshot $pkg['package']" /></a>
  44 + </div><!-- .item -->
33 <li><b>Description</b>: <br />$:pkg['long_description']</li> 45 <li><b>Description</b>: <br />$:pkg['long_description']</li>
34 $if pkg['homepage']: 46 $if pkg['homepage']:
35 - <li><b>Homepage</b>:<a href="$pkg['homepage']">$pkg['homepage']</a></li> 47 + <li><b>Homepage</b>: $pkg['homepage']</li>
36 $if pkg['task']: 48 $if pkg['task']:
37 <li><b>Tasks</b>: $pkg['task']</li> 49 <li><b>Tasks</b>: $pkg['task']</li>
38 <li><b>Section</b>: $pkg['section']</li> 50 <li><b>Section</b>: $pkg['section']</li>
@@ -44,9 +56,9 @@ $for pkg in pkg_details: @@ -44,9 +56,9 @@ $for pkg in pkg_details:
44 <li><b>Origin</b>: $pkg['origin']</li> 56 <li><b>Origin</b>: $pkg['origin']</li>
45 <li><b>Maintainer</b>: $pkg['maintainer']</li> 57 <li><b>Maintainer</b>: $pkg['maintainer']</li>
46 </ul> 58 </ul>
47 - </p>  
48 - </div>  
49 - </div> 59 + </div><!-- id="content-pkg" -->
  60 + </div><!-- .panel-wrapper -->
  61 + </div><!-- .panel -->
50 </div><!-- .coda-slider --> 62 </div><!-- .coda-slider -->
51 </div><!-- .coda-slider-wrapper --> 63 </div><!-- .coda-slider-wrapper -->
52 64