Upgrade to Bootstrap 4

[myfrom]

Did all the necessary changes to upgrade the web app to Bootstrap 4. As far as I tested, everything should work fine.

Fixes #200

[sushain97]

It looks like the build is failing? Also, this diff is massive! I think that the themes didn't previously require as much CSS to be present in this repo. I think it was downloaded during the build process. Is it possible for us to revert to that setup?

[myfrom]

I fixed the sass-lint issues

I think that the themes didn't previously require as much CSS to be present in this repo. I think it was downloaded during the build process.

Oh, yeah, I have actually missed that. In fact it looks like we don't need the themes CSS to be present in the repo at all, it gets downloaded anyway.
I thought it might be wise to remove the themes folder, which also was causing sass-lint to show a weird error. As it isn't really related to the PR, I didn't squash that commit but if you think I should, I can quickly fix that.

[sushain97]

I think the themes are required (not the full CSS) since they contained app-specific color overrides. Can you take a look at the old versions?

[sushain97]

Does BS4 not already come with an equivalent? I was under the impression that a lot of these utilities could be removed.

[myfrom]

I removed the unnecessary ones in latest push

[sushain97]

No need to squash commits. I'll do that on merge.

[myfrom]

Oh, I understand the themes now. So they are overwrites if we build specifically for a theme. I could revert them, the problem might be that I don't think that 3.x themes are compatible with Bootstrap 4 and the new 4.x themes have some new ones and some old ones are missing.

[sushain97]

The overrides are just for app-specific stuff though. They're not dependent on bs3 and if they are, it's only a couple lines to change?

[myfrom]

Yeah, but the set of themes for v3 isn't identical to the set for v4. E.g. theme called 'paper' no longer exists, I think it got replaced by 'materia' and I'm not sure if they have the same look. Also, there are a few new themes, which weren't there before. I'm not sure what to do with those.

I'll definitely revert the themes folder and do a bit more research. If there were just renames, I'll try to rename the overwrites where applicable and I think it would be good to open another issue to add overwrites for new themes where needed. How about that?

[sushain97]

Ohhh. Don't worry about old themes. For new themes, just add similar overrides. I'm pretty sure the overrides just copy over some colors.

[myfrom]

Ok, thanks! I'll do it tomorrow when I'm back from school.

Could you also have a look at the site, please? It should be good (excluding the themes) but there were subtle changes, mostly related to how Bootstrap handles spacing now. I don't think they're breaking changes and actually they might even be better for usability on mobile phones so I left them with defaults. It's a few pixels of a difference compared to current master.

[sushain97]

Took a look at the translator interface and it's pretty close! There are however a couple of mostly minor issues. I'll take a look at the other interfaces after this one is fixed :)

https://601-28576409-gh.circle-artifacts.com/0/home/circleci/project/build/index.eng.html?dir=arg-cat#translation

• random extra space after "Help us improve..."

• install notice always appears (some JS/CSS class mismatch)

• hovering over long language names cuts them off

• the disabled language gray is way too close to normal black

• clicking on a source language results in a weird orange bar flickering

• large vertical spacing between options (not a huge deal)

[myfrom]

The issues you mentioned, including themes should be fixed now.

[sushain97]

• I'm afraid we really need to decrease the vertical spacing here or maybe the size (see current version)

• This should be flipping to the left? Maybe some JS is mismatched?

• Navbar entries are missing? see beta.apertium.org

• Still a bit more vertical space than ideal here

• Would be nice if we could get this hover background back but it's not 100% necessary if Bootstrap doesn't support it anymore.

[myfrom]

Thank you for the additional time!

I have fixed the first two issues and also adjusted the vertical spacing on the checkboxes.
When it comes to the nav buttons, they could have the hover effect either by adding additional (non-Bootstrap) styles, tell me if I should add that.

But could you also guide me how to enable those beta changes on the local build? I can't get the navbar entries that you were talking about, even when building from master. Am I missing some special make command?

[JPJPJPOPOP]

@myfrom You can enable the navbar and more modes through the config.conf file.

[sushain97]

I recently left the beta config on another issue, the one about the 404 warning being misplaced.

[sushain97]

#329 specifically

[sushain97]

Don't worry about adding extra non-BS styles. If this is Bootstrap's new styling for the pill component, so be it.

[myfrom]

Fixed.

The styling of nav element has changed visibly in Bootstrap 4 - especially if you look at the top navigation (from beta) - but as per your previous comment, I left it unchanged.

[sushain97]

Some minor concerns before I think this is good for task approval. I'm not necessarily going to merge it yet because there are some more minor tweaks that I think it'll need but that can be another task (feel free to take it up).

1. Some overflow issues in destination language dropdown (does this happen in current version too?)

2. I can click on a disabled language in the destination language dropdown and it turns orange. Is it not properly disabled to prevent click events?

3. It should be possible to fix the float here so that the navbar is directly below the locale selector (see beta.apertium.org). I think this is just an artifact of the new styles that requires fixing rather than a new look.

[sushain97]

Oh no! An RTL locale (like Hebrew) is super messed up. Let me know if this would be really complicated to fix due to some dependency issues. Otherwise, it needs to be remedied.

[sushain97]

