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 52 */
53 53  
54 54 body{
  55 +background: #b0c9e5 url('../images/pattern.gif');
55 56 font-family: Arial, Verdana, sans-serif;
56 57 font-size: 0.9em;
57 58 line-height: 1.1;
58 59 font-weight: normal;
59   -background-image: url('../images/pattern.gif');
60 60 }
61 61  
62 62 #wrap {
... ... @@ -69,7 +69,7 @@ margin-right: auto;
69 69 margin-left: auto;
70 70 background-color: white;
71 71 border-radius: 10px;
72   -box-shadow: 0 0 20px #000000;
  72 +box-shadow: 0 2px 20px #545454;
73 73 background: #e0e0e0; /* Old browsers: generate by http://www.colorzilla.com/gradient-editor/ */
74 74 background: -moz-linear-gradient(top, #e0e0e0 0%, #ffffff 46%); /* FF3.6+ */
75 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 86 left: -310px;
87 87 margin-left: 50%;
88 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 92 outline: medium none;
93 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 100 #logo span { display: none; }
102 101 #logo {
103   -position: absolute;
  102 +display: none;
  103 +position: absolute; /* FIXME: Remove Logo */
104 104 top: 0;
105 105 left: -32px;
106 106 background: url('../images/icon95.png') no-repeat;
107 107 width: 105px;
108 108 height: 95px;
109 109 margin: 0px;
110   -display: block;
111 110 }
112 111  
113 112 #navbar {
... ... @@ -331,13 +330,13 @@ background-image: url('../images/admon-note.png');
331 330 #recommender-box {
332 331 position: relative;
333 332 margin:0;
334   -width: 560px;
  333 +/* width: 560px; FIXME: remove logo */
  334 +/* float: right; */
335 335 vertical-align: top;
336 336 border: 1px solid #888a85;
337 337 border-radius: 4px;
338 338 box-shadow: 0 1px 4px gray inset;
339 339 background: white;
340   -float: right;
341 340 z-index: 3;
342 341 }
343 342  
... ... @@ -445,9 +444,12 @@ cursor: pointer;
445 444 #upload-slide,
446 445 #advanced-slide { display: none; }
447 446  
  447 +#upload-slide label,
448 448 #advanced-slide legend {
449 449 font-weight: bold;
450 450 }
  451 +
  452 +#upload-slide,
451 453 #advanced-slide fieldset {
452 454 boder: 1px solid gray;
453 455 font-size: 0.9em;
... ... @@ -455,5 +457,19 @@ padding: 5px;
455 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 1 #upload-slide {
2 2 display: block;
3 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 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 26 body.survey #wrap {
18 27 padding-top: 0px;
  28 +min-height: 450px;
19 29 }
20 30  
21 31 /* Display None itens Survey */
... ... @@ -29,14 +39,98 @@ body.survey #header,
29 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 75 >Write your list App here or send a file list this icon:</textarea></label>
76 76 </div>
77 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 93 <div id="advanced-slide">
80 94 <fieldset>
81 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 138 </div>
125 139 </fieldset>
126 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 141 </form>
141 142 </div>
142 143  
... ...
src/web/templates/survey.html
  Diff comments   View file @e2af716
1 1 $def with (recommends, pkg_details, form, request)
2 2 $var title: Survey
3 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 8 <!-- survey slides -->
9 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 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 29 $for pkg in pkg_details:
26 30 <div class="panel">
27 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 45 <li><b>Description</b>: <br />$:pkg['long_description']</li>
34 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 48 $if pkg['task']:
37 49 <li><b>Tasks</b>: $pkg['task']</li>
38 50 <li><b>Section</b>: $pkg['section']</li>
... ... @@ -44,9 +56,9 @@ $for pkg in pkg_details:
44 56 <li><b>Origin</b>: $pkg['origin']</li>
45 57 <li><b>Maintainer</b>: $pkg['maintainer']</li>
46 58 </ul>
47   - </p>
48   - </div>
49   - </div>
  59 + </div><!-- id="content-pkg" -->
  60 + </div><!-- .panel-wrapper -->
  61 + </div><!-- .panel -->
50 62 </div><!-- .coda-slider -->
51 63 </div><!-- .coda-slider-wrapper -->
52 64  
... ...