New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive view #2750

Merged
merged 17 commits into from Dec 31, 2017

Conversation

9 participants
@thehowl
Member

thehowl commented Oct 20, 2017

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

screenshot-2017-10-20 gitea

Example of collapsed navbar (and dashboard)

screen shot 2017-10-20 at 17 16 20

Collapsing/expanding demo

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

screen shot 2017-10-20 at 17 21 12-fullpage

Explore

screen shot 2017-10-20 at 17 21 48-fullpage

@thehowl thehowl referenced this pull request Oct 20, 2017

Closed

Responsive UI #35

@codecov-io

This comment has been minimized.

codecov-io commented Oct 20, 2017

Codecov Report

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

Impacted file tree graph

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

This comment has been minimized.

Member

thehowl commented Oct 20, 2017

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

sharenixtemp tatddejzecgl6ethvxt

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

screen shot 2017-10-20 at 21 07 18-fullpage

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

This comment has been minimized.

hellasteph commented Oct 20, 2017

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

@thehowl

This comment has been minimized.

Member

thehowl commented Oct 20, 2017

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

This comment has been minimized.

hellasteph commented Oct 20, 2017

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

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

@lunny lunny added the kind/ui label Oct 21, 2017

@lafriks

This comment has been minimized.

Member

lafriks commented Oct 21, 2017

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

@geek1011

This comment has been minimized.

Member

geek1011 commented Oct 21, 2017

I will also test the changes too.

@thehowl thehowl force-pushed the thehowl:get-your-phone branch from af66de0 to dfe7c3e Oct 21, 2017

@geek1011

This comment has been minimized.

Member

geek1011 commented Oct 21, 2017

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 thehowl changed the title from [WIP] Responsive view to Responsive view Oct 21, 2017

@thehowl

This comment has been minimized.

Member

thehowl commented Oct 21, 2017

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

This comment has been minimized.

Member

lunny commented Oct 22, 2017

@thehowl CI failed.

@geek1011

This comment has been minimized.

Member

geek1011 commented Oct 22, 2017

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

@thehowl

This comment has been minimized.

Member

thehowl commented Oct 24, 2017

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

@lunny

This comment has been minimized.

Member

lunny commented Oct 26, 2017

Please rebase

@thehowl thehowl force-pushed the thehowl:get-your-phone branch from 622424f to 71183b8 Oct 26, 2017

@thehowl

This comment has been minimized.

Member

thehowl commented Oct 26, 2017

done

@JonasFranzDEV

This comment has been minimized.

Member

JonasFranzDEV commented Oct 30, 2017

There are some conflicts with master.

@thehowl thehowl force-pushed the thehowl:get-your-phone branch from 71183b8 to 6e28830 Nov 4, 2017

@thehowl

This comment has been minimized.

Member

thehowl commented Nov 4, 2017

Ready for review... again

@lunny

This comment has been minimized.

Member

lunny commented Nov 5, 2017

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

@lunny

This comment has been minimized.

Member

lunny commented Nov 5, 2017

image
explore repository UI should be improved.

@thehowl thehowl force-pushed the thehowl:get-your-phone branch from 7fb5620 to c62d58d Nov 11, 2017

@thehowl

This comment has been minimized.

Member

thehowl commented Nov 11, 2017

@lunny addressed your issues and rebased sorry for taking long

@lunny

This comment has been minimized.

Member

lunny commented Nov 13, 2017

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

image

@thehowl thehowl force-pushed the thehowl:get-your-phone branch from c62d58d to c359115 Nov 16, 2017

@thehowl

This comment has been minimized.

Member

thehowl commented Dec 29, 2017

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

This comment has been minimized.

Member

lunny commented Dec 30, 2017

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

@thehowl thehowl force-pushed the thehowl:get-your-phone branch from c359115 to 9c5e315 Dec 30, 2017

Minor changes to amend broken stuff
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 thehowl force-pushed the thehowl:get-your-phone branch from eba884e to 207337e Dec 30, 2017

@thehowl

This comment has been minimized.

Member

thehowl commented Dec 30, 2017

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

This comment has been minimized.

Member

lafriks commented Dec 30, 2017

LGTM

@tboerger tboerger added lgtm/done and removed lgtm/need 1 labels Dec 30, 2017

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

3 checks passed

Codacy/PR Quality Review Good work! A positive pull request.
Details
approvals/lgtm this commit looks good
continuous-integration/drone/pr the build was successful
Details

@daviian daviian referenced this pull request Apr 26, 2018

Open

Element alignments in layout broken #3851

2 of 7 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment