Commits

Rafael A  committed 9fae66f

Design improvements. + small changes

  • Participants
  • Parent commits ae23410

Comments (0)

Files changed (6)

 Requirements
 
 Django 1.3
-JQuery (http://jquery.com/)
+JQuery (There are some problems with animation in older versions.) 
 Django Internationalization (optionally)
 
 
 ) 
 
 
-4. Run 'collectstatic' to deploy poll's static files (see https://docs.djangoproject.com/en/1.3/howto/static-files/#deploying-static-files-in-a-nutshell)
-   >> python manage.py collectstatic
-
-
-5. Eventually we need to do "syncdb".
+4. Eventually we need to do "syncdb".
    >> python manage.py syncdb
 
 ATTENTION: Don't forget this step. It's very important, because django-poll-system have a fixture that needs to be installed to DB.
 
 ----
 
-Now installation is completed. After all, you have some data out of the box. And it's time to show the poll on your site. Add lines below:
+Now installation is completed. After all, you have some data out of the box. And it's time to show the poll on your site. Add {% load polls_tags %} at the top of your page and insert {% poll_queue 'Public' %} to the place you want to see the django-poll-system component. Of course the script of JQuery library must be included (<script type="text/javascript" src="your/path/to/jquery.js"></script>) before you call "poll_queue".
 
-{% load polls_tags %}
-<link rel="stylesheet" href="{{ STATIC_URL }}polls/css/polls.css" />
-
-at the top of your page and insert {% poll_queue 'Public' %} to the place you want to see the django-poll-system component. Of course the script of JQuery library must be included (<script type="text/javascript" src="your/path/to/jquery.js"></script>) before you call "poll_queue".
-
-That's all. Try an example: http://polltest.pythonism.ru
+That's all. Try an example: http://polltest.pythonism.ru. (Please, leave your comments there)

File poll/static/polls/css/polls.css

-#poll_content {background-color: #0B9D0B; padding: 3px;}
-#poll_content h1 {font-variant: small-caps;}
-#poll_content #poll_userspace {float: left; width: 100%; text-align: right;}
-#poll_content #poll {color: #b10000; font-variant: small-caps; text-decoration: underline;}
-#poll_content #warning {color: #f88885;}
-
-#poll_item_dl {clear: both; width: 100%;} 
-
-#poll_body {background-color: #00BC00; padding: 10px 10% 3px 20px; clear: both; border-bottom: 3px solid #006600; border-left: 1px solid #005500;}
-#poll_body #showresults {font-variant: small-caps;}
-#poll_body #sendvote {padding: 5px;}
-
-#poll_body #bar {display: block; padding: 5px; border-bottom: 2px solid #444; border-left: 1px solid #222;}
-#poll_body #bar.max_bar {background-color: red;}
-#poll_body #bar.normal_bar {background-color: white;}
-
-#poll_body #voters_count {text-align: right; border-top: 2px solid #333; margin: 25px; padding-top: 4px;}
-#poll_body #total {font-size: 1.5em;}

File poll/templates/_polls_script.js

