Feature/redesign form pages

[EdoStorm96]

So this is a first version of the redesigned forms. It looks pretty good, but it could use further refinement I guess. As I am leaving for 2 weeks tomorrow, I thought I´d open this PR, as I think it is ready for some input.

Some things to note:

• There is an option to glue form blocks together (uu-form-no-gap), which I think would be nice in some cases (eg. the image below). I'm wondering if there is an elegant way to implement this. Preferably, just add it as an attr to the widget or something? Looking at lines 13-15 of cdh.core.form_template.html, it seems that there should be some possibility for this?
• proposal needs to be available in context to ensure stepper appears
• Some forms are still quite long, eg. study_form, observation_form and intervention_form. Breaking these up could be nice ... but also a lot of work and could be confusing?
• for study_design I've implemented a custom field to handle the data as opposed to using the 3 separate booleans on the model. I am actually second guessing this decision as with uu-form-no-gap this situation would not have been as much of a problem. However, this solution works fine too.
• could we format field.non_field_errors in a more elegant way? I guess in general we still have to fix how errors are displayed, so this can be fixed then.
• I can´t get bootstrap table styling, like table-striped or table-light to work ... Because the background of table is transparent by default. How to override?
• I've opted to display the session and task tables in the full width of the page, which results in some ugly outlining. I do think this is nice for readability though.
• Long help texts can look ugly ... Because they unnecessarily stretch the uu-form-row in height ...
• I've not done study_consent.html, as that is going to change anyway, with Michael's renewed Documents system (and it would have been a pain ;p)

Mock-up of use case for uu-form-no-gap :

(btw ... I am just noticing the translation issues ... Not sure what is going on)

[miggol]

I'm happy with this, lots of changes but as far as I can tell all is well, congrats!

I did find some bugs unrelated to this PR while going through everything. Will make a separate PR for those.

I'll make a separate comment addressing some of the points in your PR description.

[miggol]

While reviewing I noticed that oddly enough the anonymity questions on the observation model have a default (= False) set. Not necessarily something to be worried about right now.

[miggol]

The method get_next_url() and the attributes form_class and template_name feel like they don't really belong here.

[miggol]

This should be unnecessary

[miggol]

This should be unnecessary

[miggol]

There is an option to glue form blocks together (uu-form-no-gap), which I think would be nice in some cases (eg. the image below). I'm wondering if there is an elegant way to implement this. Preferably, just add it as an attr to the widget or something? Looking at lines 13-15 of cdh.core.form_template.html, it seems that there should be some possibility for this?

I can't find an existing elegant way to do this either. In form_template.html CSS classes are fetched from Django's BoundField.css_classes(extra_classes=None) which supports the passing extra classes, but of course we can't pass arguments from the template.

A working proof of concept is as follows:

class ObservationForm(SoftValidationMixin, ConditionalModelForm):

    # (Rest of class ommitted)

    def get_context(self,):
        context = super().get_context()
        fields = context["fields"]
        for field, errors in fields:
            if field.name == "is_anonymous":
                # Got 'em
                field.css_classes = lambda: field.css_classes() + " uu-form-no-gap"
        return context

I suspect a better solution would be to implement the uu-form-no-gap option in cdh.core.form_template.html.

Some forms are still quite long, eg. study_form, observation_form and intervention_form. Breaking these up could be nice ... but also a lot of work and could be confusing?

I think the questions on those pages are very closely related to one another, and therefore probably better to keep together. And also not a priority right now.

for study_design I've implemented a custom field to handle the data as opposed to using the 3 separate booleans on the model. I am actually second guessing this decision as with uu-form-no-gap this situation would not have been as much of a problem. However, this solution works fine too.

This is a pretty good interim solution IMO!

could we format field.non_field_errors in a more elegant way? I guess in general we still have to fix how errors are displayed, so this can be fixed then.

Yes, I think this is worthy of a separate issue. Should be as simple as implementing form.non_field_errors into the cdh.core.form_template.html.

I can´t get bootstrap table styling, like table-striped or table-light to work ... Because the background of table is transparent by default. How to override?

Setting .table-striped on the table tag works for me. Though the stripes are very faint, is that what you would want to change?

I've opted to display the session and task tables in the full width of the page, which results in some ugly outlining. I do think this is nice for readability though.

I see what you mean, but we need the width. Good call

[miggol]

I believe SoftValidationMixin is interacting strangely with the cleaning process, which is giving me an error. I'll have a PR into this branch soon with my proposed fix.