From 66038b25d737a5adbaf9fc6142f949d329f847e1 Mon Sep 17 00:00:00 2001 From: sosokker Date: Sun, 10 Sep 2023 21:53:07 +0700 Subject: [PATCH] Update UI --- polls/static/polls/js/detail.js | 38 ++++ polls/templates/polls/base.html | 30 ++-- polls/templates/polls/detail.html | 198 ++++++++++----------- polls/templates/polls/index.html | 268 +++++++++++++++++++---------- polls/templates/polls/results.html | 235 ++++++++++++++----------- 5 files changed, 464 insertions(+), 305 deletions(-) create mode 100644 polls/static/polls/js/detail.js diff --git a/polls/static/polls/js/detail.js b/polls/static/polls/js/detail.js new file mode 100644 index 0000000..86e7e5a --- /dev/null +++ b/polls/static/polls/js/detail.js @@ -0,0 +1,38 @@ +const toggleChoice = (button, choiceId) => { + const choiceInput = document.querySelector(`input[name="choice"][value="${choiceId}"]`); + + if (choiceInput) { + // already selected -> unselect it + if (choiceInput.checked) { + choiceInput.checked = false; + button.classList.remove('bg-green-500', 'border-solid', 'border-2', 'border-black', 'hover:bg-green-600'); + button.classList.add('bg-white', 'border-solid', 'border-2', 'border-black', 'hover:bg-white'); + // Clear display + document.getElementById('selected-choice').textContent = 'Please Select a Choice😊'; + } else { + // Unselect all choices + document.querySelectorAll('input[name="choice"]').forEach((choice) => { + choice.checked = false; + }); + + // Select the clicked choice + choiceInput.checked = true; + + // Reset the style of all choice buttons + document.querySelectorAll('.choice-button').forEach((btn) => { + btn.classList.remove('bg-green-500', 'border-solid', 'border-2', 'border-black', 'hover:bg-green-600'); + btn.classList.add('bg-white', 'border-solid', 'border-2', 'border-black', 'hover:bg-white'); + }); + + button.classList.remove('bg-white', 'border-solid', 'border-2', 'border-black', 'hover:bg-white'); + button.classList.add('bg-green-500', 'border-solid', 'border-2', 'border-black', 'hover:bg-green-600'); + + const choiceText = button.textContent.trim(); + document.getElementById('selected-choice').textContent = `You select: ${choiceText}`; + } + + // Enable the "Vote" button -> if select + const voteButton = document.getElementById('vote-button'); + voteButton.disabled = !document.querySelector('input[name="choice"]:checked'); + } +}; \ No newline at end of file diff --git a/polls/templates/polls/base.html b/polls/templates/polls/base.html index 7987a04..fc6124b 100644 --- a/polls/templates/polls/base.html +++ b/polls/templates/polls/base.html @@ -2,16 +2,20 @@ - - - - - - - Your Poll Website - - - {% block content %} - {% endblock content %} - - \ No newline at end of file + + + + + + + + + Your Poll Website + + + {% block content %} {% endblock content %} + + diff --git a/polls/templates/polls/detail.html b/polls/templates/polls/detail.html index 20fe9e2..6778f30 100644 --- a/polls/templates/polls/detail.html +++ b/polls/templates/polls/detail.html @@ -1,110 +1,102 @@ -{% extends 'polls/base.html' %} - -{% block content %} +{% extends 'polls/base.html' %} {% block content %}
- -
-

{{ question_text }}

-
-

{{ long_description }}

+ - -
-

Which one would you prefer:

+ +
+ +
+
+
+
+ 👤 {{ participant_count }} Participants + 👍 {{ question.up_vote_percentage }}% Upvoted + 👎 {{ question.down_vote_percentage }}% Downvoted +
+
+
+
+
+
-
-
- {% csrf_token %} -
-
Please Select a Choice😊
-
- {% if error_message %} -
-

{{ error_message }}

-
-
- - {% for choice in question.choice_set.all %} - - {% endfor %} -
-
- - -
- - Back to Polls - - - - -
- -
-
- + +
+
+
+
+

+ {{ long_description }} +

+
+
+
+ {% csrf_token %} +
+
Please Select a Choice😊
+
+ {% if error_message %} +
+

{{ error_message }}

+
+ {% endif %} +
+
+ + {% for choice in question.choice_set.all %} + + {% endfor %} +
+
+ + +
+ + Back to Polls + + + +
+
+
+
+
+
+
- {% endblock content %} diff --git a/polls/templates/polls/index.html b/polls/templates/polls/index.html index 94ca849..ff23cdc 100644 --- a/polls/templates/polls/index.html +++ b/polls/templates/polls/index.html @@ -1,97 +1,183 @@ -{% extends 'polls/base.html' %} - -{% block content %} +{% extends 'polls/base.html' %} {% block content %}
- - + + + +
+ {% comment %}
+
+
+
+
🔎
+ +
+ +
+ +
+
{% endcomment %} + + + {% comment %}
+ +
{% endcomment %} + + +
+
+

Top Polls Today

+
+
+ {% for question in latest_question_list %} +
+ +
+

{{ question.question_text }}

+
+

{{ question.short_description }}

+
+ 👍 + {{ question.up_vote_percentage }}% Upvoted + + 👎 + {{ question.down_vote_percentage }}% Downvoted +
+ +
+ 🕒 {{ question.time_left }} + {{ question.participant_count }} Participants 👤 +
+
+ + +
+
+
+
+
+ {% endfor %} +
+
+
+ + +
+
+

All Polls

+
+
+ {% for question in latest_question_list %} +
+ +
+

{{ question.question_text }}

+
+

{{ question.short_description }}

+
+ 👍 + {{ question.up_vote_percentage }}% Upvoted + + 👎 + {{ question.down_vote_percentage }}% Downvoted +
+ +
+ 🕒 {{ question.time_left }} + {{ question.participant_count }} Participants 👤 +
+
+ + +
+
+ {% if forloop.counter|divisibleby:2 %} +
+
+ {% else %} +
+
+ {% endif %} +
+ {% endfor %} +
+
+
+
+
+
+ + Ku Poll + +

+ Ku Poll is a project in ISP. +

+ + + Repository + + + +
+
{% endblock content %} diff --git a/polls/templates/polls/results.html b/polls/templates/polls/results.html index 3415e92..2ecdf3a 100644 --- a/polls/templates/polls/results.html +++ b/polls/templates/polls/results.html @@ -2,116 +2,155 @@ {% block content %}
- -
-

{{ question.question_text }}

-
+ + + +
+ + +
+
+

Result Summary:

+ + {% for choice in question.choice_set.all %} +
+ {{ choice.choice_text }} +
+ 👍 {{ choice.votes }} +
+
+
+
+ {% endfor %} +
+
+
+
- -
-

🕵️ Statistics

- {{ question.participant_count }} Participants 👤 - 👍 {{ question.up_vote_percentage }}% - 👎 {{ question.down_vote_percentage }}% + +
+
+

🕵️ Statistics

+ + {{ question.participant_count }} Participants 👤 + + 👍 {{ question.up_vote_percentage }}% + 👎 {{ question.down_vote_percentage }}%
+
+
- -
-

👋 Vote Percentage

-
- -
+ +
+
+

👋 Vote Percentage

+
+ +
+
+
- -
-

👏 Vote Count

-
- -
+ +
+
+

👏 Vote Count

+
+
-
- - - - Back to Polls - -
+
+
+
+ + + {% comment %} + Back to Polls + {% endcomment %} +
-{% endblock content %} \ No newline at end of file +{% endblock content %}