Plots2: Upgrade to Bootstrap 4

[ryzokuken]

We need to upgrade to Bootstrap 4, and this issue will hold a checklist for the same in the future. For now, we need to consolidate all the tasks we need to perform the migration and make a list of them in here, then break them into small self-contained and easy to solve issues.

Reference:

1. http://getbootstrap.com/docs/4.0/migration/
2. http://www.dotnetcurry.com/javascript/1334/migrating-bootstrap-3-to-bootstrap-4
3. http://upgrade-bootstrap.bootply.com (you can put HTML in here and it'll help you convert it!)

/cc @jywarren

Checklist

General Recommendations / Miscellaneous

• [x] Make a branch called something along the lines of bootstrap-4 in the publiclab/plots2 repository. All PRs made for this issue and all related ones need to use that branch as a base and not master. That branch would be merged into master only when the migration would be complete, we would verify the results and optionally, bootstrap 4 comes out of beta.
• [ ] Fixing pagination
• [x] Fixing the navigation bar

Deprecated --- Replace with modern alternatives

• [x] Refactor all existing wells into cards.
• [ ] Refactor all existing panels into cards.
• [ ] Refactor all existing thumbnails into cards.
• [x] Glyphicons, if any, should be replaced by other icons. Let's use only font-awesome for all our icons, they are good enough for most of our use cases.

Grid System

• [ ] Bump all grid sizes by one. (eg: sm becomes md, md becomes lg and so on).
• [ ] Add support for new xs tier for improving support at smaller mobile/IoT devices.

[jywarren]

Let's pull out anything from these checklists into our own checklist -- and let's split our checklist into

1. things we can do on the master branch (i.e. that are viable for both Bootstrap 3 and 4, if any)
2. things that we must do all at once

Thanks for getting this started!

[jywarren]

I added a few items to the checklist.

[ryzokuken]

@jywarren Added a few things to the checklist. Let's decide over chat what to refactor panels, thumbnails and wells into.

[jywarren]

I think the converter above has recommendations on that! wells become
cards, panels too, and thumbnails, they may convert to the new media type,
for < 480px screens?

On Thu, Oct 26, 2017 at 9:45 AM, Ujjwal Sharma [e-mail]
wrote:

@jywarren https://github.com/jywarren Added a few things to the
checklist. Let's decide over chat what to refactor panels, thumbnails and
wells into.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/1716#issuecomment-339670812,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJzDCutC0_fC72KzWeFuy7ePLtCbyks5swI0EgaJpZM4QD1x-
.

[sagarpreet-chadha]

@jywarren sir can i start working on this ?
Also is there any existing branch or should i make a new one ?
Thank You .

[ryzokuken]

@sagarpreet-chadha sure! If there isn't a branch yet, let me know. I'll have one made.

[ViditChitkara]

@ryzokuken I guess there are so many check boxes which indeed needs a lot of refractoring so can I also contribute to it? @sagarpreet-chadha if you are fine with it?

[ViditChitkara]

@ryzokuken there isn't any branch named bootstrap-4. If you have made some changes related to this, could you please push them ?

[ryzokuken]

Sure. This will need a lot of people's efforts.

On Mon 6 Nov, 2017, 12:14 PM Vidit, [e-mail] wrote:

@ryzokuken https://github.com/ryzokuken I guess there are so many check
boxes which indeed needs a lot of refractoring so can I also contribute to
it? @sagarpreet-chadha https://github.com/sagarpreet-chadha if you are
fine with it?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/1716#issuecomment-342060045,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMg3Mk61TcpTkxpI1VrVAcgOZLSWxvfyks5szqqxgaJpZM4QD1x-
.

[jywarren]

Complete!!! Now to 4.2...

[jywarren]

Oops! Wrong one! I meant rails 4!

[SidharthBansal]

@jywarren I want to know whether I will start with this issue with the current OAuth project or shall I first complete OAuth and then come to bootstrap upgrade?
The bootstrap upgrade is a larger issue than OAuth.

[ryzokuken]

@SidharthBansal I'd honestly recommend that you go with whatever you're more comfortable with, but yeah, completing your current project before jumping onto this sounds good. This is probably going to be a sizable task in itself.

