Gitea: Responsive UI

[tboerger]

We should provide a responsive UI on best afford. The best way should be a separate view like it's done on gitHub, but on the short term we could simply provide repsonsive elements to give a good view also on mobile devices.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[jeppech]

If a new web framework is to be considered, I'd like to suggest Bulma. It's based on flexbox, and easy to work with.

[joubertredrat]

I used Bulma too and liked too, but I liked current design too, We can consider responsive design, but I think that can be on future.

[tboerger]

I think we can stay with the current framework, we just need to enable responsive definitions.

[bkcsoft]

Semantic is _really_ easy to make responsive, so no need to switch frameworks.
Personally I'd just update one view at a time to make it responsive, instead of copying and rewriting the entire site. What way we also get "small" fixes that can easily be reviewed :slightly_smiling_face:

[lunny]

Change UI is a heavily work. I prefer @tboerger's idea. And for mobile user, I think make an android and an ios project to satisfy them. We can do this work base on some open source github clients's work.

[jhasse]

The best way should be a separate view like it's done on gitHub, but on the short term we could simply provide repsonsive elements to give a good view also on mobile devices.

I actually think that responsive designs are better than separate mobile views. I _hate_ that I can't do everything with the mobile view on GitHub.

[bkcsoft]

I agree with @jhasse

[YamiOdymel]

I have experience with Semantic UI before. I tried to make everything stackable, and I also adjust some of the offsets. But the final result is not good.

There're too many tricky hacks and the !important flags, floating elements in the current styles. The layout were all designed for the desktop (_without thinking about to support the mobile in the future_).

There're not much elements, modules can be used in Bulma currently. Semantic UI has a lot of the components, modules already. But there's no hamburger menu in Semantic UI, we will need a sidebar for the nav menu.

I would suggest to rebuild another layout with Semantic UI and make it mobile-friendly in the future.

[bkcsoft]

Well, if it is to be rewritten entirely, why not replace it with bootstrap? And themes while we're at it :trollface:

[lunny]

@bkcsoft the old version of Gogs is bootstrap. then bootstrap -> semantic UI -> bootstrap ...

[bkcsoft]

well, if it doesn't work you switch ;)

[joubertredrat]

I think that is bad idea to change from Semantic UI to bootstrap, maybe Bulma if want to write new interface to have visual different from Gogs and support responsive, but I think that is good idea to make this more ahead

[YamiOdymel]

I'll suggest to stay with Semantic UI. There're many modules can be used in Semantic UI already, for example the Dropdown (_which is used in Gitea for creating the repos_).

But Bootstrap doesn't come with the modules, you would have to search for the modules with Google. And some of the module styles were designed for the Bootstrap original style.

Which means if you changed the theme of Bootstrap, the module styles would still stay with the original Bootstrap theme. (ex: Bootstrap Toggle)

[ptman]

The current problem is that the UI isn't terribly good on mobile. This is not a democracy where everyone gets a say in how it cannot be solved. If somebody contributes a fix that works better than the current on both desktop and mobile then it can be merged. No matter if it's using bootstrap or semantic or something else. If you want Semantic to win, contribute a better solution using Semantic.

[YamiOdymel]

@ptman Even if it's a totally-different-design can also be merged?

[ptman]

@YamiOdymel not up to me, up to the maintainers

[joubertredrat]

Little conception question, is really necessary to set layout as responsive? I talked with all my friends and community that I'm in and no one talked that use smartphone for access code, issues or another information on github or gitlab.

I think that is better to make poll about this feature before implement at now

[jhasse]

If you don't use your smartphone for accessing Gitea, why do you care at all if this was implemented or not?

[joubertredrat]

@jhasse but this is the point, how to implement feature that will be not used? I'm not talking that don't be need to be implemented, the impression I'm having is that this is being treated as a priority.

Because this I'm making this question, is really necessary and is priority? Let's make now. Isn't? Let's make this on future.