+{% load i18n %}
+
+$(document).ready(function() {
+	var vote_url = '{% url poll_ajax_vote poll.pk %}';
+	var result_url = '{% url poll_ajax_result poll.pk %}';
+	var poll_pk = '{{ poll.pk }}';
+	var poll_type = {% if poll.polltype.index == 0 %}'single'{% else %}'multiple'{% endif %};
+	
+	var path_to_items = '#poll_content_' + poll_pk + ' #poll_body input[name="poll_' + poll_pk + '"]';
+	var body = $('#poll_content_' + poll_pk + ' #poll_body');
+	
+	function showResults(data) {
+		var show_points = false;
+		var all_points = 0, total = 0, biggest = 0;
+		
+		body.hide('slow', complete=function() {
+			body.empty();
+			$.each(data, function(index, value) {
+				if(index != 'total') {
+					if(data[index]['count'] > biggest) {
+						biggest = data[index]['count'];
+					}
+					all_points += data[index]['count'];
+				}
+			});
+			
+			$.each(data, function(index, value) {
+				if(index == 'total') {
+					total = value;
+				} else {
+					var percentage = (data[index]['count'] * 100) / all_points;
+					var bar_class = 'normal_bar';
+					
+					if(data[index]['count'] == biggest) {
+						bar_class = 'max_bar';
+					}
+					
+					var points_txt = '';
+					if(show_points) {
+						points_txt = '<sup>(' + data[index]['count'] + ')</sup>'; 
+					}
+					
+					body.append('<dl id="poll_item_dl">');
+					body.append('<dt>' + data[index]['title'] + ': <strong>' + (Math.round(percentage*100)/100) + '%</strong>' + points_txt + '</dt>');
+					body.append('<dd><div id="bar" class="' + bar_class + '" style="width: ' + percentage + '%;"></div></dd>');
+					body.append('</dl>');
+				}
+			});
+			
+			var total_points_txt = '';
+			if(show_points) {
+				total_points_txt = '<sup>(' + all_points + ')</sup>'; 
+			}
+			
+			body.append('<div id="voters_count">' + '{% trans "Total Voters" %}' + ': <span id="total">' + total + '</span> ' + total_points_txt + '</div>');
+		}).show('slow');
+	}
+	
+	function RecognizeAndPrepare() {
+		var result = '';
+		
+		$(path_to_items).map(function() {
+			if((this.type == 'checkbox' || this.type == 'radio') && this.checked) {
+				result += '"' + this.id + '": ' + '"' + this.type + '",';
+			}
+			if(this.type == 'text' && this.value != '') {
+				result += '"' + this.id + '": ' + '"' + this.value + '",';
+			}
+		})
+		
+		if(result.length > 0)
+			if(result[result.length - 1] == ',')
+				result = result.substring(0, result.length - 1);
+		
+		return '{' + result + '}';
+	}
+	
+	$(path_to_items).bind('focusin click', function() {
+		if(poll_type == 'single') {
+			var selected = this;
+			
+			$(path_to_items).map(function() {
+				if(this != selected) {
+					if((this.type == 'checkbox' || this.type == 'radio') && this.checked) {
+						this.checked = false;
+					}
+					if(this.type == 'text' && this.value != '') {
+						this.value = '';
+					}
+				} 
+			});
+		}
+	});
+	
+	function doResults() {
+		$.get(result_url, function(data) {
+			showResults($.parseJSON(data));
+		});
+	}
+	
+	$("#sendvote_" + poll_pk).click(function() {
+		var result = RecognizeAndPrepare();
+		
+		if(result == '{}') {
+			alert('{% trans "Please, choose anything to vote" %}');
+		} else {
+			body.hide('slow', complete=function() {
+				$.get(vote_url, {'chosen_items': result}, function() {
+					doResults();
+				});
+			});
+		}
+	});
+	
+	$("#showresults_" + poll_pk).click(function() {
+		doResults();
+	});
+});

File poll/templates/_polls_style.css

+#poll_content_{{ poll.pk }} {background-color: #0B9D0B; padding: 3px;}
+#poll_content_{{ poll.pk }} h1 {font-variant: small-caps;}
+#poll_content_{{ poll.pk }} #poll_userspace {float: left; width: 100%; text-align: right;}
+#poll_content_{{ poll.pk }} #poll_title {color: #b10000; font-variant: small-caps; text-decoration: underline;}
+#poll_content_{{ poll.pk }} #poll_warning_message {color: #f88885;}
+
+#poll_content_{{ poll.pk }} #poll_body {background-color: #00BC00; padding: 10px 10% 3px 20px; clear: both; border-bottom: 3px solid #006600; border-left: 1px solid #005500;}
+
+#poll_content_{{ poll.pk }} #poll_body #bar {display: block; padding: 5px; border-bottom: 2px solid #444; border-left: 1px solid #222;}
+#poll_content_{{ poll.pk }} #poll_body #bar.max_bar {background-color: red;}
+#poll_content_{{ poll.pk }} #poll_body #bar.normal_bar {background-color: white;}
+
+#poll_content_{{ poll.pk }} #poll_body #poll_item_dl {clear: both; width: 100%;}
+#poll_content_{{ poll.pk }} #poll_body #voters_count {text-align: right; border-top: 2px solid #333; margin: 25px; padding-top: 4px;}
+#poll_content_{{ poll.pk }} #poll_body #total {font-size: 1.5em;}

File poll/templates/polls.html

 {% load polls_tags %}
 
 {% if poll %}
+<style type="text/css">
+	{% include "_polls_style.css" %}
+</style>
 <script type="text/javascript">
