Improve forms, add helper buttons on add session form
This commit is contained in:
parent
366c25a1ff
commit
fa4f1c4810
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,8 +9,9 @@
|
|||
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="submit" value="Submit"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
{% endblock content %}
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="submit" value="Submit"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
@ -17,5 +18,5 @@
|
|||
|
||||
{% block scripts %}
|
||||
{% load static %}
|
||||
<script type="module" src="{% static 'js/qol.js' %}"></script>
|
||||
{% endblock scripts %}
|
||||
<script type="module" src="{% static 'js/add_edition.js' %}"></script>
|
||||
{% 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["form"] = form
|
||||
return render(request, "add.html", context)
|
||||
return render(request, "add_session.html", context)
|
||||
|
||||
|
||||
def update_session(request, session_id=None):
|
||||
|
|
Loading…
Reference in New Issue