feat: Add PillRadioSelect widget

In order to promote less clicks on the mobile experience, this wideget
will splat out the drop down options similar to child select
This commit is contained in:
billybonks 2024-02-06 14:05:09 +08:00 committed by Christopher Charbonneau Wells
parent 2d1338a915
commit 3edd645f53
4 changed files with 29 additions and 1 deletions

View File

@ -10,7 +10,7 @@ from taggit.forms import TagField
from babybuddy.widgets import DateInput, DateTimeInput, TimeInput
from core import models
from core.models import Timer
from core.widgets import TagsEditor, ChildRadioSelect
from core.widgets import TagsEditor, ChildRadioSelect, PillRadioSelect
def set_initial_values(kwargs, form_type):
@ -201,6 +201,7 @@ class BottleFeedingForm(CoreModelForm, TaggableModelForm):
widgets = {
"child": ChildRadioSelect,
"start": DateTimeInput(),
"type": PillRadioSelect(),
"notes": forms.Textarea(attrs={"rows": 5}),
}

View File

@ -0,0 +1,11 @@
{% with id=widget.attrs.id %}
<div {% if id %}id="{{ id }}"{% endif %} class="radio-container">
{% for group, options, index in widget.optgroups %}
{% for option in options %}
{% if option.value != '' %}
{% include option.template_name with widget=option %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% endwith %}

View File

@ -0,0 +1,3 @@
{% include "django/forms/widgets/input.html" %}
<label {% if widget.attrs.id %}for="{{ widget.attrs.id }}"{% endif %}
class="btn btn-outline-light btn-no-hover">{{ widget.label }}</label>

View File

@ -104,3 +104,16 @@ class ChildRadioSelect(RadioSelect):
if value != "":
option["picture"] = value.instance.picture
return option
class PillRadioSelect(RadioSelect):
input_type = "radio"
template_name = "core/pill_radio.html"
option_template_name = "core/pill_radio_option.html"
attrs = {"class": "btn-check"}
def build_attrs(self, base_attrs, extra_attrs=None):
attrs = super().build_attrs(base_attrs, extra_attrs)
attrs["class"] += " btn-check"
return attrs