Responsive UI #20

Closed
opened 2025-11-02 03:04:16 -06:00 by GiteaMirror · 47 comments
Owner

Originally created by @tboerger on GitHub (Nov 3, 2016).

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.

Originally created by @tboerger on GitHub (Nov 3, 2016). 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. <bountysource-plugin> --- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/38916129-responsive-ui?utm_campaign=plugin&utm_content=tracker%2F47456670&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F47456670&utm_medium=issues&utm_source=github). </bountysource-plugin>
GiteaMirror added the topic/uitype/enhancement labels 2025-11-02 03:04:16 -06:00
Author
Owner

@jeppech commented on GitHub (Nov 3, 2016):

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.

@jeppech commented on GitHub (Nov 3, 2016): If a new web framework is to be considered, I'd like to suggest [Bulma](https://github.com/jgthms/bulma). It's based on flexbox, and easy to work with.
Author
Owner

@joubertredrat commented on GitHub (Nov 3, 2016):

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.

@joubertredrat commented on GitHub (Nov 3, 2016): 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.
Author
Owner

@tboerger commented on GitHub (Nov 3, 2016):

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

@tboerger commented on GitHub (Nov 3, 2016): I think we can stay with the current framework, we just need to enable responsive definitions.
Author
Owner

@bkcsoft commented on GitHub (Nov 3, 2016):

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 🙂

@bkcsoft commented on GitHub (Nov 3, 2016): 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:
Author
Owner

@lunny commented on GitHub (Nov 3, 2016):

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.

@lunny commented on GitHub (Nov 3, 2016): 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.
Author
Owner

@jhasse commented on GitHub (Nov 3, 2016):

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.

@jhasse commented on GitHub (Nov 3, 2016): > 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.
Author
Owner

@bkcsoft commented on GitHub (Nov 3, 2016):

I agree with @jhasse

@bkcsoft commented on GitHub (Nov 3, 2016): I agree with @jhasse
Author
Owner

@YamiOdymel commented on GitHub (Feb 13, 2017):

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.

screen shot 2017-02-14 at 12 20 00 am
screen shot 2017-02-13 at 11 58 30 pm
screen shot 2017-02-14 at 1 23 27 am
screen shot 2017-02-14 at 12 36 40 am
screen shot 2017-02-14 at 12 13 09 am

@YamiOdymel commented on GitHub (Feb 13, 2017): 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. ![screen shot 2017-02-14 at 12 20 00 am](https://cloud.githubusercontent.com/assets/7308718/22891843/97a02cb6-f24b-11e6-9110-79bab086c5e4.png) ![screen shot 2017-02-13 at 11 58 30 pm](https://cloud.githubusercontent.com/assets/7308718/22891857/a3540cda-f24b-11e6-97e8-c668c3c67566.png) ![screen shot 2017-02-14 at 1 23 27 am](https://cloud.githubusercontent.com/assets/7308718/22894523/3b16db8a-f254-11e6-9abd-44d0e7f534f2.png) ![screen shot 2017-02-14 at 12 36 40 am](https://cloud.githubusercontent.com/assets/7308718/22894961/c36c93c0-f255-11e6-89f9-1be089aa75ab.png) ![screen shot 2017-02-14 at 12 13 09 am](https://cloud.githubusercontent.com/assets/7308718/22894966/c7750cf4-f255-11e6-8270-68c334ff0cd0.png)
Author
Owner

@bkcsoft commented on GitHub (Feb 14, 2017):

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

@bkcsoft commented on GitHub (Feb 14, 2017): Well, if it is to be rewritten entirely, why not replace it with bootstrap? And themes while we're at it :trollface:
Author
Owner

@lunny commented on GitHub (Feb 15, 2017):

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

@lunny commented on GitHub (Feb 15, 2017): @bkcsoft the old version of Gogs is bootstrap. then `bootstrap -> semantic UI -> bootstrap` ...
Author
Owner

@bkcsoft commented on GitHub (Feb 15, 2017):

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

@bkcsoft commented on GitHub (Feb 15, 2017): well, if it doesn't work you switch ;)
Author
Owner

@joubertredrat commented on GitHub (Feb 15, 2017):

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

@joubertredrat commented on GitHub (Feb 15, 2017): I think that is bad idea to change from Semantic UI to bootstrap, maybe [Bulma](http://bulma.io/) 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
Author
Owner

@YamiOdymel commented on GitHub (Feb 15, 2017):

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).

screen shot 2017-02-15 at 7 46 01 pm

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)

