UI Update discussion

[techknowlogick]

Per discussion in #5932, and @kolaente's suggestion. I am opening this ticket so we can discuss future of Gitea UI

[sondr3]

I would love to see this happen as Gitea isn't very usable on mobile devices, but this would be a massive undertaking and one that I hope would not take away all the developers from maintaining and working on regular features for Gitea. 😃

[silverwind]

Focusing only on CSS now, I have two primary concerns:

1. semantic-ui is a dead end technology-wise. It does not embrace flexbox and I generally think it's doing to much on its own. I'd prefer to be in a bit more control, maybe just by adding some helper classes.

2. less is probably not needed. I think selector nesting is a bad because it leads to uselessly long selectors that are hard to search for in the source. With CSS supporting variables, I don't really see much use in having a preprocessor. I'd suggest converting to plain CSS.

[kolaente]

Dropping less in favour of native css variables would mean dropping support for some browsers, but I guess I'd be okay with that since most of the people using Gitea are devs anyways who usually are using up to date browsers.
A bigger problem for me would be to not be able to use things like darken($color) and being able to split the css in multiple files which would then be combined into one single css (I know native css can do that too... kind of)

A new design might also help to make it more clear Gitea is much different from Gogs because as of now, both share pretty much the same ui.

Framkework-wise, I'd throw bulma.io in the mix as that is something I've used in the past and found it pretty good. I takes the hassle out of most things while still allowing high custimization and therefore easy theming.

[tankerkiller125]

I think that giving Gitea its own unique UI is something that would certainly help show the difference between it and Gogs, At the same time I have to say that less or scss is probably something that should continue to exist in this project as some of their functionality is not available in CSS, framework wise I have no opinion that would benefit this discussion since I personally just use Bootstrap 4 for my projects (not something that should be used here)

[lafriks]

Bulma sounds good to me :) thought it means full UI rewrite sadly

[andrewbanchich]

I am definitely in favor of plain CSS and using standards like Flexbox and Grid over frameworks. Grid provides a lot of features that non-Grid frameworks cannot.

[lafriks]

@andrewbanchich Bulma is based on flexbox

[andrewbanchich]

Yes, but if it isn't based on Grid then it's still a framework that is using something in a way it wasn't meant for. First, grid frameworks used floats for layout, which was a workaround since floats weren't meant for any kind of layout. Now they are using Flexbox for the full 2D layout, but Flexbox is only meant for 1D layouts. Grid is meant for 2D layouts, and it can do things Flexbox cannot very easily, so I feel like we should just use the standard CSS Grid. In my opinion, there isn't much need for a grid framework anymore.

[lafriks]

Bulma is very lightweight and gives you quite nice looking style out of box, I don't think we have designer who could do us nice looking design for gitea here

[techknowlogick]

@lafriks I really liked @kolaente's design.

[silverwind]

A bigger problem for me would be to not be able to use things like darken($color)

Agree, I certainly need those as well and there is no clean CSS solution for color adjustments like this. I personally prefer SCSS over LESS, but for light usage, both should be about equal.

but if it isn't based on Grid then it's still a framework that is using something in a way it wasn't meant for

Grid is certainly an option, but are there any suitable frameworks based around it available?

[kolaente]

Here's a draft I played around with: (written in Bulma)

I'm not quite happy with it.

[lafriks]

@kolaente can you share it in some separate git repo somewhere? As I have been playing with bulma also and would be nice to work on this together