From fa4f1c4810d3a3091058a2b8d9b3ce5f3d51b333 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Tue, 21 Feb 2023 23:49:57 +0100 Subject: [PATCH] Improve forms, add helper buttons on add session form --- CHANGELOG.md | 5 +++ common/input.css | 26 +++++++++++++++- games/static/js/{qol.js => add_edition.js} | 0 games/static/js/add_session.js | 16 ++++++++++ games/static/js/utils.js | 9 ++++++ games/templates/add.html | 3 +- games/templates/add_edition.html | 5 +-- games/templates/add_session.html | 36 ++++++++++++++++++++++ games/views.py | 2 +- 9 files changed, 97 insertions(+), 5 deletions(-) rename games/static/js/{qol.js => add_edition.js} (100%) create mode 100644 games/static/js/add_session.js create mode 100644 games/static/js/utils.js create mode 100644 games/templates/add_session.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 5549434..63432f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## Unreleased + +* Improve form appearance +* Add helper buttons next to datime fields + ## 1.0.3 / 2023-02-20 17:16+01:00 * Add wikidata ID and year for editions diff --git a/common/input.css b/common/input.css index 0bd1c9a..a1ae167 100644 --- a/common/input.css +++ b/common/input.css @@ -12,6 +12,22 @@ textarea { @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100; } +@media screen and (min-width: 768px) { + form input, + select, + textarea { + width: 300px; + } +} + +@media screen and (max-width: 768px) { + form input, + select, + textarea { + width: 150px; + } +} + #session-table { display: grid; grid-template-columns: 3fr 2fr repeat(2, 1fr) 0.5fr 1fr; @@ -38,9 +54,17 @@ textarea { } th { - @apply text-left; + @apply text-right; } th label { @apply mr-4; } + +.basic-button-container { + @apply flex space-x-2 justify-center +} + +.basic-button { + @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out; +} diff --git a/games/static/js/qol.js b/games/static/js/add_edition.js similarity index 100% rename from games/static/js/qol.js rename to games/static/js/add_edition.js diff --git a/games/static/js/add_session.js b/games/static/js/add_session.js new file mode 100644 index 0000000..87d86de --- /dev/null +++ b/games/static/js/add_session.js @@ -0,0 +1,16 @@ +import { toISOUTCString } from "./utils.js"; + +for (let button of document.querySelectorAll("[data-target]")) { + let target = button.getAttribute("data-target"); + let type = button.getAttribute("data-type"); + let targetElement = document.querySelector(`#id_${target}`); + button.addEventListener("click", (event) => { + event.preventDefault(); + if (type == "now") { + targetElement.value = toISOUTCString(new Date); + } else if (type == "toggle") { + if (targetElement.type == "datetime-local") targetElement.type = "text"; + else targetElement.type = "datetime-local"; + } + }); +} diff --git a/games/static/js/utils.js b/games/static/js/utils.js new file mode 100644 index 0000000..988e0a7 --- /dev/null +++ b/games/static/js/utils.js @@ -0,0 +1,9 @@ +/** + * @description Formats Date to a UTC string accepted by the datetime-local input field. + * @param {Date} date + * @returns {string} + */ +export function toISOUTCString(date) { + let month = (date.getMonth() + 1).toString().padStart(2, 0); + return `${date.getFullYear()}-${month}-${date.getDate()}T${date.getHours()}:${date.getMinutes()}`; +} diff --git a/games/templates/add.html b/games/templates/add.html index 369dbe4..b2ac101 100644 --- a/games/templates/add.html +++ b/games/templates/add.html @@ -9,8 +9,9 @@ {{ form.as_table }} + -{% endblock content %} \ No newline at end of file +{% endblock content %} diff --git a/games/templates/add_edition.html b/games/templates/add_edition.html index 73784a4..30bb35e 100644 --- a/games/templates/add_edition.html +++ b/games/templates/add_edition.html @@ -9,6 +9,7 @@ {{ form.as_table }} + @@ -17,5 +18,5 @@ {% block scripts %} {% load static %} - -{% endblock scripts %} \ No newline at end of file + +{% endblock scripts %} diff --git a/games/templates/add_session.html b/games/templates/add_session.html new file mode 100644 index 0000000..9352e0f --- /dev/null +++ b/games/templates/add_session.html @@ -0,0 +1,36 @@ +{% extends "base.html" %} + +{% block title %}{{ title }}{% endblock title %} + +{% block content %} +
+ + {% csrf_token %} + + {% for field in form %} + + + {% if field.name == "note" %} + + {% else %} + + {% endif %} + {% if field.name == "timestamp_start" or field.name == "timestamp_end" %} + + {% endif %} + + {% endfor %} + + + + +
{{ field.label_tag }}{{ field }}{{ field }} +
+ + +
+
+
+ {% load static %} + +{% endblock content %} diff --git a/games/views.py b/games/views.py index 3dfcc60..3fdd805 100644 --- a/games/views.py +++ b/games/views.py @@ -45,7 +45,7 @@ def add_session(request): context["title"] = "Add New Session" context["form"] = form - return render(request, "add.html", context) + return render(request, "add_session.html", context) def update_session(request, session_id=None):