changeset 1091:f7554fb88727

Update polls app to V3 design.
author Brian Neal <bgneal@gmail.com>
date Wed, 11 May 2016 21:49:14 -0500
parents 71685387dd11
children 6047465d17b8
files polls/static/css/polls.css polls/views.py sg101/templates/polls/index.html sg101/templates/polls/poll_detail.html sg101/templates/polls/poll_vote.html
diffstat 5 files changed, 67 insertions(+), 55 deletions(-) [+]
line wrap: on
line diff
--- a/polls/static/css/polls.css	Mon May 09 19:48:51 2016 -0500
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,13 +0,0 @@
-.poll-form {
-    padding-bottom: 1em;
-}
-.poll-form ul {
-    list-style: none;
-    padding-bottom: 0.5em;
-}
-.poll-form li {
-    padding: 0.5em 0 0.5em 0.5em;
-}
-dl.poll-result {
-    width: 80%;
-}
--- a/polls/views.py	Mon May 09 19:48:51 2016 -0500
+++ b/polls/views.py	Wed May 11 21:49:14 2016 -0500
@@ -61,6 +61,7 @@
     return render(request, 'polls/index.html', {
         'current_polls': current_polls,
         'old_polls': old_polls,
+        'V3_DESIGN': True,
         })
 
 #######################################################################
@@ -77,6 +78,7 @@
         'total_votes': total_votes,
         'choices': choices,
         'user_choice': get_user_choice(request.user, poll),
+        'V3_DESIGN': True,
         })
 
 #######################################################################
@@ -106,6 +108,7 @@
         'poll': poll,
         'vote_form': vote_form,
         'user_choice': user_choice,
+        'V3_DESIGN': True,
         })
 
 #######################################################################
--- a/sg101/templates/polls/index.html	Mon May 09 19:48:51 2016 -0500
+++ b/sg101/templates/polls/index.html	Wed May 11 21:49:14 2016 -0500
@@ -1,5 +1,4 @@
-{% extends 'base.html' %}
-{% load comment_tags %}
+{% extends 'v3/base.html' %}
 {% block title %}Polls{% endblock %}
 {% block content %}
    <h2>Polls</h2>
--- a/sg101/templates/polls/poll_detail.html	Mon May 09 19:48:51 2016 -0500
+++ b/sg101/templates/polls/poll_detail.html	Wed May 11 21:49:14 2016 -0500
@@ -1,39 +1,46 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% load comment_tags %}
 {% load script_tags %}
 {% load static from staticfiles %}
 {% block title %}Poll Results: {{ poll.question }}{% endblock %}
+{% block pre_custom_css %}
+{% css_tags 'jquery-ui markitup' %}
+{% endblock %}
 {% block custom_css %}
-<link rel="stylesheet" type="text/css" href="{% static "css/polls.css" %}" />
 <link rel="stylesheet" type="text/css" href="{% static "css/comments.css" %}" />
 {% endblock %}
-{% block custom_js %}
-{% if poll.is_open %}
-{% script_tags "markitup jquery-ui" %}
-<script type="text/javascript" src="{% static "js/comments.js" %}"></script>
-{% endif %}
-{% endblock %}
+
 {% block content %}
-<h2>Polls</h2>
-<h3>Results for: {{ poll.question }}</h3>
+<nav aria-label="You are here:" role="navigation">
+  <ul class="breadcrumbs">
+    <li><a href="{% url 'polls-main' %}">Polls</a></li>
+    <li>{{ poll.question }}</li>
+  </ul>
+</nav>
+<h2>Results for: {{ poll.question }}</h2>
 <dl class="poll-result">
 {% for choice in choices %}
    <dt>{{ choice.choice }} - {{ choice.pct|floatformat }}% ({{ choice.votes }} vote{{ choice.votes|pluralize }})</dt>
    <dd>
-      <div class="poll-percent" style="width: {{ choice.pct|floatformat:0 }}%; background-color: teal; color: white;">
-         <span>&nbsp;</span></div>
+      <div class="progress" role="progressbar" tabindex="0"
+         aria-valuenow="{{ choice.pct }}" aria-valuemin="0"
+         aria-valuetext="{{ choice.pct }} percent" aria-valuemax="100">
+         <div class="progress-meter" style="width: {{ choice.pct|floatformat:0 }}%"></div>
+      </div>
    </dd>
 {% endfor %}
 </dl>
 <p><strong>{{ total_votes }} total vote{{ total_votes|pluralize }}.</strong></p>
 
 {% if user_choice %}
