Introduce `flex-list` & `flex-item` elements for Gitea UI #25790

denyskon · 2023-07-09T19:36:04Z

This PR introduces a new UI element type for Gitea called flex-item. It consists of a horizontal card with a leading, main and trailing part:

The idea behind it is that in Gitea UI, we have many cases where we use this kind of layout, but it is achieved in many different ways:

grid layout
.ui.list with additional hacky flexbox
.ui.key.list - looks to me like a style set originally created for ssh/gpg key list, was used in many other places
.issue.list - created for issue cards, used in many other places
...

This new style is based on .issue.list, specifically the refactoring of it done in #25750.

In this PR, the new element is introduced and lots of templates are being refactored to use that style. This allows to remove a lot of page-specific css, makes many of the elements responsive or simply provides a cleaner/better-looking way to present information.

A devtest section with the new style is also available.

Screenshots (left: before, right: after)

KN4CK3R · 2023-07-09T20:09:26Z

Is there a way to reduce the space above "yesterday" at the bottom?
https://user-images.githubusercontent.com/47871822/252165284-c1b7c22e-3e5a-46d4-b8d6-5560db478c0b.png

denyskon · 2023-07-09T20:21:07Z

Done :)

wxiaoguang · 2023-07-10T02:04:04Z

IIRC there is already a flex-items-block ?

templates/devtest/gitea-ui.tmpl

silverwind · 2023-07-21T17:41:49Z

Missed this one, will review soon.

wxiaoguang

Haven't gotten time for testing it.

Some selectors are likely having unnecessary dependency, eg: .flex-list .branches .truncated-name and flex-list .branches .branch. Ideally, the "flex-list.css" is a independent layout framework, the "page" related selectors may need a totally new selector, eg: .xxx-branch-list .branch ....

But I can vote my LGTM, while I think some improvements could be done later.

denyskon · 2023-07-31T11:52:26Z

@wxiaoguang Thanks for noticing, I moved the unrelated styles to the issue-list css file where they belong.

denyskon · 2023-07-31T11:55:11Z

I would like to wait for silverwind's opinion before merging, as this is a large refactoring.

silverwind · 2023-07-31T22:13:36Z

Looks good and I can't really spot any difference between the old issuelist, so let's give this a try.

