search

arachnys / cabot

Self-hosted, easily-deployable monitoring and alerts service - like a lightweight PagerDuty
MIT License
5.59k stars 594 forks source link

App styled with Bootstrap3 .. except forms? #608

Closed hartwork closed 6 years ago

hartwork commented 6 years ago

Hi!

It came to my attention that most forms in Cabot look a bit "alien" as they fail to apply Bootstrap3 theming as the rest of the app: Text inputs have nothing but style="width: 100%" for instance, no class="form-control". In Chromium, it shows best. There are multiple packages/ways to apply Bootstrap3 to Django forms, it seems. If someone made a pull request, are there some approaches that you would want more or less than others to be applied? Has this topic been considered for Cabot somewhere?

Best, Sebastian

dbuxton commented 6 years ago

This is notoriously a pain. Open to suggestions. Visual appearance hasn't been main priority but appreciate any systematic tweaks that improve UI!

stephrdev commented 6 years ago

Hi,

@hartwork pointed me to this issue; I would like to share my 2 cents on this topic:

I think the easiest way would be to use one of the Django libraries out there supporting a "better" form layout. Besides django-floppyforms and django-crispy-forms, there is django-tapeforms.

The usage / change of your code would be quite small; you'll need to add one Mixin to your forms and replace the {% include "cabotapp/_base_form.html" %} in your code with {% form form %} - the "form" template tag comes from the loaded "tapeforms" templatetag library.

See https://django-tapeforms.readthedocs.io/en/latest/usage.html for more details. Attention: to benefit from tapeforms in regards of styling for bootstrap you have to use Bootstrap optimized Mixin (https://django-tapeforms.readthedocs.io/en/latest/contrib.html#bootstrap-mixin)

Hope this helps you to move your project towards an improved UI. Thanks for sharing your work with the community!

dbuxton commented 6 years ago

Am happy to see a PR along these lines. Note that there's some customization in _base_form.html that would have to be done with tapeforms.