-<p>You voted for &quot;{{ user_choice.choice }}&quot;.</p>
+   <div class="primary callout">
+      You voted for &quot;{{ user_choice.choice }}&quot;.
+   </div>
 {% endif %}
 
 <p>
 {% if poll.is_open %}
-Voting for this poll started on {{ poll.start_date|date:"F d, Y" }}. 
+Voting for this poll started on {{ poll.start_date|date:"F d, Y" }}.
    {% if poll.end_date %}
       Voting will end on {{ poll.end_date|date:"F d, Y" }}.
    {% endif %}
@@ -42,12 +49,15 @@
 {% endif %}
 </p>
 
-<p class="poll-nav">
+<div>
 {% if poll.is_open and user.is_authenticated %}
-<a href="{% url 'polls-vote' poll_id=poll.id %}">Vote</a> |
+   {% if user_choice %}
+      <a href="{% url 'polls-vote' poll_id=poll.id %}" class="alert button">Delete My Vote</a>
+   {% else %}
+      <a href="{% url 'polls-vote' poll_id=poll.id %}" class="primary button">Vote</a>
+   {% endif %}
 {% endif %}
-<a href="{% url 'polls-main' %}">All Polls</a>
-</p>
+</div>
 
 {% get_comment_count for poll as comment_count %}
 <p>This poll has <span id="comment-count">{{ comment_count }}</span> comment{{ comment_count|pluralize }}.</p>
@@ -57,7 +67,14 @@
 <p>Leave a comment?</p>
 {% render_comment_form user poll %}
 {% else %}
-<p>Comments are closed for this poll. If you'd like to share your thoughts on this poll 
+<p>Comments are closed for this poll. If you'd like to share your thoughts on this poll
 with the site staff, you can <a href="{% url 'contact-form' %}">contact us directly</a>.</p>
 {% endif %}
 {% endblock %}
+
+{% block custom_js %}
+   {% if poll.is_open %}
+      {% js_tags "markitup jquery-ui" %}
+      <script type="text/javascript" src="{% static "js/comments.js" %}"></script>
+   {% endif %}
+{% endblock %}
--- a/sg101/templates/polls/poll_vote.html	Mon May 09 19:48:51 2016 -0500
+++ b/sg101/templates/polls/poll_vote.html	Wed May 11 21:49:14 2016 -0500
@@ -1,31 +1,37 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% load static from staticfiles %}
 {% block title %}Polls: {{ poll.question }}{% endblock %}
-{% block custom_css %}
-<link rel="stylesheet" type="text/css" href="{% static "css/polls.css" %}" />
-{% endblock %}
 {% block content %}
-<h2>Poll</h2>
-<h3>Voting Booth: {{ poll.question }}</h3>
+<nav aria-label="You are here:" role="navigation">
+  <ul class="breadcrumbs">
+    <li><a href="{% url 'polls-main' %}">Polls</a></li>
+    <li><a href="{{ poll.get_absolute_url }}">{{ poll.question }}</a></li>
+    <li>Vote</li>
+  </ul>
+</nav>
+<h2>{{ poll.question }}</h2>
 {% if user_choice %}
-<p>You voted for &quot;{{ user_choice.choice }}&quot;.</p>
-<form action="{% url 'polls-delete_vote' %}" method="post">{% csrf_token %}
-   <div class="poll-form">
+   <div class="warning callout">
+   You previously voted for &quot;{{ user_choice.choice }}&quot;.
+   </div>
+   <form action="{% url 'polls-delete_vote' %}" method="post">{% csrf_token %}
       <input type="hidden" name="poll_id" value="{{ poll.id }}" />
-      <input type="submit" value="Delete My Vote!" />
-   </div>
-</form>
+      <input type="submit" value="Delete My Vote!" class="alert button" />
+   </form>
 {% else %}
    <form action="." method="post">{% csrf_token %}
-      <div class="poll-form">
-      {{ vote_form.as_p }}
-      <input type="submit" value="Vote" />
-      </div>
+      {% if vote_form.non_field_errors %}
+         {{ form.non_field_errors }}
+      {% endif %}
+      {% if vote_form.choices.errors %}
+         {{ vote_form.choices.errors }}
+      {% endif %}
+      <ul class="no-bullet">
+         {% for field in vote_form.choices %}
+               <li>{{ field }}</li>
+         {% endfor %}
+      </ul>
+      <input type="submit" value="Cast My Vote!" class="primary button" />
    </form>
 {% endif %}
-<p class="poll-nav">
-<a href="{{ poll.get_absolute_url }}">View results</a>
-| <a href="{% url 'polls-main' %}">All polls</a>
-</p>
-<p>This poll was published on {{ poll.start_date|date:"F d, Y" }}.</p>
 {% endblock %}