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

Refactor workout note template to use hyperscript and also render note with newlines preserved(Potentially switch to using Markdown?)

Browse Source
This commit is contained in:
Peter Stockings
2023-07-25 17:40:39 +10:00
parent 27ba4d096b
commit ee35e0b317
1 changed files with 4 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/partials/workout_note.html
View File

@@ -1,7 +1,7 @@
<div id="workout-note" hx-target="this" hx-swap="outerHTML swap:0.5s">
{% if is_edit|default(false, true) == false %}
{% if note|length > 0 %}
<span class="text-base font-normal text-gray-500">{{ note }}</span>
<span class="text-base font-normal text-gray-500 whitespace-normal">{{ note | replace('\n', '<br>') | safe }}</span>
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
hx-target="#workout-note">
@@ -17,7 +17,9 @@
{% else %}
<div class="flex items-center">
<textarea
class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 overflow-y-hidden"
_="on load set my.style.height to my.scrollHeight + 'px'
on input set my.style.height to 0 then set my.style.height to my.scrollHeight + 'px'"
placeholder="Your note..." name="note">{{ note }}</textarea>
<div class="flex flex-col">
<button
@@ -42,18 +44,6 @@
<span class="sr-only">Save note</span>
</button>
</div>
<script>
(function () {
const tx = document.querySelector('#workout-note textarea');
tx.setAttribute("style", "height:" + (tx.scrollHeight) + "px;overflow-y:hidden;");
tx.addEventListener("input", OnInput, false);
function OnInput() {
this.style.height = 0;
this.style.height = (this.scrollHeight) + "px";
}
})();
</script>
</div>
{% endif %}
</div>