starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-10 14:52:42 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: improve month_year_picker

Browse Source
This commit is contained in:
Herculino Trotta
2024-09-26 12:44:21 -03:00
parent c2cc8ff689
commit b6e4ed17e3
1 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/transactions/fragments/month_year_picker.html
+36 -17
View File
@@ -5,23 +5,42 @@
{% block title %}{% translate 'Pick one' %}{% endblock %} {% block title %}{% translate 'Pick one' %}{% endblock %}
{% block body %} {% block body %}
<div class="form-floating mb-3"> <ul class="nav nav-pills nav-fill" id="yearTabs" role="tablist">
<input type="search" class="form-control" id="floatingInput" placeholder="{% translate 'Search' %}" {% for date in available_years %}
_="on change or input <li class="nav-item" role="presentation">
if the event's key is 'Escape' <button class="nav-link{% if date.year == current_year %} active{% endif %}"
set my value to '' id="{{ date.year }}"
trigger keyup data-bs-toggle="tab"
else data-bs-target="#{{ date.year }}-pane"
show <li/> in #month-year-list when its textContent.toLowerCase() contains my value.toLowerCase()"> type="button"
<label for="floatingInput">{% translate 'Search' %}</label> role="tab"
</div> aria-controls="{{ date.year }}-pane"
<ul class="list-group list-group-flush" id="month-year-list"> aria-selected="{% if date.year == current_year %}true{% else %}false{% endif %}">
{% for date in available_dates %} {{ date.year }}
<li class="list-group-item hover:tw-bg-zinc-900"> </button>
<a class="text-decoration-none stretched-link" href="{% url "transactions_overview" month=date.month year=date.year %}"> </li>
{{ date.month|month_name }} / {{ date.year }}
</a>
</li>
{% endfor %} {% endfor %}
</ul> </ul>
<div class="tab-content" id="yearTabsContent">
{% for date in available_years %}
<div class="tab-pane fade{% if date.year == current_year %} show active{% endif %} mt-2"
id="{{ date.year }}-pane"
role="tabpanel"
aria-labelledby="{{ date.year }}"
tabindex="0">
<ul class="list-group list-group-flush" id="month-year-list">
{% for month in months %}
<li class="list-group-item hover:tw-bg-zinc-900
{% if month == current_month and date.year == current_year %} disabled bg-primary{% endif %}"
{% if month == current_month and date.year == current_year %}aria-disabled="true"{% endif %}>
<a class="text-decoration-none stretched-link {% if month == current_month and date.year == current_year %} text-black{% endif %}"
href="{% url "transactions_overview" month=month year=date.year %}">
{{ month|month_name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endblock %} {% endblock %}