Upgrade editform as per bootstrap4

[CleverFool77]

Currently

Description

Due to usage of bootstrap3 classes and features, The UI has distorted as now we are using bootstrap4.
Fix the UI as per bootstrap4.

[digitaldina]

this is directly related to #5768 . I want to work on this, but do know where I should look to make these changes?

[jywarren]

Thank you!!! This will be in these files, I believe: https://github.com/publiclab/plots2/blob/master/app/views/users/_edit_form.html.erb https://github.com/publiclab/plots2/blob/master/app/views/users/profile.html.erb Awesome!

…

On Wed, May 22, 2019 at 3:40 PM d1g1t4ld1n4 ***@***.***> wrote: this is directly related to #5768 <#5768> . I want to work on this, but do know where I should look to make these changes? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#5741?email_source=notifications&email_token=AAAF6JZJ2B73SSXMN5TP2N3PWWOSFA5CNFSM4HN4MSC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWADB7A#issuecomment-494940412>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J4EE2CPH5DY7NXPLDLPWWOSFANCNFSM4HN4MSCQ> .

[digitaldina]

@jywarren I did some reading on the bootstrap migration doc. Are these the changes we're looking for?

• Sizing classes must be on the parent .input-group and not the individual form elements.
• "Added a new sm grid tier below 768px for more granular control. We now have xs, sm, md, lg, and xl. This also means every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4)." so I change this line's class to col-lg-2?

So would I remove the form-group for the bio and profile photo divs?

Thanks!

[CleverFool77]

Hi @dinaelhanan regarding this,
As you can see in the code, The form is inside row class of bootstrap4. The first two textboxes area are included into grid section of col-md-6. But after that, the text boxes below are not set as per the grid.
What we can do it is We can provide. A class of col-md-12 inside row class. And for every next row of textareas which include them inside col-md-12 with every form group being assigned of col-md-6 class.
A span of 6 for form group in md would stack it in small screens.
For example : Username-Email is col-md-12 section with both of taking of span of 6 columns.
is it understandable ?
I'm not good in explaining though 😅

[digitaldina]

Hi @CleverFool77 thanks for the explanation! You really did clear it up. Please see the PR I just opened to see if I did it correctly. Thanks!

[gautamig54]

@CleverFool77 @dinaelhanan I see this issue is still pending. If no one is working on this, I would like to take up. Thanks!