Even more repo rework #15005

CL-Jeremy · 2021-03-16T12:07:05Z

The previous rework marks only the beginning of a big rework towards mobile friendliness. The main change is that tables are now unstackable on mobile: no more overly long page scrolling (figure 1).

This PR includes many more stuff I'd like to fix urgently. #14704 was focusing on the tabular menu, but I went on to include language statistics as well as it is related in design concept (finger-scrollable with an auto-hiding scrollbar). Further changes would make that PR impossible to be reviewed.

This PR includes but is not limited to the following changes as of now (As this is just a draft, I'd like to let it settle a bit and summarize the changes more thoroughly during that time):

Repo home
- Table header now uses a flexbox (I believe this is a prerequisite for correct handling of the buggy commit message wrapper, that part is a WIP as of now, so this still overflows on mobile)
- Table rows now automatically hides commit messages on mobile portrait mode like GitHub, but shows them in landscape mode
- Secondary menu (buttons above the table) now wraps and aligns much better on mobile, with the upload buttons centered on desktop and right-floating on mobile
- (This touches multiple files) Topic editing gets repositioned (figure 2) in presence of repo search bar, correctly uses octicon instead of Font Awesome supplied by semantic dropdown (overridden in index.js) for newly created labels, and correctly shows a different red color (figure 3; I invented the colors - need to be formalized) for invalid labels (previously it was impossible to tell which labels are actually invalid, since all subordinate labels to a semantic multiple search bar in error state are dyed red, and that red theme is exactly the same red as the defined accent red), and valid labels get better colors with both arc-green and gitea themes
Repo commit list (history)
- Table header: wraps correctly on various resolutions
- Table rows: hides short SHA on very mobile portrait mode, just like repo home; age is fixed at 120px, just like repo home
- Commit message wrapper: correctly expands downward without affecting other cells, like with vertical-align: middle, the button is shorter in height, uses octicon, and aligns properly with other commits without such a button (think of floating layout - right margin is aligned with surrounding texts, which used to extend only to its left margin, wasting some space) - most of these changes are reflected in the same wrapper on file list table header (ported over to save some layout effort, even using display: table-cell for neighboring elements)
Repo branches
- Table rows: hides PR and commit comparison rows on mobile (portrait and landscape) mode - I'll see if this touches more stuff than needed
Git graph (new)
- SHA label aesthetics match others now
Global
- Short SHA label now uses ~~12px~~ 14px icon instead of previous 16px, which was way too big and made signed labels much taller than unsigned labels, creating many problems
- Explore: topic labels gets smaller top margin
- Misc: various alignment/overflow issues are fixed with flexboxes / min-width: max-content (expect better compatibility than fix-content)
Bug (~~partially~~ fixed): overflowing file list table header (now hard truncated without proper ellipsis - detail expansion button is hidden when commit message is too long)

Suggestions and comments are highly appreciated as always.

Figure 1:

Figure 2:

Figure 3:

close #15283

CL-Jeremy · 2021-03-16T12:11:27Z

Sorry I forgot to highlight that repo home page still overflows, but solely due to the message wrapper. The overflow will be solved once that is solved. That's why I didn't screenshot that as figure 1.

CL-Jeremy · 2021-03-16T12:15:31Z

One more screenshot to demonstrate signed and unsigned SHA labels in a list:

CL-Jeremy · 2021-03-16T12:26:50Z

modules/templates/helper.go

@@ -555,7 +555,8 @@ func SVG(icon string, others ...interface{}) template.HTML {
 			svgStr = heightRe.ReplaceAllString(svgStr, fmt.Sprintf(`height="%d"`, size))
 		}
 		if class != "" {
-			svgStr = strings.Replace(svgStr, `class="`, fmt.Sprintf(`class="%s `, class), 1)
+			matches := regexp.MustCompile(`class="(.*?)"`).FindStringSubmatch(svgStr)


This is personal taste: I don't want to have <svg> elements generated by svg.js and helper.go to have different order of class names. I originally planned to deduplicate the class names (like in svg.js) but that would add unnecessary costs with no added benefit.

You should move regexp.MustCompile out of the function to not compile the regex every function call.

CL-Jeremy · 2021-03-16T13:49:09Z

Forgot to test avatar. Found the culprit of that misalignment: #10425 (comment). Fix is coming.

KN4CK3R · 2021-03-16T15:47:23Z

templates/repo/branch/list.tmpl

@@ -9,21 +9,21 @@
 		</h4>

 		<div class="ui attached table segment">
-			<table class="ui very basic striped fixed table single line">
+			<table class="ui very basic striped fixed table single line unstackable table">


There are two tables now.

silverwind · 2021-03-16T21:46:36Z

templates/org/team/teams.tmpl

@@ -37,7 +37,7 @@
 						{{end}}
 					</div>
 					<div class="ui bottom attached header">
-						<p class="team-meta">{{.NumMembers}} {{$.i18n.Tr "org.lower_members"}} · {{.NumRepos}} {{$.i18n.Tr "org.lower_repositories"}}</p>
+						<p class="team-meta">{{.NumMembers}} {{$.i18n.Tr "org.lower_members"}}&nbsp;·&nbsp;{{.NumRepos}} {{$.i18n.Tr "org.lower_repositories"}}</p>


Width of   will not be consistent across different fonts and I generally despise using whitespace for layout purposes, better to use something like

<span class="mx-2">·</span>

This goes without saying for me, but I was more focused on other stuff. I might revert this change in exchange to better solutions. white-space: pre exists at other places as well - I really can't see the use of that apart from supporting this type of weird layout technique with breakable spaces - ugh!

silverwind · 2021-03-16T21:49:59Z

web_src/less/_repository.less

-      margin-left: 0;
-      margin-right: 0;
+  &.flex-wrappable {
+    margin-bottom: 0;


Why not use the mb-0 helper instead of adding this class? Also mb-1 for .item.

This would be a helper class like those it replaces: it applies recustively so I don't have to add mb-1 to every single .item in case I forget one. Didn't you create those classes (forgive me if I'm wrong)?

Yeah I guess that usage is fine. Yes it was me who added the helpers.

CL-Jeremy · 2021-03-17T17:35:59Z

Damn, I have too many local branches and did a force push without actually changing the content of the commit... Sorry for wasting CPU power of CI...

jolheiser · 2021-03-17T17:37:14Z

Damn, I have too many local branches and did a force push without actually changing the content of the commit... Sorry for wasting CPU power of CI...

I've cancelled the job, no worries. 🙂

silverwind · 2021-04-06T23:06:50Z

Those have to be resolved with proper theming

Actually I was planning on this as part of the ongoing CSS variable rework. In the final result, arc-green should only consist of variables.

silverwind · 2021-04-09T17:01:02Z

templates/repo/branch/list.tmpl

 										{{if .IsProtected}}
 											{{svg "octicon-shield-lock"}}
 										{{end}}
 										<a href="{{$.RepoLink}}/src/branch/{{.Name | EscapePound}}">{{.Name}}</a>
-										<p class="info df ac my-2">{{svg "octicon-git-commit" 16 "mr-2"}}<a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
+										<p class="info df ac my-2" title="{{$renderedCommitMessage}}">
+											{{- svg "octicon-git-commit" 16 "mr-2"}}{{/* p */ -}}


What does this /* p */ do?

silverwind · 2021-04-09T17:08:11Z

web_src/less/_base.less

+  --color-yellow-sha-bg: rgba(251, 189, 8, .1);
+  --color-yellow-sha-hover: rgba(251, 189, 8, .3);
+  --color-green-sha-bg: rgba(33, 186, 69, .1);
+  --color-green-sha-hover: rgba(33, 186, 69, .3);


Could you convert to #rrggbbaa syntax? Just for consistency basically.

Can we use error (red), warning (orange), info (blue) and success (green) states please?

Based on previous point, please remove color names from these variable names, e.g. --color-red-err-bg -> --color-error-bg, --color-green-ok-bg -> --color-success-bg.

silverwind · 2021-04-09T17:10:23Z

web_src/less/_base.less

+    }
+  }
+}
+


Can we maybe not use nested syntax to override fomantic? I prefer plain selectors in this case because it's easiert to search exact selector strings in fomantic source and just copy from there. Nested syntax would break this searching.

silverwind · 2021-04-09T17:11:25Z

web_src/less/_base.less

+.octicon-tiny > .svg {
+  margin-top: -2px;
+  margin-bottom: -2px;
+  vertical-align: -2px;
 }


This is only used in two places, suggest to remove the class and use helper classes if possible. Also, the previous font-size does nothing on SVG.

silverwind · 2021-04-09T17:13:24Z

web_src/less/_repository.less

-          text-align: center;
+      .sha.mono {
+        font-size: 1em !important;
+        width: calc(9ch + 82px); // 60px + 11px * 2


Do we really need explicit width on this? I prefer to avoid that.

This is necessary since the table is fixed, i. e. the width of the columns are have predefined starting values (can be incremented but not decreased). I basically copied the logic from the commits table to the repo file table for consistency.

So essentially you are stretching the column with this width? Can we be sure it will not cut off for example if we add more content in the hash label?

Can you maybe convert to min-width?

So essentially you are stretching the column with this width? Can we be sure it will not cut off for example if we add more content in the hash label?

I'm pretty sure it will cut off if more content is added.

Can you maybe convert to min-width?

It won't work. If I recall correctly, when the width of a fixed table decreases, only explicit width (either as percentage in explicit numbers) could have an effect on column widths. No actual content width would be taken in to consideration. It's common practice though and ensures the fastest layout possible for large tables.

To make it clear again: the commits table has always been fixed, and there wasn't any measure taken to ensure that the SHA label would fit (the Fomantic UI classes define the percentage width of the columns, just like the flex-based grid (but does not support that many layout strategies). It basically gives up at lower resolution and wraps the table in three rows - that design may find its use elsewhere, but the UE is awful in this case. I thus use media queries to hide the less-important elements explicitly, but otherwise keep the design same as before (it has the advantage of always getting the overflow-text: ellipsis right for commit messages embedded in flexboxes, so I also ported that to the repo file table by using a complex table header with a zero-height borderless top row, used just to set the width of the columns - I'm yet to find anything more elegant than that based on what's already there).

Ideally, we could copy GitHub's idea of using a bunch of nested flexboxes (with helper classes based on media queries) given their versatility, but those are pretty hard to tame...

Also, thanks for all the reviews. I've read all of them and have them on my checklist. Have other things to do...

silverwind · 2021-04-09T17:15:15Z

web_src/less/features/gitgraph.less

-      padding-bottom: 3px;
-    }
+      display: flex;
+      height: 21.6px; // 14px + 2.8px * 2 + 1px * 2


Same question here, would like to avoid any explicit dimensions.

silverwind · 2021-04-09T17:16:14Z

web_src/less/themes/theme-arc-green.less

+  --color-yellow-sha-bg: rgba(251, 189, 8, .1);
+  --color-yellow-sha-hover: rgba(251, 189, 8, .3);
+  --color-green-sha-bg: rgba(33, 186, 69, .1);
+  --color-green-sha-hover: rgba(33, 186, 69, .3);


Please copy the remaining vars from _base.less in here as well, I'd prefer this list to stay in sync, even if colors are the same.

silverwind · 2021-04-09T17:17:11Z

web_src/less/themes/theme-arc-green.less

-  border-color: #393d4a;
-  color: #dbdbdb;
-}
-
 .repository .ui.attached.message.isSigned.isVerified {
  background-color: #394829;
  color: var(--color-secondary-dark-6);


There might be more rules to remove in theme-arc-green.less for the SHA labels, please verify.

lunny · 2021-11-09T11:48:15Z

Please resolve the conflicts.

stale · 2022-05-02T05:12:55Z

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 months. Thank you for your contributions.

lunny · 2022-05-02T08:40:38Z

If no one could pick up this one. I think we have to close it.

wxiaoguang · 2022-05-07T04:28:27Z

It's a pity that this PR stales for so long time and can not be merged. Thank you, CL-Jeremy (I saw a lot of UI work from you before 👍)

Fortunately, a lot of problems has been resolved by some recent PRs separately.

I agree it's the time to close this one (if still no new progress) and move on to open new PRs to make UI better.

6543 · 2022-05-07T11:59:53Z

oh no @CL-Jeremy it got some conflicts - do you need help resolving them - just ask :)

