Port site to Bootstrap 5 from 4

[samswag]

Some of the UI elements are broken and to better fix it, it will be great to migrate the bootstrap from the old version to the newest.

Since the lastest bootstrap is a major rewrite from 3, there might be some visual changes that need to be further modified.
See Migration on the official bootstrap website.

[himanshujaidka]

So how we could migrate?

[samswag]

As explained here via the official bootstrap website, https://getbootstrap.com/docs/4.0/migration/ since the 4+ is a significant rewrite from 3.

One major issue I have seen is the effect it has on the navigation bar because some elements changed. And to make it much easier and faster, I recommend using BootstrapCND instead of downloading it.

[himanshujaidka]

ok I got it , I am working on this

[AdithyaKrishnaK]

I would like to work on this. But I was wondering how to remove the existing bootstrap files and also I am having trouble connecting to #sugar IRC channel(says Cannot send to nick/channel).

[srevinsaju]

I am having trouble connecting to #sugar IRC channel(says Cannot send to nick/channel).

@AdithyaKrishnaK please follow the registration on Freenode. :)

[srevinsaju]

Bootstrap v5.0 has been released. So probably, we would now aim to migrate bootstrap3 website to bootstrap5 now

[S-kus]

I would like to work on this. @srevinsaju Are you planning to migrate it?

[srevinsaju]

I would like to work on this
Sure, you don't need to ask.

@srevinsaju Are you planning to migrate it?

No. My comment was to mention that a migration to Bootstrap 5 would be better, since BS5 was released then.

[S-kus]

okay, @srevinsaju. I have started working on it.

[S-kus]

@srevinsaju I am planning to use the documentation of bootstrap firstly migration from v3 to v4 then v4 to v5..
This will change a few files. Could you confirm this process is right? and should I commit after migrating all the things to v5 or should I do a file vise commit?

[quozl]

Choose a method that shows what you have done. In your commit message, briefly explain what you did, so that your reviewers can review both the process you used and the result. If it were me doing it (and I'm not particularly good at web development), I'd make a branch for the v3 to v4 port, complete it in a series of commits, testing how the site looks at each commit, then make another branch for the v4 to v5 and do the same. Then I'd rewrite any commits or commit messages to make it clear how I did it, and make a pull request.

[S-kus]

Thank you @quozl. I got it.

[S-kus]

Hello @quozl, I am migrating from bootstrap3 to v4 firstly, Doing this process according to document their main update is related to flex classes, probably because of which two main issues I am having is everything is shifted a bit left and the second one is during mobile view "navh2" from "airspace.css" creating problems with toggler (I am using bootstrap toggler [should I use different toggler than bootstrap one? ])( what I find is to solve this I can change some CSS in "airspace.css" file). Can I do such changes?
(I have added bootstrapv4 CSS and js file in old bootstrap3 place

for 1st issue,

s)
For the 2nd issue:
The problem is when it's small in size (I will change toggler color, actually haven't set it's color till n

ow)

Could you please guide me?

[srevinsaju]

@S-kus you are allowed to make changes to airspace.css, but try to avoid a different toggler, as it might add more complexity. Just make sure that you explain each step in your commit message, and it should be good to go.

By porting the site from Bootstrap 3 to bootstrap 4/5, we are trying to keep:

• Minimum changes on the code, as well as on the visual design
• Not add any more new libraries to it, or change any other existing library to a different one, other than upgrading the existing frameworks to the newer versions
• Make sure the site is as functional, as it was, after the port too.

[S-kus]

okay, Thank you @srevinsaju I will follow it. Could you please guide me for the 1st left-shifted problem in this problem, like how can it be solved?

[quozl]

Guide you? If I knew how to do this, I'd do it myself. It would be way more efficient and effective than teaching anyone. Thanks for working on it. You may need to lean on Bootstrap and HTML5 resources.

It is one of the failings of our web site that it needs such skill to maintain. It is very tempting to replace it with WordPress. As Srevin says; we need minimal change, we don't need more libraries (or CSS files if we can help it), and we need it to keep working. We don't need to make the site any more complicated, in any way.

We shouldn't consider the site to be a product of Sugar Labs. Our software products are Music Blocks, Turtle Blocks, Sugarizer, and Sugar.

[S-kus]

Okay, Thank you @srevinsaju @quozl. Things are almost done, I just have to fix the dropdown buttons, footer icons, and some text alignment. I will create the pull request soon with each step in my commit message.

[quozl]

Thank you!

[S-kus]

@quozl @srevinsaju Can we use the shown below one grey toggle icon for phone view i.e. less than 768px too with just different (earlier purple) background?

As the icon we are using currently is not responsive, like these:



I am still trying to fix it, but I think the grey one looks better till then. I will set it according to the phone view with a good UI.
Other than this everything is set.

[quozl]

If you mean the hamburger button, I don't have any trouble with the ones you showed above.

[S-kus]

@quozl @srevinsaju I Ported the site to Bootstrap 4 from 3, As shown in this Video.
If any changes are required, I will fix them and then I will raise the pr with proper commits about code changes.

[srevinsaju]

Video looks fine, you can go ahead with the PR, we can deal with any additional changes in the code review. Thank you for working on this.

[quozl]

Video looks fine. I agree, go ahead. But let's concentrate on the code review without any content or unwelcome appearance changes. In reviewing the video, I saw so much out of date content, which is not your fault and we should not stall code review because of it.

[S-kus]

Okay, @quozl and @srevinsaju. I created the pull request. Please review it.

[quozl]

@himanshujaidka, @AdithyaKrishnaK, thanks for your interest in this issue, please review #347 and give your comments.

[quozl]

• _layouts/base.html is using a CDN instead of our own copy of the file.

[MAYANKpandey14]

Is somebody working on this ?

[chimosky]

Is somebody working on this ?

There's currently no open PR for this issue.