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

Port site to Bootstrap 5 from 4 #316

Open
samswag opened this issue Jul 2, 2020 · 40 comments · Fixed by #347
Open

Port site to Bootstrap 5 from 4 #316

samswag opened this issue Jul 2, 2020 · 40 comments · Fixed by #347

Comments

@samswag
Copy link
Member

samswag commented Jul 2, 2020

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

Since the latest Bootstrap is a major rewrite from 4, some visual changes need to be further modified.
See Migration on the official bootstrap website.

@himanshujaidka
Copy link

So how we could migrate?

@samswag
Copy link
Member Author

samswag commented Jul 5, 2020

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

ok I got it , I am working on this

@AdithyaKrishnaK
Copy link
Contributor

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

srevinsaju commented Nov 1, 2020

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

@AdithyaKrishnaK please follow the registration on Freenode. :)

@srevinsaju
Copy link
Member

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

@S-kus
Copy link
Contributor

S-kus commented Jan 1, 2022

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

@srevinsaju
Copy link
Member

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

S-kus commented Jan 6, 2022

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

@S-kus
Copy link
Contributor

S-kus commented Jan 6, 2022

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

quozl commented Jan 6, 2022

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

S-kus commented Jan 6, 2022

Thank you @quozl. I got it.

@S-kus
Copy link
Contributor

S-kus commented Jan 8, 2022

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,
Screenshot from 2022-01-08 21-12-38
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
Screenshot from 2022-01-08 21-14-08
ow)
Screenshot from 2022-01-08 21-14-11

Could you please guide me?

@srevinsaju
Copy link
Member

srevinsaju commented Jan 8, 2022

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

S-kus commented Jan 8, 2022

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

quozl commented Jan 8, 2022

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

S-kus commented Jan 10, 2022

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

quozl commented Jan 10, 2022

Thank you!

@S-kus
Copy link
Contributor

S-kus commented Jan 10, 2022

@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?
Screenshot from 2022-01-11 00-51-27

As the icon we are using currently is not responsive, like these:
Screenshot from 2022-01-11 00-51-47
Screenshot from 2022-01-11 00-51-55
Screenshot from 2022-01-11 00-52-08
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
Copy link
Contributor

quozl commented Jan 10, 2022

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

@S-kus
Copy link
Contributor

S-kus commented Jan 11, 2022

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

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

quozl commented Jan 11, 2022

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

S-kus commented Jan 12, 2022

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

@quozl
Copy link
Contributor

quozl commented Jan 12, 2022

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

@quozl
Copy link
Contributor

quozl commented Jan 26, 2022

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

@quozl quozl reopened this Jan 26, 2022
@chimosky chimosky changed the title Port site to Bootstrap 4 from 3 Port site to Bootstrap 5 from 4 Feb 2, 2022
@MAYANKpandey14
Copy link

Is somebody working on this ?

@chimosky
Copy link
Member

Is somebody working on this ?

There's currently no open PR for this issue.

@hackwhiz-8
Copy link

is anyone working on this issue ?

@chimosky
Copy link
Member

is anyone working on this issue ?

I haven't seen any PRs reference it so I guess no one is.

@hackwhiz-8
Copy link

okay sir .

@pikurasa
Copy link
Contributor

I believe instructions for this are here: https://getbootstrap.com/docs/5.0/migration/

@harinallaparaju
Copy link

I'm interested to work on this.

@haroon10725
Copy link
Contributor

@pikurasa I tried to migrate from version 4 to 5, but css got disturbed. I think we should only do this when we are sure that we have to continue with Jekyll only. Otherwise I think there is no point to migrating it to version 5.

@quozl
Copy link
Contributor

quozl commented Nov 8, 2024

Yes, exactly. Careful procedure will be needed to separate the customisations from the CSS. One method would be to start at the earliest git commit and then rewrite the following commits, if they touch the CSS, so that they use a custom CSS. Another method may be to use a software tool to extract the customisations and place them in another file.

It's a big job, but the outcome should be easier to maintain.

@pikurasa
Copy link
Contributor

pikurasa commented Nov 8, 2024

And another method might be to kind of start over with a recent, well-maintained theme, and port whatever customizations we need in one-by-one, leaving whatever we don't need out.

However, that might also end up to be time-consuming.

I agree that we need to really think of what we want to do, but obviously we're learning some valuable lessons in how to keep the site maintainable in the future (i.e. what not to do).

@haroon10725
Copy link
Contributor

haroon10725 commented Nov 9, 2024

I think we should decide on our long-term goal: either continue using the same website and make the suggested changes by @quozl , or start working on a new website and incorporate only the necessary changes from the old one, as suggested by @pikurasa .

We can also think whether to continue with Jekyll only. There are also many new frameworks for website building.

We should decide it quickly and start working on that one also.

@quozl
Copy link
Contributor

quozl commented Nov 9, 2024 via email

@haroon10725
Copy link
Contributor

Okay @quozl

@pikurasa
Copy link
Contributor

pikurasa commented Nov 9, 2024

@haroon10725 (and any other contributors reading this): for this particular project, let's coordinate on https://matrix.to/#/#sugarlabs-web:matrix.org, as well as any video meetings we can schedule together, to come up with a game plan.

Since this would be a bigger project, I think it makes sense to discuss and plan a course of action.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.