[bkcsoft]

My "vote" goes to _not_ changing the design unless it's absolutely necessary 🙂

[evantbyrne]

In my opinion, usage of !important in the CSS is a lesser evil than having a broken mobile layout. Would the current maintainers be opposed to a PR with potentially heavy usage of !important?

[tboerger]

I'm using mobile views for such things heavily, we must provide responsive designs. I personally prefer bootstrap, that's what I know best. Semantic ui still feels strange to me. I don't really care what we use in the end as long as it works on multiple devices

[andreynering]

+1 for Bootstrap 4

[lunny]

switch to bootstrap 4, maybe we need change a lot. So our front-end framework will be vue.js + bootstrap4?

[bkcsoft]

But Bootstrap doesn't come with the modules, you would have to search for the modules with Google. And some of the module styles were designed for the Bootstrap original style.

@YamiOdymel There are _loads_ of modules for Bootstrap, and most of them follow the theme you give it.
Example for Dropdowns: https://silviomoreto.github.io/bootstrap-select/examples/

[tboerger]

And I can't remember any exotic module we are using

[pgaskin]

1253 improves the explore page for mobile.

[lunny]

This will be a long term issue. So I move it from v1.2.0 to v1.x.x.

[sondr3]

I've been toying around with an idea of having a go at rewriting the UI for Gitea in Bootstrap or Bulma or something similar. If anyone wants to talk about it or collaborate or something drop me a line, I think it'd be a fun challenge.

[ghost]

We are heavy into development of SPAs using vue and bulma. So far it has worked out awesomely for us.
As for specialized design elements like dropdowns, we get around them by having either modals or list of tags based on selection from the html dropdowns.
And wonderfully this has worked wonders on mobile.

Anyways, I have been searching for documentation on APIs. I'm starting development on a separate PWA client. Care to join?

[jhasse]

We are heavy into development of SPAs

Is there an issue for this which I can downvote?

[bkcsoft]

Yeah, I second not writing this as a SPA. We could have real-time elements, but all core functionality preferably should work without JS enabled.

[ghost]

I am not asking the team to turn this into an SPA. That would be bad for the Open web in general.
But I rather would like to develop an independent SPA that could talk to gitea APIs.
And for that, having a good set of well-documented REST APIs would surely help a lot.

[lunny]

@exp10r3r https://try.gitea.io/swagger

[bang88]

Thanks for provide the swagger api documents. Are the api is stable for production use ?

Thank you

[sapk]

@bang88 It mostly follow github as reference for the api. I would say that it is stable and the most change made lately were adding new methods.

[bang88]

@sapk Thank you , I will check it out later

[lcges]

Hello.
Have any decisions about framework?
I have already worked on:
Bootstrap >> Semantic-UI >> Bulma
Now works on Foundation. I think the Foundation is the best designed web framework.

[lafriks]

I have used foundation few years ago in one project and somehow I did not like it, it was too much hassle to get things right. If changing I'm for Bulma+vuejs :)

[tboerger]

I don't think that we will change the used css framework at all, this framework works pretty well for responsive uis, it just needs to be done properly. We can integrate vuejs for some dynamic parts step by step.

[jonasfranz]

[thehowl]

Is anyone working on this? I'd like to take a stab and try to at the very least use Semantic's responsive features and make what I can stackable.

[hellasteph]

I just added $25 to the bounty. I would really love to have this as I work on my mobile device often. Thank you!

[thehowl]

In case you're following along on this: I published a draft of the changes I'm working on on #2750. Check it out and tell me if you'd like to see some changes, I'd really love feedback!

[lafriks]

@lunny can this be closed already?

[lunny]

@lafriks I just merged #2750. And I think yes this issue has been resolved by #2750 except you have other idea.

[lafriks]

@lunny that pull request implements only part of pages to be mobile but it's fine with me to close this, was just asking your opinion.