Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to Bootstrap 4 #1716

Closed
4 of 9 tasks
ryzokuken opened this issue Oct 24, 2017 · 31 comments · Fixed by #3937
Closed
4 of 9 tasks

Upgrade to Bootstrap 4 #1716

ryzokuken opened this issue Oct 24, 2017 · 31 comments · Fixed by #3937
Assignees
Labels
break-me-up break up for cleaner code separation, discrete tests, and, easier and iterative collaboration design issue requires more design work and discussion (i.e. mockups and sketches) enhancement explains that the issue is to improve upon one of our existing features help wanted requires help by anyone willing to contribute

Comments

@ryzokuken
Copy link
Member

ryzokuken commented Oct 24, 2017

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

  • 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
  • Fixing the navigation bar

Deprecated --- Replace with modern alternatives

  • Refactor all existing wells into cards.
  • Refactor all existing panels into cards.
  • Refactor all existing thumbnails into cards.
  • 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.
@ryzokuken ryzokuken self-assigned this Oct 24, 2017
@ryzokuken ryzokuken added break-me-up break up for cleaner code separation, discrete tests, and, easier and iterative collaboration design issue requires more design work and discussion (i.e. mockups and sketches) enhancement explains that the issue is to improve upon one of our existing features help wanted requires help by anyone willing to contribute labels Oct 24, 2017
@jywarren
Copy link
Member

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
Copy link
Member

I added a few items to the checklist.

@ryzokuken
Copy link
Member Author

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

@jywarren
Copy link
Member

jywarren commented Oct 26, 2017 via email

@sagarpreet-chadha
Copy link
Contributor

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

@ryzokuken
Copy link
Member Author

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

@ViditChitkara
Copy link
Member

@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
Copy link
Member

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

@ryzokuken
Copy link
Member Author

ryzokuken commented Nov 6, 2017 via email

@jywarren
Copy link
Member

jywarren commented Dec 7, 2017

Complete!!! Now to 4.2...

@jywarren jywarren closed this as completed Dec 7, 2017
@jywarren
Copy link
Member

jywarren commented Dec 7, 2017

Oops! Wrong one! I meant rails 4!

@jywarren jywarren reopened this Dec 7, 2017
@jywarren jywarren added this to the UI improvements milestone Jan 17, 2018
@SidharthBansal
Copy link
Member

SidharthBansal commented Jun 22, 2018

@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
Copy link
Member Author

@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
Copy link
Member

SidharthBansal commented Jun 29, 2018

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
Copy link
Member Author

@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
Copy link
Member

SidharthBansal commented Jun 29, 2018

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

@ryzokuken
Copy link
Member Author

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

@SidharthBansal
Copy link
Member

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

@SidharthBansal
Copy link
Member

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

@jywarren
Copy link
Member

jywarren commented Jul 6, 2018

ooh, that sounds great!

@SidharthBansal
Copy link
Member

I have created the bootstrap-4 branch

@jywarren
Copy link
Member

jywarren commented Jul 6, 2018 via email

@SidharthBansal
Copy link
Member

SidharthBansal commented Jul 9, 2018

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
Copy link
Member

jywarren commented Jul 9, 2018 via email

@SidharthBansal
Copy link
Member

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

@jywarren
Copy link
Member

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

@SidharthBansal
Copy link
Member

I will be working on the spam moderation system.

@jywarren
Copy link
Member

jywarren commented Jul 24, 2018 via email

@jywarren
Copy link
Member

jywarren commented Nov 7, 2018

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
Copy link
Member

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
Copy link
Member

jywarren commented Nov 7, 2018 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
break-me-up break up for cleaner code separation, discrete tests, and, easier and iterative collaboration design issue requires more design work and discussion (i.e. mockups and sketches) enhancement explains that the issue is to improve upon one of our existing features help wanted requires help by anyone willing to contribute
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants