diff --git a/docs/integrations/index.rst b/docs/integrations/index.rst index 4ab5fd496..f5efb7b41 100644 --- a/docs/integrations/index.rst +++ b/docs/integrations/index.rst @@ -29,6 +29,7 @@ Registering Integrations Form Integrations ----------------- +.. _Bulma: https://bulma.io/documentation .. _Django Forms: https://docs.djangoproject.com/en/2.2/topics/forms/#forms-in-django Polaris uses `Django Forms`_ for collecting users' information, like their @@ -53,8 +54,12 @@ You should be familiar with `Django Forms`_ and how they validate their inputs. class MyDepositForm(TransactionForm): """This form accepts the amount to deposit from the user.""" - first_name = forms.CharField() - last_name = forms.CharField() + first_name = forms.CharField( + widget=forms.widgets.TextInput(attrs={"class": "input"}) + ) + last_name = forms.CharField( + widget=forms.widgets.TextInput(attrs={"class": "input"}) + ) def clean(self): data = self.cleaned_data @@ -74,7 +79,19 @@ You should be familiar with `Django Forms`_ and how they validate their inputs. ``TransactionForm`` already collects the deposit amount and asset type and validates that the amount is within the asset's accepted deposit range. In this example, we've also added some contact information to the form fields -and ensure they aren't left empty. +and validation that ensures they're not empty. + +Polaris uses default CSS provided by Bulma_ for styling forms. To keep the +UX consistent, make sure to pass in a modified `widget` parameter to all +form fields displaying text like so: + +:: + + widget=forms.widgets.TextInput(attrs={"class": "input"}) + +The `attrs` parameter adds a HTML attribute to the `` tag that Bulma +uses to add better styling. You may also add more Bulma-supported attributes +to Polaris forms. Polaris will also call the form's ``after_validation()`` function, which in this case saves the form data collected to the database. diff --git a/polaris/polaris/integrations/forms.py b/polaris/polaris/integrations/forms.py index 1719a8409..5e96def05 100644 --- a/polaris/polaris/integrations/forms.py +++ b/polaris/polaris/integrations/forms.py @@ -20,7 +20,7 @@ class TransactionForm(forms.Form): """ amount = forms.FloatField( min_value=0, - widget=forms.NumberInput() + widget=forms.NumberInput(attrs={"class": "input"}) ) asset = None diff --git a/polaris/polaris/templates/deposit/form.html b/polaris/polaris/templates/deposit/form.html index 4c95ec263..26686cd86 100644 --- a/polaris/polaris/templates/deposit/form.html +++ b/polaris/polaris/templates/deposit/form.html @@ -16,6 +16,7 @@ {% for field in form %}
diff --git a/polaris/polaris/withdraw/forms.py b/polaris/polaris/withdraw/forms.py index 6cff45f28..f586024b0 100644 --- a/polaris/polaris/withdraw/forms.py +++ b/polaris/polaris/withdraw/forms.py @@ -9,10 +9,12 @@ class WithdrawForm(TransactionForm): bank_account = forms.CharField( min_length=0, - help_text="Enter the bank account number for withdrawal." + help_text="Enter the bank account number for withdrawal.", + widget=forms.widgets.TextInput(attrs={"class": "input"}) ) # TODO: Replace the bank with a ChoiceField. bank = forms.CharField( min_length=0, - help_text="Enter the bank to withdraw from." + help_text="Enter the bank to withdraw from.", + widget=forms.widgets.TextInput(attrs={"class": "input"}) ) diff --git a/setup.py b/setup.py index 12b502b00..c8fcd1d6a 100644 --- a/setup.py +++ b/setup.py @@ -6,7 +6,7 @@ setup( name="django-polaris", - version="0.9.6", + version="0.9.7", description="A SEP-24-compliant Django anchor server", long_description=long_description, long_description_content_type="text/markdown",