Settings page re-design

[Bauke]

Wanted to get started on changing the layout/appearance of the settings so it's not just an endless scrolling page and would like some feedback/suggestions on how we would approach this in the best possible way.

Currently all the styling is done manually. Which isn't a bad thing necessarily however it requires a lot more effort to get something to look good, especially on all devices. The alternative here being a CSS framework such as Bootstrap, Materialize, Bulma, the list goes on.

I've used the 3 listed before and understand them (for the most part). Which is why I suggest we pick one of these and then rebuild the settings page with it. It's just I don't know which one would be preferable so let me know!

[theCrius]

I'm used to bootstrap so I'd suggest to go with it. For the structure I was thinking at something like a classic left side menu with the various features listed (eventually grouped when they'll be enough) and the actual settings in the main part of the page.

Something like:

Tildes Extended ---------------------------- Feature 1 | Feature 2 | Feature 3 | Feature 4 | SETTINGS Feature 5 | Feature N|

[theCrius]

About rebuilding it, the only important thing is to keep the IDs of the various inputs and everything should work without need to touch the JS part.

The only exception will be the div with Id that display the warning message about CSP on firefox. We can change that easily so that is a proper bootstrap alert or something like that.

All in all, it shouldn't be something hard to do, at all.

If you want to begin with it @Bauke, create a branch out of the current develop branch and we can go from there.
I'll take care of the rebase with the extended_css branch that is still not merged back in develop. Hopefully git won't screw me over.

If you're not in a hurry, I plan to merge it tomorrow morning after giving @Tetracyclic a change to check the code.

[Bauke]

Sounds good, I know what you mean with the menu. As for installing Bootstrap (and Popper) I assume the way we'd want to do it is just installing it with npm and then including it in the gulpfile under scripts and styles, like jQuery and Marked.

[theCrius]

yep, you can see in the gulpfile.js where to add them for the js files, here: https://github.com/theCrius/tildes-extended/blob/master/gulpfile.js#L52

For the CSS I didn't set up a specified rule but it's not hard to figure out how to create a /css/vendors as well.

[theCrius]

I just merged extended_ccs back into develop.

As a general rule, every development branch should be a branch of develop.
Every hotfix a branch of master.

If you've issue with git branches and its bullshittery, leave it to me. Just follow these two rules above.

Develop should always be the unstable, more advanced version of the extension.
I'm thinking about starting using tags as well but there is no such hurry for now that we're just 3 people on a relative small extension. Once we hit the 1.0 I'll begin releasing with tags.