wxiaoguang · 2022-05-25T16:42:13Z

OK, let me be the bad guy to close this PR, since it has been stale for quite a long time .... and a lot of problems has been resolved by some recent PRs separately.

Feel free to reopen it or pick it as a new one. 🙏

CL-Jeremy added 2 commits March 16, 2021 12:20

Various mobile reworks for repo pages

64e7404

Merge branch 'master' into mobile-repo-rework

04aa913

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 16, 2021

Fix stylelint (whitespaces)

80f5df0

lafriks added the topic/ui Change the appearance of the Gitea UI label Mar 16, 2021

lafriks added this to the 1.15.0 milestone Mar 16, 2021

CL-Jeremy commented Mar 16, 2021

View reviewed changes

Fix SHA badge with avatar

a57ad3b

CL-Jeremy force-pushed the mobile-repo-rework branch 2 times, most recently from 960b66e to 548b7d2 Compare March 16, 2021 15:35

Fix Safari quirks

7828478

CL-Jeremy force-pushed the mobile-repo-rework branch from 548b7d2 to 7828478 Compare March 16, 2021 15:45

KN4CK3R reviewed Mar 16, 2021

View reviewed changes

CL-Jeremy added 2 commits March 16, 2021 18:42

Fix issues on commit list page

ddd682b

