Yu-Gi-Oh! Deck Building and Card Inventory Management web interface written in Common Lisp, utilizing HTMX.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
2.1KB

  1. <div class="field is-grouped">
  2. <div class="control has-tooltip-arrow has-tooltip-bottom"
  3. data-tooltip="Fuzzy Match">
  4. <input type="checkbox" name="fuzzy-match" checked="checked"
  5. form="search-form"
  6. style="cursor:inherit;width:1.5rem;height:1.5rem;margin: 0.35rem"
  7. hx-include="[name='search-form']"
  8. hx-post="/builder/search"
  9. hx-target="#search-results"
  10. hx-trigger="change">
  11. </div>
  12. <div class="control is-expanded">
  13. <input class="input" type="text" name="name"
  14. form="search-form"
  15. hx-include="[name='search-form']"
  16. hx-post="/builder/search"
  17. hx-target="#search-results"
  18. hx-trigger="change"
  19. placeholder="Product Name">
  20. </div>
  21. <div class="control">
  22. <div class="select">
  23. <select
  24. name="limit"
  25. form="search-form"
  26. hx-include="[name='search-form']"
  27. hx-post="/builder/search"
  28. hx-target="#search-results"
  29. hx-trigger="change">
  30. <option value="10">Limit</option>
  31. {% for option in search-params.limit %}
  32. <option value="{{ option }}">{{ option }}</option>
  33. {% endfor %}
  34. </select>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="field is-grouped is-grouped-right is-narrow">
  39. <!-- Toggle Advanced Search -->
  40. <div class="control has-tooltip-arrow has-tooltip-bottom"
  41. data-tooltip="Toggle Advanced Search">
  42. <button class="button"
  43. type="button"
  44. onclick="toggle_hidden('advanced-search')">
  45. <i class="fa-solid fa-magnifying-glass"></i>
  46. </button>
  47. </div>
  48. <!-- Menu Toggle -->
  49. <div class="control has-tooltip-arrow has-tooltip-bottom"
  50. data-tooltip="Toggle Deck Controls">
  51. <button class="button"
  52. type="button"
  53. onclick="toggle_hidden('deck-controls')">
  54. <i class="fa-solid fa-gear"></i>
  55. </button>
  56. </div>
  57. <!-- Reset Form -->
  58. <div class="control">
  59. <button class="button is-link" type="button"
  60. onclick="document.getElementById('search-form').reset()">
  61. Reset
  62. </button>
  63. </div>
  64. </div>