* upstream/main: Introduce `flex-list` & `flex-item` elements for Gitea UI (go-gitea#25790) Mention `devtest` in frontend contributing guidelines (go-gitea#26249)

Regression of #25790 Fixes #26310 --------- Co-authored-by: Giteabot <teabot@gitea.io>

Follow #26649 and #25790 and add one more example (text truncate) in the devtest page

Sonic853 · 2023-10-26T07:52:03Z

templates/org/member/members.tmpl

-<div role="main" aria-label="{{.Title}}" class="page-content organization members">
+<div role="main" aria-label="{{.Title}}" class="page-content organization">


Why to delete this "members" class?

Is there any impact? of regression

Maybe they were depending on this class for customization. I wonder if there would be a better way to indicate the current page to CSS, like an data attribute that indicates the matching template file or router. We could make better stability guarantees for those then these flimsy classes.

Is there any impact? of regression

Although there is currently no impact. But there is no way to tell under Vanilla JS whether it is a "Members" page.

In JS, you could check the URL which I guess is more stable than these classes. e.g. check if /^\/[^/]+/[^/]+/members$/.test(window.location.pathname).

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jul 9, 2023

pull-request-size bot added the size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. label Jul 9, 2023

denyskon added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI type/refactoring Existing code has been cleaned up. There should be no new functionality. labels Jul 9, 2023

denyskon added this to the 1.21.0 milestone Jul 9, 2023

denyskon added 4 commits July 9, 2023 21:43

fix shared styles, additional fixes

001da67

restore accidentially removed class

650a226

introduce flex-card style

607257a

fixes

86d9c11

denyskon force-pushed the refactor/flex-card branch from 06efb78 to 86d9c11 Compare July 9, 2023 19:43

fix issues, reduce feed spacing

62449e9

denyskon added 3 commits July 9, 2023 22:37

fix tests

fd6cce3

Merge branch 'main' into refactor/flex-card

cf3ef0d

Update issue_test.go

759223c

wxiaoguang reviewed Jul 10, 2023

View reviewed changes

templates/devtest/gitea-ui.tmpl Outdated Show resolved Hide resolved

denyskon added 2 commits July 10, 2023 09:27

fix tests

e059aab

rename flex-card to flex-item

d731a23

denyskon changed the title ~~Introduce flex-card & flex-list elements for Gitea UI~~ Introduce flex-list & flex-item elements for Gitea UI Jul 10, 2023

denyskon added 4 commits July 10, 2023 09:31

Merge branch 'main' into refactor/flex-card

1be2cbd

Merge branch 'main' into refactor/flex-card

8159daf

Delete generate-ini-sqlite

792961e

Merge branch 'main' into refactor/flex-card

82e436f

denyskon added 3 commits July 21, 2023 19:45

Merge branch 'main' into refactor/flex-card

aea1437

Merge branch 'main' into refactor/flex-card

147f7a4

Merge branch 'main' into refactor/flex-card

6c490f5

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 Jul 31, 2023

wxiaoguang approved these changes Jul 31, 2023

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 Jul 31, 2023

puni9869 added reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. and removed lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. labels Jul 31, 2023

Merge branch 'main' into refactor/flex-card

67b4fe8

GiteaBot added the lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. label Jul 31, 2023

puni9869 removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Jul 31, 2023

move issue-list-specific styles from flex-list to issue-list

f5e5aa9

silverwind approved these changes Jul 31, 2023

View reviewed changes

silverwind merged commit b9baed2 into go-gitea:main Jul 31, 2023
23 checks passed

denyskon deleted the refactor/flex-card branch July 31, 2023 22:20

This was referenced Aug 3, 2023

css bug in /$org/-/packages/container/$foo/latest/settings #26310

Closed

Use flex classes in package settings #26314

Merged

silverwind pushed a commit that referenced this pull request Aug 8, 2023

Use flex classes in package settings (#26314)

e6f8e93

Regression of #25790 Fixes #26310 --------- Co-authored-by: Giteabot <teabot@gitea.io>

denyskon mentioned this pull request Aug 11, 2023

remove unnecessary explore org template #26459

Merged

silverwind mentioned this pull request Aug 17, 2023

Fix dashboard feed icon color #26552

Closed

This was referenced Aug 21, 2023

UI: settings page style error #26617

Closed

More improvements for the "flex list" and the dashboard list #26675

Merged

wxiaoguang added a commit that referenced this pull request Aug 23, 2023

More improvements for the "flex list" and the dashboard list (#26675)

e4b2bdf

Follow #26649 and #25790 and add one more example (text truncate) in the devtest page

lng2020 mentioned this pull request Oct 12, 2023

The repo items in explore page have duplicate icon #27596

Closed

Sonic853 reviewed Oct 26, 2023

View reviewed changes

denyskon mentioned this pull request Oct 27, 2023

Always use whole user name as link #27815

Merged

go-gitea locked as resolved and limited conversation to collaborators Oct 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce `flex-list` & `flex-item` elements for Gitea UI #25790

Introduce `flex-list` & `flex-item` elements for Gitea UI #25790

denyskon commented Jul 9, 2023 •

edited

Loading

KN4CK3R commented Jul 9, 2023

denyskon commented Jul 9, 2023

wxiaoguang commented Jul 10, 2023

silverwind commented Jul 21, 2023

wxiaoguang left a comment

denyskon commented Jul 31, 2023

denyskon commented Jul 31, 2023

silverwind commented Jul 31, 2023

Sonic853 Oct 26, 2023

puni9869 Oct 26, 2023

silverwind Oct 26, 2023 •

edited

Loading

Sonic853 Oct 26, 2023

silverwind Oct 30, 2023 •

edited

Loading

		<div role="main" aria-label="{{.Title}}" class="page-content organization members">
		<div role="main" aria-label="{{.Title}}" class="page-content organization">

Introduce flex-list & flex-item elements for Gitea UI #25790

Introduce flex-list & flex-item elements for Gitea UI #25790

Conversation

denyskon commented Jul 9, 2023 • edited Loading

KN4CK3R commented Jul 9, 2023

denyskon commented Jul 9, 2023

wxiaoguang commented Jul 10, 2023

silverwind commented Jul 21, 2023

wxiaoguang left a comment

Choose a reason for hiding this comment

denyskon commented Jul 31, 2023

denyskon commented Jul 31, 2023

silverwind commented Jul 31, 2023

Sonic853 Oct 26, 2023

Choose a reason for hiding this comment

puni9869 Oct 26, 2023

Choose a reason for hiding this comment

silverwind Oct 26, 2023 • edited Loading

Choose a reason for hiding this comment

Sonic853 Oct 26, 2023

Choose a reason for hiding this comment

silverwind Oct 30, 2023 • edited Loading

Choose a reason for hiding this comment

Introduce `flex-list` & `flex-item` elements for Gitea UI #25790

Introduce `flex-list` & `flex-item` elements for Gitea UI #25790

denyskon commented Jul 9, 2023 •

edited

Loading

silverwind Oct 26, 2023 •

edited

Loading

silverwind Oct 30, 2023 •

edited

Loading