Actually fix the issue; replace icon

74c9c4e

CL-Jeremy force-pushed the mobile-repo-rework branch from 87c804c to 74c9c4e Compare March 16, 2021 18:28

CL-Jeremy added 2 commits March 16, 2021 19:37

Hide avatar on mobile portrait

53f423e

Adapt flexbox logic for repo file list header

a8e2c1b

silverwind reviewed Mar 16, 2021

View reviewed changes

Make more progress

e4bd476

CL-Jeremy force-pushed the mobile-repo-rework branch from 4d2c25f to e4bd476 Compare March 17, 2021 14:50

Fix SHA label alignment for inline environment

d906f8d

CL-Jeremy force-pushed the mobile-repo-rework branch from ee03601 to d906f8d Compare March 17, 2021 17:33

Complete rework of SHA label-related stuff

369de45

Finish forgotten WIP on commit page SHA label

b886f89

CL-Jeremy added 2 commits April 7, 2021 13:07

Fix selector leaking to branch selector

0a40ced

Fix octicon helper class for .ui.tiny

46c81ef

CL-Jeremy mentioned this pull request Apr 7, 2021

[UI] Bug on Fille List / View if commit message is to long #15283

Closed

Fix missing quote in HTML tag

386e815

silverwind reviewed Apr 9, 2021

