-
-
Notifications
You must be signed in to change notification settings - Fork 267
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
allow dates to be specified as a year only #921
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Generated by Django 3.1.6 on 2021-04-08 00:32 | ||
|
||
import bookwyrm.models.fields | ||
from django.db import migrations | ||
|
||
|
||
class Migration(migrations.Migration): | ||
|
||
dependencies = [ | ||
('bookwyrm', '0061_auto_20210402_1435'), | ||
] | ||
|
||
operations = [ | ||
migrations.AddField( | ||
model_name='book', | ||
name='first_published_year_only', | ||
field=bookwyrm.models.fields.BooleanField(default=False), | ||
), | ||
migrations.AddField( | ||
model_name='book', | ||
name='published_year_only', | ||
field=bookwyrm.models.fields.BooleanField(default=False), | ||
), | ||
] |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,6 +4,45 @@ | |
|
||
{% block title %}{% if book %}{% blocktrans with book_title=book.title %}Edit "{{ book_title }}"{% endblocktrans %}{% else %}{% trans "Add Book" %}{% endif %}{% endblock %} | ||
|
||
{% block scripts %} | ||
<script defer> | ||
document.getElementById("id_first_published_year_only") | ||
.addEventListener( | ||
"input", | ||
setToYearOnly( | ||
"id_first_published_date", | ||
"label_first_published_date", | ||
"label_first_published_year_only"), | ||
{passive: true}); | ||
document.getElementById("id_published_year_only") | ||
.addEventListener( | ||
"input", | ||
setToYearOnly( | ||
"id_published_date", | ||
"label_published_date", | ||
"label_published_year_only"), | ||
{passive: true}); | ||
function setToYearOnly(date_input_id, date_label_id, year_label_id) { | ||
function setFirstPublishedToYearOnly(event) { | ||
let first_published_date_input = document.getElementById(date_input_id); | ||
let first_published_date_label = document.getElementById(date_label_id); | ||
let first_published_year_label = document.getElementById(year_label_id); | ||
// potential HACK: older ie browsers require a different method call: https://gist.github.com/tzi/2953155#file-important-js-L5 | ||
if (event.target.checked) { | ||
first_published_date_label.setAttribute("style", "display: none !important"); | ||
first_published_year_label.setAttribute("style", "display: block"); | ||
first_published_date_input.type = "number"; | ||
} else { | ||
first_published_date_label.setAttribute("style", "display: block"); | ||
first_published_year_label.setAttribute("style", "display: none !important"); | ||
first_published_date_input.type = "date"; | ||
} | ||
Comment on lines
+30
to
+39
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Your comment raises an interesting question: Does BookWyrm want to define a set of supported browser for a full-feature experience? If yes, which ones? (That would definitely go into a .browserslistrc file. :) ) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. my personal projects are always "the browsers supported are whatever browsers support the features i need without polyfills and work-arounds". that's definitely not accessible enough for a project with more reach and dev power though (imo) i recently read an article (that i've lost, sadly) talking about how few people actually use internet explorer. my personal opinion is that ie is end-of-life for several years now, bookwyrm's potential userbase probably has no overlap with any of the people using ie, and the added size of polyfills and work-arounds is more of an accessibility issue than one or two people being unable to use certain js features as for non-ie browsers to be supported, i'd have to defer to you! i think the js here makes it pretty clear that i'm not a front-end person :p There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I completely second the progressive enhancement approach. My question was more about a full-feature experience, where feature meant UX/UI features more than the content provided. I hope the intention is clearer. :) I won’t regret not caring about IE specifically as long as the content is available to the few people using it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i definitely understand what you mean now! i think it might be a good idea to explicitly list several target browsers, so we can make sure we're usable with more than just the main two or three |
||
} | ||
return setFirstPublishedToYearOnly; | ||
} | ||
</script> | ||
{% endblock %} | ||
|
||
{% block content %} | ||
<header class="block"> | ||
<h1 class="title level-left"> | ||
|
@@ -129,16 +168,24 @@ <h2 class="title is-4">{% trans "Metadata" %}</h2> | |
{% endfor %} | ||
|
||
<p class="mb-2"> | ||
<label class="label" for="id_first_published_date">{% trans "First published date:" %}</label> | ||
<input type="date" name="first_published_date" class="input" id="id_first_published_date"{% if form.first_published_date.value %} value="{{ form.first_published_date.value|date:'Y-m-d' }}"{% endif %}> | ||
<label class="label" for="id_first_published_date" id="label_first_published_date">{% trans "First published date:" %}</label> | ||
<label class="label" for="id_first_published_date" id="label_first_published_year_only" style="display: none;">{% trans "First published year:" %}</label> | ||
<label class="label is-inline-block" for="id_first_published_year_only">{% trans "Year only:" %}</label> | ||
<input type="checkbox" name="first_published_year_only" class="checkbox" id="id_first_published_year_only"{% if form.first_published_year_only.value %} checked{% endif %}> | ||
<input | ||
{% if form.first_published_year_only.value %}type="number"{% else %}type="date"{% endif %} name="first_published_date" class="input" id="id_first_published_date"{% if form.first_published_year_only.value and form.first_published_date.value%} value="{{ form.first_published_date.value|date:'Y' }}"{% elif form.first_published_date.value %} value="{{ form.first_published_date.value|date:'Y-m-d' }}"{% endif %}> | ||
</p> | ||
{% for error in form.first_published_date.errors %} | ||
<p class="help is-danger">{{ error | escape }}</p> | ||
{% endfor %} | ||
|
||
<p class="mb-2"> | ||
<label class="label" for="id_published_date">{% trans "Published date:" %}</label> | ||
<input type="date" name="published_date" class="input" id="id_published_date"{% if form.published_date.value %} value="{{ form.published_date.value|date:'Y-m-d'}}"{% endif %}> | ||
<label class="label" for="id_published_date" id="label_published_date">{% trans "Published date:" %}</label> | ||
<label class="label" for="id_published_date" id="label_published_year_only" style="display: none;">{% trans "Published year:" %}</label> | ||
<label class="label is-inline-block" for="id_published_year_only">{% trans "Year only:" %}</label> | ||
<input type="checkbox" name="published_year_only" class="checkbox" id="id_published_year_only"{% if form.published_year_only.value %} checked{% endif %}> | ||
<input | ||
{% if form.published_year_only.value %}type="number"{% else %}type="date"{% endif %} name="published_date" class="input" id="id_published_date"{% if form.published_year_only.value and form.published_date.value%} value="{{ form.published_date.value|date:'Y' }}"{% elif form.published_date.value %} value="{{ form.published_date.value|date:'Y-m-d' }}"{% endif %}> | ||
</p> | ||
{% for error in form.published_date.errors %} | ||
<p class="help is-danger">{{ error | escape }}</p> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Depending on where this PR is gonna go, I can help you with JS if you’re seeking assistance; just ping me if you wish.
Just two things for the sake of sharing:
defer
will not do anything on inline scripts. There is more details on MDN Web DocsThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i appreciate that! i'll definitely ping if something comes up. i used an inline script just for development, but i didn't know that about defer, thank you!