Improve UI on mobile #19546

Gusted · 2022-04-29T00:40:09Z

I've recently started experimenting with making the mobile experience not painful and be actually usable. This PR combines a few smaller changes to enhance this experience.
8ef16c7: Submit buttons on the review forms aren't columns anymore and are now allowed to be displayed on one row.
a8306a3: The label/milestone & New Issue buttons were given each own row even tough, there's enough place to do it one the same row. This commit fixes that.
5689d9f: The issues+Pull tab on repo's has a third item besides the label/milestone & New Issue buttons, the search bar. On desktop there's enough place to do this on one row, for mobile it isn't, currently it was using for each item a new row. This commits fixes that by only giving the searchbar a new row and have the other two buttons on the same row.
bed6577: The notification table will now be show a scrollbar instead of overflow.
0ead559: The repo buttons(Watch, Star, Fork) on mobile were showing quite big and the SVG wasn't even displayed on the same line, if the count of those numbers were too high it would even overflow. This commit removes the SVG, as there isn't any place to show them on the same row and allows them to have a new row if the counts of those buttons are high.
e7876e2: The admin page can show you a lot of interesting information, on mobile the System Status + Configuration weren't properly displayed as the margin's were too high. This commit fixes that by reducing the margin to a number that makes sense on mobile.
e78db22 & a4ed98b & 330afac Fixes to not overflow the tables but instead force them to be scrollable.
b9e8fa5: When viewing a issue or pull request, the comments aren't full-width but instead 80% and aligned to right, on mobile this is a annoyance as there isn't much width to begin with. This commits fixes that by forcing full-width and removing the avatars on the left side and instead including them inline in the comment header.

Screenshots

Before

After

- Show it horizontally, instead of giving each their own row.

- Don't show SVG(major cause for taking up space and being shown as "column"). - Allow it to be a new columnif the number is too big.

- Force semantic to not stack it, and let the overflow be scrollable.

wxiaoguang

Generally looks good to me.

web_src/less/_repository.less

* Don't error when branch's commit doesn't exist - If one of the branches no longer exists, don't throw an error, it's possible that the branch was destroyed during the process. Simply skip it and disregard it. - Resolves go-gitea#19541 * Don't send empty objects * Use more minimal approach

* Fix word breaks in Chrome This fixes word wrapping on the filename for a comment on a PR. A previous commit fixed this problem in Firefox, but not Chrome. Fixes go-gitea#16248 * Don't break Outdated badge This prevents the Outdated badge on a PR from wrapping in the middle of the word for a comment on a long filename. * Move word break to recommended element * Add overflow-wrap per PR review * Update web_src/less/helpers.less Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

…18761) Targeting go-gitea#14936, go-gitea#15332 Adds a collaborator permissions API endpoint according to GitHub API: https://docs.github.com/en/rest/collaborators/collaborators#get-repository-permissions-for-a-user to retrieve a collaborators permissions for a specific repository. ### Checks the repository permissions of a collaborator. `GET` `/repos/{owner}/{repo}/collaborators/{collaborator}/permission` Possible `permission` values are `admin`, `write`, `read`, `owner`, `none`. ```json { "permission": "admin", "role_name": "admin", "user": {} } ``` Where `permission` and `role_name` hold the same `permission` value and `user` is filled with the user API object. Only admins are allowed to use this API endpoint.

Followup to go-gitea#19534. Make the link render in color only on hover.

…go-gitea#19310) * Apply DefaultUserIsRestricted in CreateUser * Enforce system defaults in CreateUser Allow for overwrites with CreateUserOverwriteOptions * Fix compilation errors * Add "restricted" option to create user command * Add "restricted" option to create user admin api * Respect default setting.Service.RegisterEmailConfirm and setting.Service.RegisterManualConfirm where needed * Revert "Respect default setting.Service.RegisterEmailConfirm and setting.Service.RegisterManualConfirm where needed" This reverts commit ee95d3e.

- It's a non-standard mentioned in https://www.ietf.org/rfc/rfc2076.html#section-3.4 - This header makes emails filtering easier

