fix: Toggle Edit container component behavior
- commit
- 80e64ff2965ff861643a2e703a2f9e5085c45fc7
- author
- bnema · · 2023-09-27 12:22 UTC
- parent
- 90623ac
- signature
- unsigned
4 files · +24 -26
M internal/gotemplate/models/html/fragments/containerlist.gohtml +1 -1
| @@ -34,7 +34,7 @@ | |||
| 34 | 34 | hx-post="/htmx/container-manager/start/{{.ID}}" | |
| 35 | 35 | hx-target="#container-{{.ID}}" | |
| 36 | 36 | hx-target-*="#error-message-{{.ID}}" | |
| 37 | - | hx-swap="innerHTML" | |
| 37 | + | hx-swap="outerHTML" | |
| 38 | 38 | class="py-2 px-4" | |
| 39 | 39 | > | |
| 40 | 40 | <span class="iconoir-play text-xl font-bold"></span> | |
| @@ -34,7 +34,7 @@ | |||||
| 34 | hx-post="/htmx/container-manager/start/{{.ID}}" | 34 | hx-post="/htmx/container-manager/start/{{.ID}}" | ||
| 35 | hx-target="#container-{{.ID}}" | 35 | hx-target="#container-{{.ID}}" | ||
| 36 | hx-target-*="#error-message-{{.ID}}" | 36 | hx-target-*="#error-message-{{.ID}}" | ||
| 37 | - | hx-swap="innerHTML" | 37 | + | hx-swap="outerHTML" |
| 38 | class="py-2 px-4" | 38 | class="py-2 px-4" | ||
| 39 | > | 39 | > | ||
| 40 | <span class="iconoir-play text-xl font-bold"></span> | 40 | <span class="iconoir-play text-xl font-bold"></span> | ||
M internal/gotemplate/models/html/fragments/editcontainer.gohtml +18 -15
| @@ -1,17 +1,20 @@ | |||
| 1 | - | <div id="editor"> | |
| 2 | - | <form method="post" action="/htmx/container-manager/edit/{{.ID}}"> | |
| 3 | - | <textarea | |
| 4 | - | name="container_config" | |
| 5 | - | id="container_config" | |
| 6 | - | class="w-full p-4 rounded-md bg-slate-100 border-gray-300 border-2" | |
| 7 | - | oninput="this.style.height = '';this.style.height = this.scrollHeight + 'px'" | |
| 8 | - | >{{.ContainerInfo}}</textarea | |
| 9 | - | > | |
| 1 | + | <div id="edit-container-{{.ID}}" class="h-fit-content"> | |
| 2 | + | <div id="editor"> | |
| 3 | + | <form method="post" action="/htmx/container-manager/edit/{{.ID}}"> | |
| 4 | + | <textarea | |
| 5 | + | name="container_config" | |
| 6 | + | id="container_config" | |
| 7 | + | class="w-full p-4 rounded-md bg-slate-100 border-gray-300 border-2" | |
| 8 | + | rows="20" | |
| 9 | + | >{{.ContainerInfo}}</textarea | |
| 10 | + | > | |
| 11 | + | <!-- Close the textarea tag here --> | |
| 10 | 12 | ||
| 11 | - | <input | |
| 12 | - | type="submit" | |
| 13 | - | value="Save" | |
| 14 | - | class="bg-gordonmascot-mblue text-white px-4 py-2 rounded-md md:text-xl hover:bg-gordonmascot-hblue" | |
| 15 | - | /> | |
| 16 | - | </form> | |
| 13 | + | <input | |
| 14 | + | type="submit" | |
| 15 | + | value="Save" | |
| 16 | + | class="bg-gordonmascot-mblue text-white px-4 py-2 rounded-md md:text-xl hover:bg-gordonmascot-hblue" | |
| 17 | + | /> | |
| 18 | + | </form> | |
| 19 | + | </div> | |
| 17 | 20 | </div> | |
| @@ -1,17 +1,20 @@ | |||||
| 1 | - | <div id="editor"> | 1 | + | <div id="edit-container-{{.ID}}" class="h-fit-content"> |
| 2 | - | <form method="post" action="/htmx/container-manager/edit/{{.ID}}"> | 2 | + | <div id="editor"> |
| 3 | - | <textarea | 3 | + | <form method="post" action="/htmx/container-manager/edit/{{.ID}}"> |
| 4 | - | name="container_config" | 4 | + | <textarea |
| 5 | - | id="container_config" | 5 | + | name="container_config" |
| 6 | - | class="w-full p-4 rounded-md bg-slate-100 border-gray-300 border-2" | 6 | + | id="container_config" |
| 7 | - | oninput="this.style.height = '';this.style.height = this.scrollHeight + 'px'" | 7 | + | class="w-full p-4 rounded-md bg-slate-100 border-gray-300 border-2" |
| 8 | - | >{{.ContainerInfo}}</textarea | 8 | + | rows="20" |
| 9 | - | > | 9 | + | >{{.ContainerInfo}}</textarea |
| 10 | + | > | |||
| 11 | + | <!-- Close the textarea tag here --> | |||
| 10 | 12 | ||||
| 11 | - | <input | 13 | + | <input |
| 12 | - | type="submit" | 14 | + | type="submit" |
| 13 | - | value="Save" | 15 | + | value="Save" |
| 14 | - | class="bg-gordonmascot-mblue text-white px-4 py-2 rounded-md md:text-xl hover:bg-gordonmascot-hblue" | 16 | + | class="bg-gordonmascot-mblue text-white px-4 py-2 rounded-md md:text-xl hover:bg-gordonmascot-hblue" |
| 15 | - | /> | 17 | + | /> |
| 16 | - | </form> | 18 | + | </form> |
| 19 | + | </div> | |||
| 17 | </div> | 20 | </div> | ||
M internal/webui/public/assets/css/tailwind.css +5 -0
| @@ -644,6 +644,11 @@ video { | |||
| 644 | 644 | height: 100%; | |
| 645 | 645 | } | |
| 646 | 646 | ||
| 647 | + | .h-fit { | |
| 648 | + | height: -moz-fit-content; | |
| 649 | + | height: fit-content; | |
| 650 | + | } | |
| 651 | + | ||
| 647 | 652 | .w-1\/2 { | |
| 648 | 653 | width: 50%; | |
| 649 | 654 | } | |
| @@ -644,6 +644,11 @@ video { | |||||
| 644 | height: 100%; | 644 | height: 100%; | ||
| 645 | } | 645 | } | ||
| 646 | 646 | ||||
| 647 | + | .h-fit { | |||
| 648 | + | height: -moz-fit-content; | |||
| 649 | + | height: fit-content; | |||
| 650 | + | } | |||
| 651 | + | ||||
| 647 | .w-1\/2 { | 652 | .w-1\/2 { | ||
| 648 | width: 50%; | 653 | width: 50%; | ||
| 649 | } | 654 | } | ||
M internal/webui/public/assets/js/custom.js +0 -10
| @@ -46,13 +46,3 @@ document.body.addEventListener("htmx:afterSwap", function (event) { | |||
| 46 | 46 | }); | |
| 47 | 47 | }); | |
| 48 | 48 | ||
| 49 | - | document.body.addEventListener("htmx:afterSwap", function (event) { | |
| 50 | - | const textarea = document.getElementById("container_config"); | |
| 51 | - | if (textarea) { | |
| 52 | - | console.log("Textarea found, adjusting height."); | |
| 53 | - | textarea.style.height = ""; // Reset the height | |
| 54 | - | textarea.style.height = textarea.scrollHeight + "px"; | |
| 55 | - | } else { | |
| 56 | - | console.log("Textarea not found."); | |
| 57 | - | } | |
| 58 | - | });⏎̸ | |
| @@ -46,13 +46,3 @@ document.body.addEventListener("htmx:afterSwap", function (event) { | |||||
| 46 | }); | 46 | }); | ||
| 47 | }); | 47 | }); | ||
| 48 | 48 | ||||
| 49 | - | document.body.addEventListener("htmx:afterSwap", function (event) { | |||
| 50 | - | const textarea = document.getElementById("container_config"); | |||
| 51 | - | if (textarea) { | |||
| 52 | - | console.log("Textarea found, adjusting height."); | |||
| 53 | - | textarea.style.height = ""; // Reset the height | |||
| 54 | - | textarea.style.height = textarea.scrollHeight + "px"; | |||
| 55 | - | } else { | |||
| 56 | - | console.log("Textarea not found."); | |||
| 57 | - | } | |||
| 58 | - | });⏎̸ | |||