CSS refactoring (flexbox, animations, skin variants)

ether / etherpad-lite

Etherpad: A modern really-real-time collaborative document editor.

http://docs.etherpad.org/

Apache License 2.0

16.09k stars 2.8k forks source link

CSS refactoring (flexbox, animations, skin variants) #3744

Closed seballot closed 4 years ago

seballot commented 4 years ago

As we discuss earlier with @muxator and @JohnMcLear here is a pull request to improve the css code base

Main idea was to simplify the code, i.e. stop using absolute positioning lead by javascript, stop using table for positioning elements, and use flex box instead to make the design more responsive and auto adjustable

Note re the pull request

I made one big commit (the last one), sorry for that but it was hard to split it while developing (when changing the UI you constantly do back and forward). I hope that is okay. I made the commit message more detailed than usual
This pull request breaks the colibris skin. Another pull request will come to adjust colibris skin
Some plugins (especially the ones who used new element positioned, like table_of_content) will probably be broken. I will have a look to different plugins, @JohnMcLear your help would be very appreciated :)

muxator commented 4 years ago

Merged, many thanks for the good work! :rocket:

This is an awesome advancement in the quality of the frontend code.

muxator commented 4 years ago

Can I ask something personal?

I am not particularly fan of flat buttons with no borders. Would it be terribly difficult to have an options for having light borders on the formatting buttons?

It would be ok even if having a border just around the button groups, just not completely flat.

Is it possible?

seballot commented 4 years ago

Hi ! thanks for having reviewed the code so quickly, and for the nice and instructives comments. I did not thought of XSS :)

re farbastic and gritter, not sure we should submit those small changes, they are quite custom for etherpad, and not developed with the idea of being reused

re skin variant, yes I find it also quite fun. I think I will add it in etherpad.org when I will change the screenshots

re flat design, yes we could add a variant to enable or not flat design. The non flat design (=skeuomorphism design) could add small shadow on the editor, some border for the buttons etc.. Will think about it ! If you have some good examples of website with nice non flat design, you can give them ! Maybe github is one of those examples?

JohnMcLear commented 4 years ago

RE farbtastic and gritter, the point is more that we will need to update those packages periodically and when we do we don't want to lose your customizations..

JohnMcLear commented 4 years ago

@seballot Can we document a few things on new issues. -- Each line item warrants a new issue imho.

Gritter changes required
Farbtastic changes required
Basic step-by-step modernization of plugin guide (IE changes required to CSS classes etc). Maybe doing an example plugin update?
How to access the new theme creator thing :D

JohnMcLear commented 4 years ago

I reached out to gritter maintainer asking him if we can adopt that project.

muxator commented 4 years ago

I reached out to gritter maintainer asking him if we can adopt that project

I am not sure if we really need this. Have a look at the git history of gritter.js and your past self will probably agree. :smile:

It was copied in the repo in 2013 and modified a few times, last one in 2015. Does not feel like something we cared to maintain. And by now it's a very custom thing.

JohnMcLear commented 4 years ago

Well at a bare minimum we should mention that it's a modified version of an original project and that the technical debt is ours to maintain and we are unable to commit back.