Responsive view #2750

thehowl · 2017-10-20T15:23:13Z

Other pages will come in future PRs. This PR closes #35.

First of all, the meta viewport has been set to one, the basic for any responsive website.
Navbar has been simplified and refactored. It has some slightly different behaviour and look, but users without OCD should not see a big difference.
Main reason for the change is to have a better system where it was easier to plug in a stackable navbar, alongside a hamburger button for expanding or collapsing the navbar.
Dashboard, issues, and explore have been curated to make sure they look good on mobile devices.

Screenshots

New navbar

Example of collapsed navbar (and dashboard)

Collapsing/expanding demo

Issues page (I ask you to disregard the issue titles I use for testing 😉)

Explore

codecov-io · 2017-10-20T15:31:41Z

Codecov Report

Merging #2750 into master will decrease coverage by 0.15%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #2750      +/-   ##
==========================================
- Coverage   34.89%   34.73%   -0.16%     
==========================================
  Files         277      277              
  Lines       40177    40177              
==========================================
- Hits        14019    13955      -64     
- Misses      24099    24178      +79     
+ Partials     2059     2044      -15

Impacted Files	Coverage Δ
modules/lfs/content_store.go	`7.81% <0%> (-35.94%)`	⬇️
modules/lfs/server.go	`20.68% <0%> (-14.33%)`	⬇️
models/lfs.go	`26.08% <0%> (-2.18%)`	⬇️
models/repo_list.go	`67.18% <0%> (+1.56%)`	⬆️
models/repo_indexer.go	`53.88% <0%> (+1.94%)`	⬆️
modules/indexer/repo.go	`67.82% <0%> (+6.95%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2f8c65c...207337e. Read the comment docs.

thehowl · 2017-10-20T19:10:26Z

Need some help here: at the moment forms are organised to be like this:

This does not really cope well with mobile devices, because this is what you get:

Would it be OK to replace these custom forms with Semantic UI's stock forms, having the label of the field sitting on top of the field instead of on the side?

hellasteph · 2017-10-20T19:38:04Z

I use 2FA when logging into Gitea, any plans to support that in the initial responsive version?

thehowl · 2017-10-20T19:41:26Z

That should be included in the task of getting forms to look good (which is what I need to do for the login anyway). In any case, 100% of Gitea's functionality after this PR will be on mobile, too: the only difference is that some pages will look weird for the moment (and to not make this PR even bigger)

hellasteph · 2017-10-20T19:45:17Z

I don't mind QA-ing if that will help you along. I greatly appreciate the work done so far!

lafriks · 2017-10-21T06:10:50Z

In mobile version input buttons must be full width and labels aligned to left

pgaskin · 2017-10-21T13:01:45Z

I will also test the changes too.

pgaskin · 2017-10-21T19:02:17Z

Great job so far.

Some things to work on:

The create menu is hard to use on mobile.
The initialize repository checkbox in the /repo/create is positioned far right off the page
The user/orgs/repo explore page's nav does not need to stack, it fits fine without, and it looks ugly when stacked
The file list in the repo is a bit too thick (maybe remove the last commit name text)

thehowl · 2017-10-21T20:32:46Z

Hey there! Thanks for your feedback.

What do you mean by hard to use?
Fixed
Fixed, done also for the login page.
I'm not sure about this last one - unfortunately there is no pretty way to "hide" a column on tables only for mobile devices on semantic UI (due to its use of !importants). Perhaps a future PR could try to do that.

Also, I've pretty much implemented everything I previously said I would do in the first post and went ahead and removed the [WIP] tag. Reviews and further feedback welcome!

lunny · 2017-10-22T02:36:27Z

@thehowl CI failed.

pgaskin · 2017-10-22T21:20:16Z

By hard to use, I mean it sometimes disappears too soon (but I don't think you can do something about this issue).

thehowl · 2017-10-24T13:54:10Z

Seems like last time the pgsql test randomly failed. Merged master and it works now ¯\_(ツ)_/¯ @lunny ready for review.

lunny · 2017-10-26T01:52:20Z

Please rebase

thehowl · 2017-10-26T18:16:35Z

done

jonasfranz · 2017-10-30T14:30:06Z

There are some conflicts with master.

thehowl · 2017-11-04T18:43:49Z

Ready for review... again

lunny · 2017-11-05T13:16:18Z

When covert to an organization role on dashboard, UI broke.

lunny · 2017-11-05T13:19:47Z

explore repository UI should be improved.

thehowl · 2017-11-11T16:22:38Z

@lunny addressed your issues and rebased ✅ sorry for taking long

lunny · 2017-11-13T07:32:20Z

@thehowl Good job!!! Maybe this PR could be merged before v1.4 released. But some issues below:

thehowl · 2017-11-16T14:38:52Z

@lunny done & rebased

lunny · 2017-11-21T01:05:38Z

Repository home needs some improvement, otherwise LGTM

lunny · 2017-12-04T02:47:50Z

@thehowl need rebase

thehowl · 2017-12-29T16:05:39Z

Sorry for the delay. Can we still get this in by 1.4.0 (in which case I'll proceed to the rebasing now) or since we're in the feature freeze already will this have to wait til 1.5?

lunny · 2017-12-30T04:21:23Z

@thehowl I would like this is in v1.4. Feature freeze means new feature coming PR will be in v1.5, not mean the PR which has been marked as v1.4.

The class was necessary, because this way the dropdown doesn't assume the contents of the selected item.

minor improvements - make login/sign up in navbar stackable - make navbar in explore and sign in not stackable Change selected class in TestPullCompare Fix typo that happened when rebasing fix dashboard on org view improve profile UI Use clearing on file diff to fix broken UI caused by floating elements remove unresolved merge conflict, and | Sanitize Fix repo home not loading

thehowl · 2017-12-30T11:24:43Z

And the tests are green ☑️

If anyone reviews the code, make sure to append ?w=1 to the URL of the diff so you can ignore the whitespace changes

lafriks · 2017-12-30T19:36:53Z

LGTM

thehowl mentioned this pull request Oct 20, 2017

Responsive UI #35

Closed

tboerger added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Oct 20, 2017

lunny added this to the 1.x.x milestone Oct 21, 2017

lunny added the topic/ui Change the appearance of the Gitea UI label Oct 21, 2017

thehowl changed the title ~~[WIP] Responsive view~~ Responsive view Oct 21, 2017

tboerger added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Nov 21, 2017

lunny removed this from the 1.x.x milestone Nov 21, 2017

lunny added this to the 1.4.0 milestone Nov 21, 2017

thehowl added 17 commits December 30, 2017 11:23

Viewport meta tag

adb0aeb

responsive: dashboard

36ba625

responsive: issues page

432d3c3

responsive: Explore page

776da07

responsive: navbar, and some navbar css refactoring

a324d62

responsive: button for collapsing navbar in mobile view

b6aef3a

Mark the hamburger button as active when pressed

a6d3f6f

better homepage for responsive views

7e34dd1

Bring back jump class in navbar

7f7dc84

The class was necessary, because this way the dropdown doesn't assume the contents of the selected item.

make repository homes responsive

ba368a2

Make file view page responsive

554f316

Make forms look good on responsive views

e3f76b4

make commits and commit diff view responsive

9a56522

issues and PRs

bef8276

responsive wiki

6a2d350

Don't place auto-init far off the page

d3a25c5

appleboy approved these changes Dec 30, 2017

View reviewed changes

tboerger added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Dec 30, 2017

lunny merged commit 3d3faa2 into go-gitea:master Dec 31, 2017

daviian mentioned this pull request Apr 26, 2018

Element alignments in layout broken #3851

Closed

7 tasks

JamesTheAwesomeDude mentioned this pull request Sep 21, 2018

External markup renderer [$15] #374

Closed

go-gitea locked and limited conversation to collaborators Nov 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive view #2750

Responsive view #2750

thehowl commented Oct 20, 2017 •

edited

codecov-io commented Oct 20, 2017 •

edited

thehowl commented Oct 20, 2017 •

edited

hellasteph commented Oct 20, 2017

thehowl commented Oct 20, 2017 •

edited

hellasteph commented Oct 20, 2017

lafriks commented Oct 21, 2017

pgaskin commented Oct 21, 2017

pgaskin commented Oct 21, 2017 •

edited

thehowl commented Oct 21, 2017

lunny commented Oct 22, 2017

pgaskin commented Oct 22, 2017

thehowl commented Oct 24, 2017

lunny commented Oct 26, 2017

thehowl commented Oct 26, 2017

jonasfranz commented Oct 30, 2017

thehowl commented Nov 4, 2017

lunny commented Nov 5, 2017

lunny commented Nov 5, 2017

thehowl commented Nov 11, 2017

lunny commented Nov 13, 2017

thehowl commented Nov 16, 2017

lunny commented Nov 21, 2017

lunny commented Dec 4, 2017

thehowl commented Dec 29, 2017

lunny commented Dec 30, 2017

thehowl commented Dec 30, 2017

lafriks commented Dec 30, 2017

Responsive view #2750

Responsive view #2750

Conversation

thehowl commented Oct 20, 2017 • edited

Screenshots

codecov-io commented Oct 20, 2017 • edited

Codecov Report

thehowl commented Oct 20, 2017 • edited

hellasteph commented Oct 20, 2017

thehowl commented Oct 20, 2017 • edited

hellasteph commented Oct 20, 2017

lafriks commented Oct 21, 2017

pgaskin commented Oct 21, 2017

pgaskin commented Oct 21, 2017 • edited

thehowl commented Oct 21, 2017

lunny commented Oct 22, 2017

pgaskin commented Oct 22, 2017

thehowl commented Oct 24, 2017

lunny commented Oct 26, 2017

thehowl commented Oct 26, 2017

jonasfranz commented Oct 30, 2017

thehowl commented Nov 4, 2017

lunny commented Nov 5, 2017

lunny commented Nov 5, 2017

thehowl commented Nov 11, 2017

lunny commented Nov 13, 2017

thehowl commented Nov 16, 2017

lunny commented Nov 21, 2017

lunny commented Dec 4, 2017

thehowl commented Dec 29, 2017

lunny commented Dec 30, 2017

thehowl commented Dec 30, 2017

lafriks commented Dec 30, 2017

thehowl commented Oct 20, 2017 •

edited

codecov-io commented Oct 20, 2017 •

edited

thehowl commented Oct 20, 2017 •

edited

thehowl commented Oct 20, 2017 •

edited

pgaskin commented Oct 21, 2017 •

edited