Gusted · 2022-04-30T22:40:10Z

e413709 reverts the changes, I don't want to force push the commits away. Or someone must be annoyed be it?

templates/repo/issue/view_content/comments.tmpl

Co-authored-by: delvh <dev.lh@web.de>

web_src/less/_repository.less

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

codecov-commenter · 2022-05-01T14:56:01Z

Codecov Report

❗ No coverage uploaded for pull request base (main@edff571). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main   #19546   +/-   ##
=======================================
  Coverage        ?   47.28%           
=======================================
  Files           ?      952           
  Lines           ?   132576           
  Branches        ?        0           
=======================================
  Hits            ?    62688           
  Misses          ?    62332           
  Partials        ?     7556

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 edff571...b7afee9. Read the comment docs.

6543 · 2022-05-01T16:09:27Z

🚀

* giteaofficial/main: Fix some slice problems (incorrect slice length) (go-gitea#19592) Fix sending empty notifications (go-gitea#19589) Handle the error of a missing blob object fix go-gitea#19530 (go-gitea#19552) Remove legacy `+build:` constraint (go-gitea#19582) Federation: return useful statistic information for nodeinfo (go-gitea#19561) Upgrade required git version to 2.0 (go-gitea#19577) add smtp password to install page (go-gitea#17564) ignore DNS error when doing migration allow/block check (go-gitea#19566) [skip ci] Updated translations via Crowdin Dont overwrite err with nil & rename PullCheckingFuncs to reflect there usage (go-gitea#19572) Improve UI on mobile (go-gitea#19546) Add API to check if team has repo access (go-gitea#19540)

- This is a continuation on [the work](#19546) I've done for improving mobile experience on Gitea. - The current behavior of going trough the commits list is horrible, each individual item gets it's own row and thereby isn't quite compact as it should be on mobile. The commit view's header is in a bit better state, it's quite only that content is overlapping each other. - This patch fixes those problems. Each row in the commit list table will actually take a row in the UI. The commit view's header has now a better organized way of placing the information.

Start making the mobile experience not painful and be actually usable. This contains a few smaller changes to enhance this experience. - Submit buttons on the review forms aren't columns anymore and are now allowed to be displayed on one row. - The label/milestone & New Issue buttons were given each own row even tough, there's enough place to do it one the same row. This commit fixes that. - The issues+Pull tab on repo's has a third item besides the label/milestone & New Issue buttons, the search bar. On desktop there's enough place to do this on one row, for mobile it isn't, currently it was using for each item a new row. This commits fixes that by only giving the searchbar a new row and have the other two buttons on the same row. - The notification table will now be show a scrollbar instead of overflow. - The repo buttons(Watch, Star, Fork) on mobile were showing quite big and the SVG wasn't even displayed on the same line, if the count of those numbers were too high it would even overflow. This commit removes the SVG, as there isn't any place to show them on the same row and allows them to have a new row if the counts of those buttons are high. - The admin page can show you a lot of interesting information, on mobile the System Status + Configuration weren't properly displayed as the margin's were too high. This commit fixes that by reducing the margin to a number that makes sense on mobile. - Fixes to not overflow the tables but instead force them to be scrollable. - When viewing a issue or pull request, the comments aren't full-width but instead 80% and aligned to right, on mobile this is a annoyance as there isn't much width to begin with. This commits fixes that by forcing full-width and removing the avatars on the left side and instead including them inline in the comment header.

- This is a continuation on [the work](go-gitea#19546) I've done for improving mobile experience on Gitea. - The current behavior of going trough the commits list is horrible, each individual item gets it's own row and thereby isn't quite compact as it should be on mobile. The commit view's header is in a bit better state, it's quite only that content is overlapping each other. - This patch fixes those problems. Each row in the commit list table will actually take a row in the UI. The commit view's header has now a better organized way of placing the information.

Gusted added 13 commits April 27, 2022 01:04

Don't apply wrap around submit buttons on review form

8ef16c7

Don't allow the issue view headers to stack.

a8306a3

- Show it horizontally, instead of giving each their own row.

Have nice issue/pulls list headers

5689d9f

Don't overflow on notification table

bed6577

Fix repo buttons overflowing

0ead559

- Don't show SVG(major cause for taking up space and being shown as "column"). - Allow it to be a new columnif the number is too big.

Properly show tables on mobile

e7876e2

Properly show table on user accounts

e78db22

- Force semantic to not stack it, and let the overflow be scrollable.

Properly show all tables on admin for mobile

a4ed98b

Fix cron/notice tables on admin

330afac

Merge branch 'main' into fix-review-form

cf4137c

Merge branch 'main' into fix-review-form

81f6687

More width on viewing comments

b9e8fa5

Fix linting

f617514

Gusted added this to the 1.17.0 milestone Apr 29, 2022

Gusted added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI labels Apr 29, 2022

Gusted added 2 commits April 29, 2022 02:46

Fix other avatars

00839b2

Merge branch 'main' into fix-review-form

bd530af

wxiaoguang reviewed Apr 29, 2022

View reviewed changes

web_src/less/_repository.less Show resolved Hide resolved

web_src/less/_repository.less Show resolved Hide resolved

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 29, 2022

Gusted and others added 10 commits May 1, 2022 00:33

Permalink files In PR diff (go-gitea#19534)

6d0240b

Mute link in diff header (go-gitea#19556)

a0c79fb

Followup to go-gitea#19534. Make the link render in color only on hover.

[skip ci] Updated translations via Crowdin

a257cd4

fix go-gitea#19545 (go-gitea#19563)

9a4deff

Added X-Mailer header to outgoing emails (go-gitea#19562)

577710c

- It's a non-standard mentioned in https://www.ietf.org/rfc/rfc2076.html#section-3.4 - This header makes emails filtering easier

Use middleware to open gitRepo (go-gitea#19559)

9da61e3

Merge branch 'main' into fix-review-form

fd7ffb4

delvh reviewed Apr 30, 2022

View reviewed changes

templates/repo/issue/view_content/comments.tmpl Outdated Show resolved Hide resolved

Add Poster check

24d4f36

Co-authored-by: delvh <dev.lh@web.de>

delvh approved these changes Apr 30, 2022

View reviewed changes

GiteaBot 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 Apr 30, 2022

Gusted added 2 commits May 1, 2022 01:58

Fix idents

71fa53e

Merge branch 'main' into fix-review-form

59183d3

wxiaoguang reviewed May 1, 2022

View reviewed changes

web_src/less/_repository.less Outdated Show resolved Hide resolved

delvh approved these changes May 1, 2022

View reviewed changes

Gusted and others added 2 commits May 1, 2022 14:25

Update comment

8e4fc27

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

Merge branch 'main' into fix-review-form

b7afee9

wxiaoguang approved these changes May 1, 2022

View reviewed changes

GiteaBot 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 May 1, 2022

Merge branch 'main' into fix-review-form

d3d0cab

6543 merged commit 3725fa2 into go-gitea:main May 1, 2022

Gusted deleted the fix-review-form branch May 1, 2022 16:11

wxiaoguang mentioned this pull request May 3, 2022

[Design Changes] Make the mobile layout more compact #18589

Closed

Gusted mentioned this pull request May 15, 2022

Improve commit list/view on mobile #19712

Merged

Gusted added the topic/mobile label May 15, 2022

otbutz mentioned this pull request Aug 23, 2022

Distorted PR changes UI with german localization #20922

Closed

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve UI on mobile #19546

Improve UI on mobile #19546

Gusted commented Apr 29, 2022 •

edited

wxiaoguang left a comment

Gusted commented Apr 30, 2022

codecov-commenter commented May 1, 2022

6543 commented May 1, 2022

Improve UI on mobile #19546

Improve UI on mobile #19546

Conversation

Gusted commented Apr 29, 2022 • edited

Screenshots

Before

After

wxiaoguang left a comment

Choose a reason for hiding this comment

Gusted commented Apr 30, 2022

codecov-commenter commented May 1, 2022

Codecov Report

6543 commented May 1, 2022

Gusted commented Apr 29, 2022 •

edited