Feel free to ping me whenever you need help with this even if I phase out a bit, I'd love to help out as much as I can.

[SidharthBansal]

OK great. Most probably this project will not end in Gsoc period. I will be happy to continue this project even after Gsoc period if it does not end till that time :-)

[ryzokuken]

@SidharthBansal let's try our best and if we still cannot manage to squeeze this in, then so be it.

As I said, if you face any issues or need help with long tasks, feel free to hit me up and I'd jump in. Ideally, we could also do the important parts and decompose the rest as a series of "first timer only" issues.

[SidharthBansal]

Yeah, I want to finish this up early too as I also want to work on other repos of public lab.

[ryzokuken]

Feel free to help us maintain plotsbot when you're done!

[SidharthBansal]

@ryzokuken when are you free to discuss about this project?

[SidharthBansal]

@jywarren @ryzokuken shall I create first timers for conversion of glyphicons to font-awesome?

[jywarren]

ooh, that sounds great!

[SidharthBansal]

I have created the bootstrap-4 branch

[jywarren]

cool!

On Fri, Jul 6, 2018 at 4:03 PM Sidharth Bansal [e-mail]
wrote:

I have created the bootstrap-4 branch

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/1716#issuecomment-403132857,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ3TDn2JHFUMXeE-sJj0K5RL99VBbks5uD8JmgaJpZM4QD1x-
.

[SidharthBansal]

I searched the whole app directory. There are no glyphicons. We have font-awesome icons everywhere.
But there are many glyphicons in public directory that needs to be changed, namely in public/lib/bootstrap, public/lib/bootstrap-datepicker, public/lib/bootstrao-token.....

[jywarren]

Ah, but those are installed via Bower, so they're external - not tracked in
our repository. So that part seems done!

On Sun, Jul 8, 2018 at 8:03 PM Sidharth Bansal [e-mail]
wrote:

I searched the whole app directory. There are no glyphicons. We have
font-awesome icons everywhere.
There are many glyphicons in public directory that needs to be changed,
namely in public/lib/bootstrap, public/lib/bootstrap-datepicker,
public/lib/bootstrao-token.....

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/1716#issuecomment-403327645,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ0tmLxLYrU1KF4DBVtHzWz51MuRtks5uEp2ngaJpZM4QD1x-
.

[SidharthBansal]

I will be working on the remaining stuff of OAuth Login first.

[jywarren]

Hi, Sidharth - what did you think, did you make up your mind about what to spend the remainder of the summer working on?

[SidharthBansal]

I will be working on the spam moderation system.

[jywarren]

ok, awesome, thanks!

On Tue, Jul 24, 2018 at 12:06 AM Sidharth Bansal [e-mail]
wrote:

I will be working on the spam moderation system.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/1716#issuecomment-407274391,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ7RpQwcDxXUCDs4fEiCcK8alC6NZks5uJp0ngaJpZM4QD1x-
.

[jywarren]

Wow, i'm looking at this again... i wonder how hard it will be. It will require a lot of visual inspection to confirm things are working properly. We can use the unstable branch to do this, i think...

[SidharthBansal]

We need someone who has a lot of front end experience. When I tried this, each and every CSS and jss element was disturbed. Header, footer, main content, all the divs etc. This project needs to be done by someone who is a front end designer. We can't even break this up into smaller pieces as we need to change the gem first. As soon as we upgrade the bootstrap gems, changes gets reflected in the whole website.

[jywarren]

I think that's pretty true, although we could potentially make some GCI
tasks around finding broken things on the unstable test server, or even
local copy, to help catch everything... not sure. Just thinking ahead.
Thanks for your input!

On Wed, Nov 7, 2018 at 11:40 AM Sidharth Bansal [e-mail]
wrote:

We need someone who has a lot of front end experience. When I tried this,
each and every CSS and jss element was disturbed. Header, footer, main
content, all the divs etc. This project needs to be done by someone who is
a front end designer. We can't even break this up into smaller pieces as we
need to change the gem first. As soon as we upgrade the bootstrap gems,
changes gets reflected in the whole website.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/1716#issuecomment-436690222,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ83gjFu8H9VYb5q2Bv2HtxoWXP-pks5uswzrgaJpZM4QD1x-
.