Improve forms, add helper buttons on add session form
This commit is contained in:
parent
ee44c52324
commit
2b9f321edf
|
@ -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
|
## 1.0.3 / 2023-02-20 17:16+01:00
|
||||||
|
|
||||||
* Add wikidata ID and year for editions
|
* Add wikidata ID and year for editions
|
||||||
|
|
|
@ -12,6 +12,22 @@ textarea {
|
||||||
@apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
|
@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 {
|
#session-table {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 3fr 2fr repeat(2, 1fr) 0.5fr 1fr;
|
grid-template-columns: 3fr 2fr repeat(2, 1fr) 0.5fr 1fr;
|
||||||
|
@ -38,9 +54,17 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
@apply text-left;
|
@apply text-right;
|
||||||
}
|
}
|
||||||
|
|
||||||
th label {
|
th label {
|
||||||
@apply mr-4;
|
@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;
|
||||||
|
}
|
||||||
|
|
|
@ -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";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
|
@ -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()}`;
|
||||||
|
}
|
|
@ -9,6 +9,7 @@
|
||||||
|
|
||||||
{{ form.as_table }}
|
{{ form.as_table }}
|
||||||
<tr>
|
<tr>
|
||||||
|
<td></td>
|
||||||
<td><input type="submit" value="Submit"/></td>
|
<td><input type="submit" value="Submit"/></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
|
|
||||||
{{ form.as_table }}
|
{{ form.as_table }}
|
||||||
<tr>
|
<tr>
|
||||||
|
<td></td>
|
||||||
<td><input type="submit" value="Submit"/></td>
|
<td><input type="submit" value="Submit"/></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
@ -17,5 +18,5 @@
|
||||||
|
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
<script type="module" src="{% static 'js/qol.js' %}"></script>
|
<script type="module" src="{% static 'js/add_edition.js' %}"></script>
|
||||||
{% endblock scripts %}
|
{% endblock scripts %}
|
|
@ -0,0 +1,36 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}{% endblock title %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<form method="post" enctype="multipart/form-data">
|
||||||
|
<table class="mx-auto">
|
||||||
|
{% csrf_token %}
|
||||||
|
|
||||||
|
{% for field in form %}
|
||||||
|
<tr>
|
||||||
|
<th>{{ field.label_tag }}</th>
|
||||||
|
{% if field.name == "note" %}
|
||||||
|
<td>{{ field }}</td>
|
||||||
|
{% else %}
|
||||||
|
<td>{{ field }}</td>
|
||||||
|
{% endif %}
|
||||||
|
{% if field.name == "timestamp_start" or field.name == "timestamp_end" %}
|
||||||
|
<td>
|
||||||
|
<div class="basic-button-container">
|
||||||
|
<button class="basic-button" data-target="{{field.name}}" data-type="now">Set to now</button>
|
||||||
|
<button class="basic-button" data-target="{{field.name}}" data-type="toggle">Toggle text</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{% endif %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td><input type="submit" value="Submit"/></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
{% load static %}
|
||||||
|
<script type="module" src="{% static 'js/add_session.js' %}"></script>
|
||||||
|
{% endblock content %}
|
|
@ -45,7 +45,7 @@ def add_session(request):
|
||||||
|
|
||||||
context["title"] = "Add New Session"
|
context["title"] = "Add New Session"
|
||||||
context["form"] = form
|
context["form"] = form
|
||||||
return render(request, "add.html", context)
|
return render(request, "add_session.html", context)
|
||||||
|
|
||||||
|
|
||||||
def update_session(request, session_id=None):
|
def update_session(request, session_id=None):
|
||||||
|
|
Loading…
Reference in New Issue