screen shot 2017-02-15 at 7 50 04 pm

@YamiOdymel commented on GitHub (Feb 15, 2017): I'll suggest to stay with Semantic UI. There're many modules can be used in Semantic UI already, for example the [Dropdown](http://semantic-ui.com/modules/dropdown.html) (_which is used in Gitea for creating the repos_). ![screen shot 2017-02-15 at 7 46 01 pm](https://cloud.githubusercontent.com/assets/7308718/22973059/686a12a0-f3b7-11e6-999c-1d8dbe163b2f.png) 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](http://www.bootstraptoggle.com/)) ![screen shot 2017-02-15 at 7 50 04 pm](https://cloud.githubusercontent.com/assets/7308718/22973281/041dd600-f3b8-11e6-9529-3f745e2a2ef2.png)
Author
Owner

@ptman commented on GitHub (Feb 15, 2017):

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.

@ptman commented on GitHub (Feb 15, 2017): 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.
Author
Owner

@YamiOdymel commented on GitHub (Feb 15, 2017):

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

@YamiOdymel commented on GitHub (Feb 15, 2017): @ptman Even if it's a totally-different-design can also be merged?
Author
Owner

@ptman commented on GitHub (Feb 15, 2017):

@YamiOdymel not up to me, up to the maintainers

@ptman commented on GitHub (Feb 15, 2017): @YamiOdymel not up to me, up to the maintainers
Author
Owner

@joubertredrat commented on GitHub (Feb 15, 2017):

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

@joubertredrat commented on GitHub (Feb 15, 2017): 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
Author
Owner

@jhasse commented on GitHub (Feb 15, 2017):

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

@jhasse commented on GitHub (Feb 15, 2017): If you don't use your smartphone for accessing Gitea, why do you care at all if this was implemented or not?
Author
Owner

@joubertredrat commented on GitHub (Feb 15, 2017):

@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.

@joubertredrat commented on GitHub (Feb 15, 2017): @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.
Author
Owner

@bkcsoft commented on GitHub (Feb 22, 2017):

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

@bkcsoft commented on GitHub (Feb 22, 2017): My "vote" goes to _not_ changing the design unless it's absolutely necessary 🙂
Author
Owner

@evantbyrne commented on GitHub (Feb 25, 2017):

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?

@evantbyrne commented on GitHub (Feb 25, 2017): 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`?
Author
Owner

@tboerger commented on GitHub (Feb 26, 2017):

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

@tboerger commented on GitHub (Feb 26, 2017): 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
Author
Owner

@andreynering commented on GitHub (Feb 26, 2017):

+1 for Bootstrap 4

@andreynering commented on GitHub (Feb 26, 2017): +1 for Bootstrap 4
Author
Owner

@lunny commented on GitHub (Feb 27, 2017):

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

@lunny commented on GitHub (Feb 27, 2017): switch to bootstrap 4, maybe we need change a lot. So our front-end framework will be vue.js + bootstrap4?
Author
Owner

@bkcsoft commented on GitHub (Feb 27, 2017):

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/

@bkcsoft commented on GitHub (Feb 27, 2017): > 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/
Author
Owner

@tboerger commented on GitHub (Feb 27, 2017):

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

@tboerger commented on GitHub (Feb 27, 2017): And I can't remember any exotic module we are using
Author
Owner

@pgaskin commented on GitHub (Mar 14, 2017):

#1253 improves the explore page for mobile.

@pgaskin commented on GitHub (Mar 14, 2017): #1253 improves the explore page for mobile.
Author
Owner

@lunny commented on GitHub (Apr 6, 2017):

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

@lunny commented on GitHub (Apr 6, 2017): This will be a long term issue. So I move it from v1.2.0 to v1.x.x.
Author
Owner

@sondr3 commented on GitHub (May 15, 2017):

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.

@sondr3 commented on GitHub (May 15, 2017): 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.
Author
Owner

@ghost commented on GitHub (Jun 2, 2017):

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?

@ghost commented on GitHub (Jun 2, 2017): 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?
Author
Owner

@jhasse commented on GitHub (Jun 6, 2017):

We are heavy into development of SPAs

Is there an issue for this which I can downvote?

@jhasse commented on GitHub (Jun 6, 2017): > We are heavy into development of SPAs Is there an issue for this which I can downvote?
Author
Owner

@bkcsoft commented on GitHub (Jun 14, 2017):

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.

@bkcsoft commented on GitHub (Jun 14, 2017): 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.
Author
Owner

@ghost commented on GitHub (Jun 15, 2017):

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.

@ghost commented on GitHub (Jun 15, 2017): 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.
Author
Owner

@lunny commented on GitHub (Jun 16, 2017):

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

@lunny commented on GitHub (Jun 16, 2017): @exp10r3r https://try.gitea.io/swagger
Author
Owner

@BANG88 commented on GitHub (Jun 20, 2017):

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

Thank you

@BANG88 commented on GitHub (Jun 20, 2017): Thanks for provide the swagger api documents. Are the api is stable for production use ? Thank you
Author
Owner

@sapk commented on GitHub (Jun 20, 2017):

@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.

@sapk commented on GitHub (Jun 20, 2017): @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.
Author
Owner

@BANG88 commented on GitHub (Jun 20, 2017):

@sapk Thank you , I will check it out later

@BANG88 commented on GitHub (Jun 20, 2017): @sapk Thank you , I will check it out later
Author
Owner

@lcges commented on GitHub (Aug 31, 2017):

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.

@lcges commented on GitHub (Aug 31, 2017): 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.
Author
Owner

@lafriks commented on GitHub (Aug 31, 2017):

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 :)

@lafriks commented on GitHub (Aug 31, 2017): 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 :)
Author
Owner

@tboerger commented on GitHub (Sep 1, 2017):

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.

@tboerger commented on GitHub (Sep 1, 2017): 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.
Author
Owner

@jonasfranz commented on GitHub (Sep 15, 2017):

Bountysource

@jonasfranz commented on GitHub (Sep 15, 2017): [![Bountysource](https://api.bountysource.com/badge/issue?issue_id=38916129)](https://www.bountysource.com/issues/38916129-responsive-ui?utm_source=38916129&utm_medium=shield&utm_campaign=ISSUE_BADGE)
Author
Owner

@thehowl commented on GitHub (Oct 19, 2017):

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.

@thehowl commented on GitHub (Oct 19, 2017): 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.
Author
Owner

@hellasteph commented on GitHub (Oct 19, 2017):

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

@hellasteph commented on GitHub (Oct 19, 2017): I just added $25 to the bounty. I would really love to have this as I work on my mobile device often. Thank you!
Author
Owner

@thehowl commented on GitHub (Oct 20, 2017):

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!

@thehowl commented on GitHub (Oct 20, 2017): 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!
Author
Owner

@lafriks commented on GitHub (Dec 31, 2017):

@lunny can this be closed already?

@lafriks commented on GitHub (Dec 31, 2017): @lunny can this be closed already?
Author
Owner

@lunny commented on GitHub (Dec 31, 2017):

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

@lunny commented on GitHub (Dec 31, 2017): @lafriks I just merged #2750. And I think yes this issue has been resolved by #2750 except you have other idea.
Author
Owner

@lafriks commented on GitHub (Dec 31, 2017):

@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.

@lafriks commented on GitHub (Dec 31, 2017): @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.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#20