From e63c64d295dfe9aac638654b71747c62a10d3e33 Mon Sep 17 00:00:00 2001 From: Valessio Soares de Brito Date: Wed, 13 Jul 2011 10:14:17 -0300 Subject: [PATCH] fix small bugs on box packages --- src/web/static/css/apprec.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/web/static/css/debtags.css | 6 +++--- src/web/static/css/facebox.css | 5 +++++ src/web/static/css/screen.css | 156 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------- src/web/static/css/style.css | 55 ++++++++++++++++++++++++++++++++++++++++--------------- src/web/static/css/tabs.css | 2 +- src/web/static/js/form.js | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/web/static/js/jquery.simplerss.js | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/web/templates/apprec.html | 9 +++++---- src/web/templates/error.html | 4 ++-- src/web/templates/index.html | 2 +- src/web/templates/layout.html | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------ src/web/templates/package.html | 86 +++++++++++++++++++++++++++++++++++++++++++------------------------------------------- 13 files changed, 548 insertions(+), 232 deletions(-) create mode 100644 src/web/static/js/form.js create mode 100644 src/web/static/js/jquery.simplerss.js diff --git a/src/web/static/css/apprec.css b/src/web/static/css/apprec.css index 8d61200..0584e9b 100644 --- a/src/web/static/css/apprec.css +++ b/src/web/static/css/apprec.css @@ -10,6 +10,7 @@ height: 200px; overflow: hidden; float: left; text-align: center; +border-radius: 5px; } #result-thumbnail .item:hover { @@ -22,3 +23,64 @@ padding: 0px; color: gray; } + + +/* + * Package Box + */ + +#title_pkg { +font-weight: bold; +} + +#title_pkg span { +color: gray; +font-style:italic; +font-weight: normal; +font-size: 0.8em; +} + +#voting_box { +margin-top: 20px; +} + +#debtags_box { +display: block; +float: right; +background-color: #dfdfdf; +border-radius: 5px; +width: 150px; +font-size: 0.8em; +padding: 5px; +} + +#debtags_box h2 { +font-weight: bold; +} + +#debtags_pkg ul { +padding: 3px; +} + +#debtags_pkg li { +font-weight: bold; +cursor: pointer; +} + +#debtags_pkg li ul li { +font-weight: normal; +margin-left: 5px; +border-left: 1px solid white; +border-bottom: 1px solid white; +cursor: pointer; +} + +#debresources_box { +float: left; +margin-top: 20px; +} + +#debresources_box li { +margin-bottom: 4px; +} + diff --git a/src/web/static/css/debtags.css b/src/web/static/css/debtags.css index d6792a9..24ecbc3 100644 --- a/src/web/static/css/debtags.css +++ b/src/web/static/css/debtags.css @@ -4,7 +4,7 @@ #debtags-facets { float: left; text-align: right; - width: 250px; + width: 320px; } #debtags-facets div { background-color: #F0F0F0; @@ -25,8 +25,8 @@ position: absolute; background: white; display: none; overflow: hidden; -width: 250px; -height: 450px; +width: 320px; +height: 430px; } #tags-box div { diff --git a/src/web/static/css/facebox.css b/src/web/static/css/facebox.css index cede05c..3309bb9 100644 --- a/src/web/static/css/facebox.css +++ b/src/web/static/css/facebox.css @@ -28,6 +28,11 @@ border-radius:4px; } +.feedback #facebox .content { +width: 670px; +padding: 20px; +} + #facebox .content > p:first-child { margin-top:0; } diff --git a/src/web/static/css/screen.css b/src/web/static/css/screen.css index 66190d3..8005612 100644 --- a/src/web/static/css/screen.css +++ b/src/web/static/css/screen.css @@ -1,86 +1,96 @@ -form { - background:#fff; - padding:1em; -} -fieldset div { - margin:0.3em 0; - clear:both; -} -form { - margin:1em; - width:33em; -} -label { - float:left; - width:10em; - text-align:right; - margin-right:1em; -} -.special { - float:right; - width:19.5em; - text-align:left; - margin-right:1em; -} -legend { - font-size: 120%; - margin: 0.5em 0 0.5em 0; - color: #757575; - font-weight: bolder; +#page-wrap { + width: 960px; + margin: 40px auto; + overflow: hidden; } -legend span { - width:10em; - text-align:right; + +.hidden { + position:absolute; + left:-999em; + top:-999em; + width:1%; } -input { - padding:0.15em; -/* width:10em; */ - border:1px solid #ddd; - background:#fafafa; -/* font:bold 0.95em arial, sans-serif; - -moz-border-radius:0.4em; - -khtml-border-radius:0.4em;*/ + +h1 { + font-size: 48px; + letter-spacing: -1px; + color: white; + margin: 0 0 15px 0; + } + h1 span { + color: #1f8cc5; } -input:hover, input:focus { - border-color:#c5c5c5; - background:#f6f6f6; + +h3 { + font-size: 18px; + letter-spacing: -1px; + margin: 0 0 5px 0; } + +p, label { + font-family: Georgia, serif; + font-style: italic; + font-size: 18px; + margin: 4px 0; +} + + fieldset { - border:1px solid #ddd; - padding:0 0.5em 0.5em; -} + width: 280px; + padding: 15px; + float: left; + border: none; + margin: 0 10px 0 0; + } + fieldset#step_1 { + background: #b2e7ca; + } + fieldset#step_2 { + background: #b2d9e7; + } + fieldset#step_3 { + background: #e7c7b2; + } -.radio fieldset, .date fieldset { - border:none; - width:auto; - padding:1px 0 0 11em; -} -.radio legend, .date legend { - font-size:1em; - color:#000; +legend { + font-weight: bold; + font-size: 20px; + background: white; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + padding: 5px 10px; + letter-spacing: -1px; +} + +option { + padding: 0 5px; } -.radio legend span, .date legend span { - position:absolute; - left:0; - top:0.3em; - width:10em; - display:block; + +.name_wrap { + margin: 5px 0; + } + .name_wrap label { + font-size: 12px; + display: block; + width: 102px; + float: left; + } + +.push { + margin: 20px 0 0 0; } -.radio label, .radio input { - vertical-align:middle; - display:inline; - float:none; - width:auto; - background:none; - border:none; + +#special_accommodations_wrap, +#company_name_wrap { + margin: 8px 0 0 0; } -.radio div { - float:left; - white-space:nowrap; - clear:none; + +#company_name_wrap label, +#special_accommodations_wrap label { + font-size: 12px; } -input.default { - color:#bbb; +#special_accommodations_wrap textarea { + width: 100%; height: 100px; } diff --git a/src/web/static/css/style.css b/src/web/static/css/style.css index 4ca1148..952a2dd 100644 --- a/src/web/static/css/style.css +++ b/src/web/static/css/style.css @@ -52,7 +52,7 @@ blockquote:before, blockquote:after, q:before, q:after { content: ""; } */ body{ -font-family: 'Cantarell', Arial, Verdana, sans-serif; +font-family: Arial, Verdana, sans-serif; font-size: 0.9em; line-height: 1.1; font-weight: normal; @@ -102,15 +102,22 @@ text-decoration: none; #sidebar { -width: 300px; -min-height: 400px; -margin-bottom: 40px; +width: 370px; +min-height: 450px; float: right; } #maincontent { } +.align-left { +float: left; +} + +.align-right { +float: right; +} + .innertube { margin: 15px; } @@ -156,43 +163,35 @@ h1 , h4 , h5 , h6 { -font-family: 'Cherry Cream Soda', Verdana, Arial, sans-serif; +font-family: Verdana, Arial, sans-serif; font-weight: 600; color: black; +margin-bottom: 0.7em; +margin-top: 0.5em; } h1 { font-weight: normal; font-size: 1.8em; -line-height: 0.43333; -margin: 0.83333em 0 0.83333em 0; } h2 { font-size: 1.4em; font-weight: normal; -line-height: 0.5714286; -margin: 1.0714286em 0 1.0714286em 0; } h3 { font-size: 1.125em; -line-height: 0.733em; -margin: 1.333em 0 1.333em 0; } h3 { font-size: 1em; -line-height: 0.8; -margin: 1.5em 0 1.5em 0; font-weight: bold; } h4 { font-weight: normal; font-style: italic; -margin: 1.5em 0 1.5em 0; color: #444; } h5 { font-style: italic; font-size: 0.75em; -margin: 2em 0 2em 0; } pre { margin: 1.5em 0 1.5em 0; @@ -218,6 +217,15 @@ margin: 0; padding:0; } +/* Gray Box */ + +.graybox { +background-color: #dfdfdf; +border-radius: 5px; +font-size: 0.8; +padding: 5px; +} + /* Tip */ div.tip @@ -254,6 +262,10 @@ div.note , div.trans-note { background-image: url('../images/admon-note.png'); } + + +/* Recommender BOX */ + #recommender-box { margin-top: 0px; margin-right: auto; @@ -263,9 +275,11 @@ width: 560px; position: relative; vertical-align: top; } + #recommender-box label { font-size: 1.3em; } + #recommender-box #upfile { width: 22px; height: 22px; @@ -280,10 +294,12 @@ right: 0px; top: 2px; z-index: 1; } + #pkgs_list, #input-box { position: relative; width: 410px; } + #pkgs_list { font-size: 13px; font-family: Arial, Verdana, Sans-serif; @@ -298,6 +314,7 @@ color: black; float: right; display: block; width: 135px; +text-align: center; } #submit-box input { @@ -305,5 +322,13 @@ font-size: 14px; margin: 5px; } +/* Advance Query */ + + +#content-form, #colaborative-form { display: none; } + +#content-form:target, #colaborative-form:target, #hybrid-form:target { z-index: 1; display: block; } + + diff --git a/src/web/static/css/tabs.css b/src/web/static/css/tabs.css index 13eba06..51a2605 100644 --- a/src/web/static/css/tabs.css +++ b/src/web/static/css/tabs.css @@ -48,7 +48,7 @@ min-height: 450px; position: absolute; top: -1px; left: 0; -width: 250px; +width: 320px; background: white; } diff --git a/src/web/static/js/form.js b/src/web/static/js/form.js new file mode 100644 index 0000000..35ef964 --- /dev/null +++ b/src/web/static/js/form.js @@ -0,0 +1,143 @@ + +// When the DOM is ready... +$(function(){ + + // Hide stuff with the JavaScript. If JS is disabled, the form will still be useable. + // NOTE: + // Sometimes using the .hide(); function isn't as ideal as it uses display: none; + // which has problems with some screen readers. Applying a CSS class to kick it off the + // screen is usually prefered, but since we will be UNhiding these as well, this works. + $(".name_wrap").hide(); + $("#company_name_wrap").hide(); + $("#special_accommodations_wrap").hide(); + + // Reset form elements back to default values + $("#submit_button").attr("disabled",true); + $("#num_attendees").val('Please Choose'); + $("#step_2 input[type=radio]").each(function(){ + this.checked = false; + }); + $("#rock").each(function(){ + this.checked = false; + }); + + // Fade out steps 2 and 3 until ready + $("#step_2").css({ opacity: 0.3 }); + $("#step_3").css({ opacity: 0.3 }); + + $.stepTwoComplete_one = "not complete"; + $.stepTwoComplete_two = "not complete"; + + // When a dropdown selection is made + $("#num_attendees").change(function() { + + $(".name_wrap").slideUp().find("input").removeClass("active_name_field"); + + switch ($("#num_attendees option:selected").text()) { + case '1': + $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); + break; + case '2': + $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); + break; + case '3': + $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field"); + break; + case '4': + $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_4_wrap").slideDown().find("input").addClass("active_name_field"); + break; + case '5': + $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_4_wrap").slideDown().find("input").addClass("active_name_field"); + $("#attendee_5_wrap").slideDown().find("input").addClass("active_name_field"); + break; + } + }); + + $(".name_input").blur(function(){ + + var all_complete = true; + + $(".active_name_field").each(function(){ + if ($(this).val() == '' ) { + all_complete = false; + }; + }); + + if (all_complete) { + $("#step_1") + .animate({ + paddingBottom: "120px" + }) + .css({ + "background-image": "url(images/check.png)", + "background-position": "bottom center", + "background-repeat": "no-repeat" + }); + $("#step_2").css({ + opacity: 1.0 + }); + $("#step_2 legend").css({ + opacity: 1.0 // For dumb Internet Explorer + }); + }; + }); + + function stepTwoTest() { + if (($.stepTwoComplete_one == "complete") && ($.stepTwoComplete_two == "complete")) { + $("#step_2") + .animate({ + paddingBottom: "120px" + }) + .css({ + "background-image": "url(images/check.png)", + "background-position": "bottom center", + "background-repeat": "no-repeat" + }); + $("#step_3").css({ + opacity: 1.0 + }); + $("#step_3 legend").css({ + opacity: 1.0 // For dumb Internet Explorer + }); + } + }; + + $("#step_2 input[name=company_name_toggle_group]").click(function(){ + $.stepTwoComplete_one = "complete"; + if ($("#company_name_toggle_on:checked").val() == 'on') { + $("#company_name_wrap").slideDown(); + } else { + $("#company_name_wrap").slideUp(); + }; + stepTwoTest(); + }); + + $("#step_2 input[name=special_accommodations_toggle]").click(function(){ + $.stepTwoComplete_two = "complete"; + if ($("#special_accommodations_toggle_on:checked").val() == 'on') { + $("#special_accommodations_wrap").slideDown(); + } else { + $("#special_accommodations_wrap").slideUp(); + }; + stepTwoTest(); + }); + + $("#rock").click(function(){ + if (this.checked && $("#num_attendees option:selected").text() != 'Please Choose' + && $.stepTwoComplete_one == 'complete' && $.stepTwoComplete_two == 'complete') { + $("#submit_button").attr("disabled",false); + } else { + $("#submit_button").attr("disabled",true); + } + }); + +}); diff --git a/src/web/static/js/jquery.simplerss.js b/src/web/static/js/jquery.simplerss.js new file mode 100644 index 0000000..4ae7920 --- /dev/null +++ b/src/web/static/js/jquery.simplerss.js @@ -0,0 +1,91 @@ +/** + * Copyright (c) 2010, Till Klampaeckel + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without modification, + * are permitted provided that the following conditions are met: + * + * o Redistributions of source code must retain the above copyright notice, this + * list of conditions and the following disclaimer. + * o Redistributions in binary form must reproduce the above copyright notice, this + * list of conditions and the following disclaimer in the documentation and/or + * other materials provided with the distribution. + * o Neither the name of the nor the names of its contributors may be + * used to endorse or promote products derived from this software without specific + * prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND + * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED + * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. + * IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, + * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT + * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR + * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, + * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + * + * @category RSS + * @package simplerss + * @author Till Klampaeckel + * @license http://www.opensource.org/licenses/bsd-license.php The New BSD License + * @link http://github.com/till/jquery-simplerss + */ +(function($){ + jQuery.fn.extend({ + + /** + * simplerss + * + * @param array options To override the defaults. + * + * @return this + */ + simplerss: function(options) { + + var defaults = { + url: '', + html: '{title}
{text}', + wrapper: 'li', + dataType: 'xml', + display: 2 + } + var options = jQuery.extend(defaults, options); + + return this.each(function() { + var o = options; + var c = jQuery(this); + + if (o.url == '') { + return; // avoid the request + } + + jQuery.ajax({ + url: o.url, + type: 'GET', + dataType: o.dataType, + error: function (xhr, status, e) { + console.debug('C: #%s, Error: %s, Feed: %s', $(c).attr('id'), e, o.url); + }, + success: function(feed){ + + jQuery(feed).find('item').each(function(i){ + + var itemHtml = o.html.replace(/{title}/, jQuery(this).find('title').text()); + itemHtml = itemHtml.replace(/{text}/, jQuery(this).find('description').text()); + itemHtml = itemHtml.replace(/{link}/, jQuery(this).find('guid').text()); + + jQuery(c).append(jQuery('<' + o.wrapper + '>').append(itemHtml)); + + if (i == o.display) { + return false; + } + + }); + } + }); + }); + return this; + } + }); +})(jQuery); \ No newline at end of file diff --git a/src/web/templates/apprec.html b/src/web/templates/apprec.html index 4e9f0fb..929c155 100644 --- a/src/web/templates/apprec.html +++ b/src/web/templates/apprec.html @@ -2,7 +2,7 @@ $def with (recommends, pkg_summaries, form, request) $var title: Feedback $var mod = 'feedback'; $var cssfiles: static/css/apprec.css static/css/facebox.css static/css/voting.css -$var jsfiles: static/js/facebox.js +$var jsfiles: static/js/facebox.js static/js/jquery.simplerss.js @@ -45,7 +46,7 @@ $$(document).ready(function() {