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/frontend/src/index.css b/frontend/src/index.css index 0bd1c9a..a1ae167 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.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 }}