If it's pretty involved, we can leave it for another task/issue since I think you've done a fair bit of work on this already.

[myfrom]

Some overflow issues in destination language dropdown (does this happen in current version too?)

I haven't been able to test with this set of languages but if I put in there random text it overflows on live version too. I added text ellipsis in my edits.

I can click on a disabled language in the destination language dropdown and it turns orange. Is it not properly disabled to prevent click events?

I removed Bootstrap's dropdown-item from those items. Seems to work fine now without it and the class was causing a few style issues.

It should be possible to fix the float here

I changed it up a bit so it should be nicer now. I don't want to use floats here because of a few things related to layout that Bootstrap 4 changed so I manipulate bottom padding of the navbar depending on the size of the device. Should behave similarly to original but I can't guarantee that on every locale.
I can try to make it behave like Bootstrap 3 if you want.

On the RTL version, it should be fixable with a few additional styles. I think it shouldn't take too long. I'll start working on that.

[sushain97]

it overflows on live version too. I added text ellipsis in my edits.

It seems to wrap here which is better IMO:

I removed Bootstrap's dropdown-item from those items. Seems to work fine now without it and the class was causing a few style issues.

Sounds good!

I can try to make it behave like Bootstrap 3 if you want.

I wouldn't spend more than 15 minutes on it overall. Like I said, I just want the broad strokes to be resolved here.

On the RTL version, it should be fixable with a few additional styles. I think it shouldn't take too long. I'll start working on that.

Awesome!

[myfrom]

Oh, I just realised that it wraps. But now it also will shorten two long words that wouldn't fit in a line:

My Version

Live

[sushain97]

Ah, looks good!

[myfrom]

RTL should be fine now. There's a bug with language selection dropdowns but it's probably related to JavaScript, not the styles and it also appears on live version.

[sushain97]

I'm going to accept this task since I think you've done a great job with it. There are things that need to be cleaned up for a merge of this as v4 of the app. If you're interested, let me know and I can create a new task.

e.g. the alignment here

There are some other inconsistencies such as some extra stuff being enabled in mobile that doesn't fully work on mobile.

The one thing I do request is for the random double semicolon and a description of how you generated this bootstrap.css file so that it can be duplicated or something similar in the future.

[sushain97]

There's a bug with language selection dropdowns

Also, what is this bug you're referring to?

[myfrom]

Thank you!

I've used this tool to build the theme. I didn't think of exporting it as _variables.scss tho 😬 I'll reproduce it and share the file so it can be loaded onto the program to make updates easier in the future.

I was talking about a bug that makes all the languages go into one column in RTL locale:

That's a screenshot from current live version. PS: I've just noticed it appears only on smaller screen width.

[sushain97]

I've used this tool to build the theme. I didn't think of exporting it as _variables.scss tho 😬 I'll reproduce it and share the file so it can be loaded onto the program to make updates easier in the future.

Awesome, thanks!

That's a screenshot from current live version. PS: I've just noticed it appears only on smaller screen width.

Huh, nice find. Do you mind creating an issue?

[myfrom]

Here's the file:
apertium-variables-scss.zip
I packed it into a ZIP so it can be uploaded into GitHub.

And I opened an issue for that bug - it's #333

[sushain97]

@myfrom - awesome! lmk if you want me to make a task that involves cleaning up the rest of the details here.

[MaathavanJkr]

So what bit works are not finished?

[sushain97]

I honestly don't remember. You'd have to try it. If you don't see anything that doesn't match up with the current site, I can take a look.

[MaathavanJkr]

I honestly don't remember. You'd have to try it. If you don't see anything that doesn't match up with the current site, I can take a look.

I cant find any changes except size differents. May be im not familiar with it. Can you please take a look at it?
maathavanjkr.github.io/bs/

[MaathavanJkr]

@sushain97 Can you please. :)

[sushain97]

There are actually a bunch of minor things mentioned in this thread.

[MaathavanJkr]

@sushain97 After a analysis in this pull and testing, These are my output but still i cant find which isnt fixed yet. :(
https://maathavanjkr.github.io/bs/

random extra space after "Help us improve..."

fixed

install notice always appears (some JS/CSS class mismatch)

Fixed.

hovering over long language names cuts them off
the disabled language gray is way too close to normal black

FIxed.

clicking on a source language results in a weird orange bar flickering

Fixed.

large vertical spacing between options (not a huge deal)

Fixed.

I'm afraid we really need to decrease the vertical spacing here or maybe the size (see current version)

Fixed.

This should be flipping to the left? Maybe some JS is mismatched?

Fixed.

Some overflow issues in destination language dropdown (does this happen in current version too?)

Fixed.

I can click on a disabled language in the destination language dropdown and it turns orange. Is it not properly disabled to prevent click events?

Fixed.

It should be possible to fix the float here so that the navbar is directly below the locale selector (see beta.apertium.org). I think this is just an artifact of the new styles that requires fixing rather than a new look.

Fixed.

Oh no! An RTL locale (like Hebrew) is super messed up. Let me know if this would be really complicated to fix due to some dependency issues. Otherwise, it needs to be remedied.

Fixed.

Would be nice if we could get this hover background back but it's not 100% necessary if Bootstrap doesn't support it anymore.

Its talked not needed.