View reviewed changes

zeripath modified the milestones: 1.15.0, 1.16.0 Jun 23, 2021

lunny modified the milestones: 1.16.0, 1.17.0 Nov 19, 2021

n194 mentioned this pull request Feb 4, 2022

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

Closed

stale bot added the issue/stale label May 2, 2022

stale bot removed the issue/stale label May 2, 2022

wxiaoguang closed this May 25, 2022

wxiaoguang removed this from the 1.17.0 milestone May 25, 2022

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Even more repo rework #15005

Even more repo rework #15005

CL-Jeremy commented Mar 16, 2021 •

edited by 6543

Loading

CL-Jeremy commented Mar 16, 2021

CL-Jeremy commented Mar 16, 2021

CL-Jeremy Mar 16, 2021

silverwind Mar 21, 2021 •

edited

Loading

CL-Jeremy commented Mar 16, 2021

KN4CK3R Mar 16, 2021

silverwind Mar 16, 2021

CL-Jeremy Mar 17, 2021

silverwind Mar 16, 2021

CL-Jeremy Mar 17, 2021

silverwind Apr 9, 2021

CL-Jeremy commented Mar 17, 2021

jolheiser commented Mar 17, 2021

silverwind commented Apr 6, 2021

silverwind Apr 9, 2021

silverwind Apr 9, 2021

silverwind Apr 9, 2021

silverwind Apr 9, 2021 •

edited

Loading

silverwind Apr 9, 2021

CL-Jeremy Apr 9, 2021

silverwind Apr 10, 2021

CL-Jeremy Apr 10, 2021

CL-Jeremy Apr 10, 2021

CL-Jeremy Apr 10, 2021

silverwind Apr 9, 2021

silverwind Apr 9, 2021 •

edited

Loading

silverwind Apr 9, 2021

lunny commented Nov 9, 2021

stale bot commented May 2, 2022

lunny commented May 2, 2022

wxiaoguang commented May 7, 2022

6543 commented May 7, 2022

wxiaoguang commented May 25, 2022

Even more repo rework #15005

Even more repo rework #15005

Conversation

CL-Jeremy commented Mar 16, 2021 • edited by 6543 Loading

CL-Jeremy commented Mar 16, 2021

CL-Jeremy commented Mar 16, 2021

Choose a reason for hiding this comment

silverwind Mar 21, 2021 • edited Loading

Choose a reason for hiding this comment

CL-Jeremy commented Mar 16, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CL-Jeremy commented Mar 17, 2021

jolheiser commented Mar 17, 2021

silverwind commented Apr 6, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

silverwind Apr 9, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

silverwind Apr 9, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lunny commented Nov 9, 2021

stale bot commented May 2, 2022

lunny commented May 2, 2022

wxiaoguang commented May 7, 2022

6543 commented May 7, 2022

wxiaoguang commented May 25, 2022

CL-Jeremy commented Mar 16, 2021 •

edited by 6543

Loading

silverwind Mar 21, 2021 •

edited

Loading

silverwind Apr 9, 2021 •

edited

Loading

silverwind Apr 9, 2021 •

edited

Loading