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

Show workouts on monthly calendar, not yet interactive (Will make it so you can change month and select workout to view on click)

Browse Source
This commit is contained in:
Peter Stockings
2023-10-13 16:56:23 +11:00
parent 8386789a2a
commit c7598f970d
3 changed files with 115 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
templates/partials/calendar.html
View File

@@ -28,238 +28,60 @@
</div>
</div>
<div class="flex items-center justify-between pt-12 overflow-x-auto">
<table class="w-full">
<thead>
<tr>
<th>
<div class="w-full flex justify-center">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Mo</p>
</div>
</th>
<th>
<div class="w-full flex justify-center">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Tu</p>
</div>
</th>
<th>
<div class="w-full flex justify-center">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">We</p>
</div>
</th>
<th>
<div class="w-full flex justify-center">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Th</p>
</div>
</th>
<th>
<div class="w-full flex justify-center">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Fr</p>
</div>
</th>
<th>
<div class="w-full flex justify-center">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Sa</p>
</div>
</th>
<th>
<div class="w-full flex justify-center">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Su</p>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-6">
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-300 dark:text-gray-100 font-medium">29</p>
</div>
</td>
<td class="pt-6">
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-300 dark:text-gray-100 font-medium">30</p>
</div>
</td>
<td class="pt-6">
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-300 dark:text-gray-100 font-medium">31</p>
</div>
</td>
<td class="pt-6">
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">1</p>
</div>
</td>
<td class="pt-6">
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">2</p>
</div>
</td>
<td class="pt-6">
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">3</p>
</div>
</td>
<td class="pt-6">
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">4</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">5</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">6</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<a role="link" tabindex="0"
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-200 hover:bg-indigo-200 text-base w-8 h-8 flex items-center justify-center font-medium border border-indigo-700 rounded-full">7</a>
</div>
</td>
<td>
<div class="w-full h-full">
<div class="flex items-center justify-center w-full rounded-full cursor-pointer">
<a role="link" tabindex="0"
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500 text-base w-8 h-8 flex items-center justify-center font-medium text-white bg-indigo-700 rounded-full">8</a>
</div>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">9</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">10</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">11</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">12</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">13</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">14</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">15</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">16</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">17</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">18</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">19</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">20</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">21</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">22</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">23</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">24</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100">25</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">26</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">27</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">28</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">29</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-500 dark:text-gray-100 font-medium">30</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-300 dark:text-gray-100 font-medium">1</p>
</div>
</td>
<td>
<div class="px-2 py-2 cursor-pointer flex w-full justify-center">
<p class="text-base text-gray-300 dark:text-gray-100 font-medium">2</p>
</div>
</td>
</tr>
</tbody>
</table>
<div class="flex flex-col pt-6">
<div class="grid grid-cols-7">
<div class="py-3 px-4">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Su</p>
</div>
<div class="py-3 px-4">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Mo</p>
</div>
<div class="py-3 px-4">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Tu</p>
</div>
<div class="py-3 px-4">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">We</p>
</div>
<div class="py-3 px-4">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Th</p>
</div>
<div class="py-3 px-4">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Fr</p>
</div>
<div class="py-3 px-4">
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Sa</p>
</div>
</div>
<div class="grid grid-cols-7 overflow-hidden flex-1 w-full">
{% for d in calendar_month.days_of_month %}
<div class="py-3 px-4">
<p
class="text-base {% if d.is_current_month %} text-gray-500 {% else %} text-gray-300 {% endif %} dark:text-gray-100 font-medium text-center">
{% if d.is_current_date %}
<div class="w-full h-full">
<div class="flex items-center justify-center w-full rounded-full cursor-pointer">
<a role="link" tabindex="0"
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500 text-base w-8 h-8 flex items-center justify-center font-medium text-white bg-indigo-700 rounded-full">{{
d.day_of_month }}</a>
</div>
</div>
{% elif d.is_workout %}
<div class="flex items-center justify-center w-full rounded-full cursor-pointer"><a role="link"
tabindex="0"
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-200 hover:bg-indigo-200 text-base w-8 h-8 flex items-center justify-center font-medium border border-indigo-700 rounded-full">{{
d.day_of_month }}</a>
</div>
{% else %}
{{ d.day_of_month }}
{% endif %}
</p>
</div>
{% endfor %}
</div>
</div>
</div>