-	show_points = false;
-
-	$(document).ready(function() {
-		var vote_url = '{% url poll_ajax_vote poll.pk %}';
-		var result_url = '{% url poll_ajax_result poll.pk %}';
-		var poll_pk = '{{ poll.pk }}';
-		var poll_type = {% if poll.polltype.index == 0 %}'single'{% else %}'multiple'{% endif %};
-		
-		var path_to_items = '#poll_content_' + poll_pk + ' #poll_body input[name="poll_' + poll_pk + '"]';
-		var body = $('#poll_content_' + poll_pk + ' #poll_body');
-		
-		function showResults(data) {
-			var all_points = 0, total = 0, biggest = 0;
-			
-			body.hide('slow', complete=function() {
-				body.empty();
-				$.each(data, function(index, value) {
-					if(index != 'total') {
-						if(data[index]['count'] > biggest) {
-							biggest = data[index]['count'];
-						}
-						all_points += data[index]['count'];
-					}
-				});
-				
-				$.each(data, function(index, value) {
-					if(index == 'total') {
-						total = value;
-					} else {
-						var percentage = (data[index]['count'] * 100) / all_points;
-						var bar_class = 'normal_bar';
-						
-						if(data[index]['count'] == biggest) {
-							bar_class = 'max_bar';
-						}
-						
-						var points_txt = '';
-						if(show_points) {
-							points_txt = '<sup>(' + data[index]['count'] + ')</sup>'; 
-						}
-						
-						body.append('<dl id="poll_item_dl">');
-						body.append('<dt>' + data[index]['title'] + ': <strong>' + (Math.round(percentage*100)/100) + '%</strong>' + points_txt + '</dt>');
-						body.append('<dd><div id="bar" class="' + bar_class + '" style="width: ' + percentage + '%;"></div></dd>');
-						body.append('</dl>');
-					}
-				});
-				
-				var total_points_txt = '';
-				if(show_points) {
-					total_points_txt = '<sup>(' + all_points + ')</sup>'; 
-				}
-				
-				body.append('<div id="voters_count">' + '{% trans "Total Voters" %}' + ': <span id="total">' + total + '</span> ' + total_points_txt + '</div>');
-			}).show('slow');
-		}
-		
-		function RecognizeAndPrepare() {
-			var result = '';
-			
-			$(path_to_items).map(function() {
-				if((this.type == 'checkbox' || this.type == 'radio') && this.checked) {
-					result += '"' + this.id + '": ' + '"' + this.type + '",';
-				}
-				if(this.type == 'text' && this.value != '') {
-					result += '"' + this.id + '": ' + '"' + this.value + '",';
-				}
-			})
-			
-			if(result.length > 0)
-				if(result[result.length - 1] == ',')
-					result = result.substring(0, result.length - 1);
-			
-			return '{' + result + '}';
-		}
-		
-		$(path_to_items).bind('focusin click', function() {
-			if(poll_type == 'single') {
-				var selected = this;
-				
-				$(path_to_items).map(function() {
-					if(this != selected) {
-						if((this.type == 'checkbox' || this.type == 'radio') && this.checked) {
-							this.checked = false;
-						}
-						if(this.type == 'text' && this.value != '') {
-							this.value = '';
-						}
-					} 
-				});
-			}
-		});
-		
-		function doResults() {
-			$.get(result_url, function(data) {
-				showResults($.parseJSON(data));
-			});
-		}
-		
-		$("#sendvote_" + poll_pk).click(function() {
-			var result = RecognizeAndPrepare();
-			
-			if(result == '{}') {
-				alert('{% trans "Please, choose anything to vote" %}');
-			} else {
-				body.hide('slow', complete=function() {
-					$.get(vote_url, {'chosen_items': result}, function() {
-						doResults();
-					});
-				});
-			}
-		});
-		
-		$("#showresults_" + poll_pk).click(function() {
-			doResults();
-		});
-	});
+	{% include "_polls_script.js" %}
 </script>
 
 <div id="poll_content_{{ poll.pk }}">
-	<p id="warning">
+	<p id="poll_warning_message">
 		<noscript>		
 			{% trans "WARNING: JavaScript is disabled in your browser. Please, turn it on to vote." %}
 		</noscript>
 	</p>
 	<form method="post">
 		{% csrf_token %}
-		<h1><span id="poll">{% trans "Poll" %}:</span> {{ poll.title }}</h1>
+		<h1><span id="poll_title">{% trans "Poll" %}:</span> {{ poll.title }}</h1>
 		{% if user.is_authenticated %}
 		<div id="poll_userspace">
 			{% trans "User" %}: {{ user }}
 	</form>
 	<script type="text/javascript">
 		if(!navigator.cookieEnabled) {
-			$('#poll_content_{{ poll.pk }} #warning').append('{% trans "WARNING: Cookies are disabled in your browser. Please, turn it on to vote." %}');
+			$('#poll_content_{{ poll.pk }} #poll_warning_message').append('{% trans "WARNING: Cookies are disabled in your browser. Please, turn it on to vote." %}');
 			$('#sendvote_{{ poll.pk }}').attr('disabled', '');
 		}
 	</script>
       url='http://polltest.pythonism.ru',
       download_url='https://bitbucket.org/RafRaf/django-poll-system',
       packages=['poll', 'poll.templatetags'],
-      package_data={'poll': ['fixtures/initial_data.json', 'static/polls/css/*', 'locale/ru/LC_MESSAGES/*', 'templates/*']},
+      package_data={'poll': ['fixtures/initial_data.json', 'locale/ru/LC_MESSAGES/*', 'templates/*']},
      )