peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change workout view picker to tailwind elements for ui consistency

Browse Source
This commit is contained in:
Peter Stockings
2023-03-28 20:47:01 +11:00
parent d4463dd842
commit d945d6fa9a
2 changed files with 141 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
templates/partials/page/calendar.html
View File

@@ -37,18 +37,26 @@
person['PersonName']}}</span> person['PersonName']}}</span>
</div> </div>
<select <div>
class="block appearance-none w-40 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 mr-5" <select id="workout-view-picker" data-te-select-init data-te-select-filter="true"
name="view" hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container" data-te-select-size="lg" name="view"
hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true"> hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true">
<option value="month" {% if selected_view=='month' %}selected{% endif %}>Month</option> <option value="month" {% if selected_view=='month' %}selected{% endif %}>Month</option>
<option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option> <option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option>
<option value="all">All</option> <option value="all">All</option>
</select> </select>
<script>
te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue({{ selected_view | safe }});
</script>
</div> </div>
</div> </div>
{% if selected_view == 'month' %}
<div class="flex flex-col px-2 py-2 -mb-px"> </div>
</div>
{% if selected_view == 'month' %}
<div class="flex flex-col px-2 py-2 -mb-px">
<div class="grid grid-cols-7 pl-2 pr-2"> <div class="grid grid-cols-7 pl-2 pr-2">
<div class="p-2 h-10 text-center font-bold"> <div class="p-2 h-10 text-center font-bold">
@@ -111,9 +119,9 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% elif selected_view == 'year'%} {% elif selected_view == 'year'%}
<div class="flex px-2 py-2 -mb-px"> <div class="flex px-2 py-2 -mb-px">
<div class="flex flex-wrap bg-white overflow-hidden"> <div class="flex flex-wrap bg-white overflow-hidden">
{% for i in range(12) %} {% for i in range(12) %}
@@ -161,8 +169,8 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
{{ render_partial('partials/stats.html', stats=person['Stats']) }} {{ render_partial('partials/stats.html', stats=person['Stats']) }}

13
templates/partials/page/person.html
View File

@@ -11,14 +11,19 @@
<span class="text-base font-normal text-gray-500">List of workouts</span> <span class="text-base font-normal text-gray-500">List of workouts</span>
</div> </div>
<div> <div>
<select <div>
class="block appearance-none w-40 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 mr-5" <select id="workout-view-picker" data-te-select-init data-te-select-filter="true"
name="view" hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" data-te-select-size="lg" name="view"
hx-target="#container" hx-push-url="true"> hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-push-url="true">
<option value="month">Month</option> <option value="month">Month</option>
<option value="year">Year</option> <option value="year">Year</option>
<option value="all" selected>All</option> <option value="all" selected>All</option>
</select> </select>
<script>
te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("all");
</script>
</div>
</div> </div>
</div> </div>