[WIP] Switch to Bootstrap 4

[Thor77]

I'm not really sold on the new look, yet.
But I guess to keep up to date we should migrate to Bootstrap 4 anyways in the near future.
This PR is just here for an overview about the process and will be merged as soon as Bootstrap 4 is out of beta-status.

[djmattyg007]

Judging by your screenshot, it looks like there should be some margin-bottom added to the bottom of each section to separate each section a bit more nicely.

[Thor77]

Yeah, it definitely looks like. But I guess i'm just using the new grid/container-system the wrong way and have to fix that to get some space between those sections.

[Thor77]

Added some padding to the list-groups and replaced the deprecated page-header.
Looks a lot better now, imo.

[Thor77]

As Bootstrap 4 removed support for non-responsive usage (cite), we have to think about adding Bootstraps javascript stuff (which i'm not a big fan of, because it requires jQuery which bloats the site a lot) or find some other way to show the navbar-content on mobile as it's collapsed by default and there's no way (I'm aware of) to uncollapse it without this javascript-button.
As you dealt with mobile and bootstrap-stuff for this project before, what do you think @djmattyg007 ?

[djmattyg007]

I think you could just write a small amount of your own javascript to toggle a classname on an element which is used to hide or unhide the menu, then use CSS animations to make it slide up and down.

[djmattyg007]

I'll take a quick look today and see if I can come up with anything.

[djmattyg007]

I just had a glance over the migration document. They're breaking so many things unnecessarily :( it's not so bad for a small project like this, but where I work we have several huge projects that would take months to update.

[Thor77]

I think you could just write a small amount of your own javascript to toggle a classname on an element which is used to hide or unhide the menu, then use CSS animations to make it slide up and down.

That sounds like a good option, yeah. Just found an implementation of Bootstraps javascript-components without jQuery: bootstrap.native. Maybe we can just use that or at least parts from it to accomplish this.

I just had a glance over the migration document. They're breaking so many things unnecessarily :( it's not so bad for a small project like this, but where I work we have several huge projects that would take months to update.

Yeah, it's a really big mess. And I don't even think it looks a lot better, maybe even worse (not only the output but also the code required to build it).

[djmattyg007]

That sounds like a good option, yeah. Just found an implementation of Bootstraps javascript-components without jQuery: bootstrap.native. Maybe we can just use that or at least parts from it to accomplish this.

Cheers, I wasn't aware of bootstrap.native. I'll check it out.

Yeah, it's a really big mess. And I don't even think it looks a lot better, maybe even worse (not only the output but also the code required to build it).

The rationale for removing the .page-header class (for example) is ridiculous, because it just makes it more difficult to use for less technical users.

[djmattyg007]

I've pushed a commit to the bootstrap4 branch in my repository. I moved the navigation element outside of the main container element to ensure that the navigation bar filled the width of the viewport. I also added a button to toggle the navigation at mobile, and that's working as expected with vanilla javascript.

I've been meaning to ask, why do you have onclick attributes that scroll the page on each of the headers and list items?

[Thor77]

I've pushed a commit to the bootstrap4 branch in my repository.

Great, can you open a Pull Request for these changes? (I'm not sure if GitHub supports creating Pull Requests to branches other than master, though)

I've been meaning to ask, why do you have onclick attributes that scroll the page on each of the headers and list items?

Because I thought it would be nice to have the option to directly link to specific users/sections, especially in large lists with multiple virtual servers.

[djmattyg007]

Great, can you open a Pull Request for these changes? (I'm not sure if GitHub supports creating Pull Requests to branches other than master, though)

Sure, gimme a few minutes.

Because I thought it would be nice to have the option to directly link to specific users/sections, especially in large lists with multiple virtual servers.

You only need the id attribute to make that possible. The onclick attributes are unnecessary. If you want to make it easy to link to a particular heading, I would add a little anchor icon next to each heading and add onclick attributes to those.

[Thor77]

You only need the id attribute to make that possible. The onclick attributes are unnecessary.

Yeah, I'm aware of that but the user has to find/get the link some way and the onclick-event seemed like the best solution to me.

If you want to make it easy to link to a particular heading, I would add a little anchor icon next to each heading and add onclick attributes to those.

For headings that's a great idea, yeah. But how is the user supposed to find the link to a specific listitem?
I have to admit the listitem-onclicks create some problems on mobile, as it's not possible to view hints with them as they scroll behind the navbar as soon as you click an item to view the hint.

[djmattyg007]

Just generally the way they're implemented right now is a bit weird, even for headings. I'll tap/click on what I think is empty space and trigger the onclick handler because the tag fills almost the width of the viewport.

[Thor77]

Just generally the way they're implemented right now is a bit weird, even for headings. I'll tap/click on what I think is empty space and trigger the onclick handler because the tag fills almost the width of the viewport.

Yeah, not sure what I thought when implementing it this way...
Changed it in cd01eb4 to use normal hyperlinks instead, what do you think?

[djmattyg007]

Yeah, that definitely works better.

Yeah, not sure what I thought when implementing it this way...

You had good intentions 😄

[Thor77]

Argh, there are further breaking changes in Bootstrap 4.0.0-beta...
The worst change is probably the removal of proper badges on list-group-items: They now look like THIS /o\

[Thor77]

@djmattyg007 Can you take a look at the changes regarding Navbars?
It seems like the navbar is collapsed by default now:

If you want to submit a PR please do so against the bootstrap4-beta branch.

[djmattyg007]

I'll take a look this weekend. Thanks for the heads up.

[djmattyg007]

Life got in the way, but I am definitely looking at it today!

[Thor77]

@djmattyg007 No problem, taking care of other things in life is definitely more important than this side project :)