-
Notifications
You must be signed in to change notification settings - Fork 289
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🪲 Change TWElements select to our owns #5438
Conversation
…into fix-level-warnings
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wonderful and that's all! We just need to generalize it! Did you create an issue for that?
templates/customize-adventure.html
Outdated
<div class="flex-1"> | ||
<select id="language" name="language" required class="toggle-button font-semibold rounded inline-flex justify-between appearance-none w-full border-2 bg-gray-100 text-gray-700 p-2 rounded"> | ||
<option value="{{ adventure['language'] or current_language().lang }}" selected>{{ lang_to_sym(adventure['language'] or current_language().lang) }}</option> | ||
{% for language in other_languages(adventure["language"]) %} | ||
<option value="{{language.lang}}">{{language.sym}}</option> | ||
{% endfor %} | ||
</select> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shall we convert this dropdown to our own as well?? It'd feel more consistent!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea!
templates/customize-adventure.html
Outdated
<input type="text" name="tag" autocomplete="off" placeholder="{{_('tag_input_placeholder')}}" id="search_tags_input" | ||
class="appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" | ||
hx-trigger="enter" | ||
hx-post="/tags/create/{{adventure.id}}" | ||
hx-target="#tags-list" | ||
hx-swap="outerHTML" | ||
_="on click event.stopPropagation() | ||
on keypress if event.keyCode == 13 event.stopPropagation() end | ||
on htmx:afterRequest set my value to '' then focus()" | ||
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<input type="text" name="tag" autocomplete="off" placeholder="{{_('tag_input_placeholder')}}" id="search_tags_input" | |
class="appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" | |
hx-trigger="enter" | |
hx-post="/tags/create/{{adventure.id}}" | |
hx-target="#tags-list" | |
hx-swap="outerHTML" | |
_="on click event.stopPropagation() | |
on keypress if event.keyCode == 13 event.stopPropagation() end | |
on htmx:afterRequest set my value to '' then focus()" | |
> | |
<input type="text" name="tag" autocomplete="off" placeholder="{{_('tag_input_placeholder')}}" id="search_tags_input" | |
data-autosaved="true" | |
class="appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded" | |
hx-trigger="keyup[keyCode == 13]" | |
hx-post="/tags/create/{{adventure.id}}" hx-target="#tags-list" hx-swap="outerHTML" | |
_="on click event.stopPropagation() | |
on keypress if event.keyCode == 13 event.stopPropagation() end | |
on htmx:beforeRequest event.preventDefault() then if my value == '' then detail.xhr.abort() end | |
on htmx:afterRequest set my value to '' then focus()" | |
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done!
<button class="green-btn" id="add_adventure_tags" | ||
hx-trigger="click" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jpelay the type="button"
property needs to be added to the preview button as well, because if we click enter now, it opens the preview!
<button class="green-btn" id="add_adventure_tags" | |
hx-trigger="click" | |
<button class="green-btn" id="add_adventure_tags" | |
type="button" | |
hx-trigger="click" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You're right, fixed!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All gooddd!
Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork). |
Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork). |
The current dropdowns are part of a paid library and therefore are very hard to target in JS. Replace them with Hasan's select to be able to have control over them.
Fixes #5290
How to test
Customizing an adventure should work normally