Restructure issue list template, styles #25750
Conversation
GiteaBot
added
the
lgtm/need 2
pull-request-size
bot
added
the
size/L
GiteaBot
added
lgtm/need 1
|
One idea I had in mind is to move from |
|
@silverwind I plan to merge all the similar & often partially broken 'card styles/templates' into one at some point as most of them use a similar layout: leading icon/image, title, subtitle/body, trailing icons/buttons. I thought it would be better to start with this small refactoring. I would prefer if we could merge this now, and an/some additional PR(s) will follow soon continuing with this approach. |
|
Yes, of course. Step by step. |
denyskon
added
type/bug
topic/ui
|
I have started refactoring the other card elements to use this card structure, and it looks like it's easier to do it in one PR so nothing breaks in between... |
GiteaBot
added
lgtm/done
silverwind
added
the
reviewed/wait-merge
|
@denyskon please fix the merge conflicts. 🍵 |
GiteaBot
removed
the
reviewed/wait-merge
|
The conflicts are caused by Reformat some templates #25756 That's what I said in #25739 (comment)
|
|
Maybe if we could get the backend to just "minify" the insignificant HTML whitespace, it would be ideal, but I'm not sure whether the extra the processing cost of such an effort is worth it. |
|
To help merge this PR, you can do this:
|
|
Could probably do template optimization as a one-time action on process startup and then cache the result in memory. |
|
I do not think it's worth to play with these spaces at the moment, neither the spaces between tags nor the spaces between class names. Just like you won't look into the generated assemble code in a binary program, won't look into the generated JS code after packing, nobody would be hurt by the generated HTML code for browsers -- as long as the browser can render it correctly. Code should be written in a developer-friendly style, but not in a generated-content-friendly style. |
|
Agree it's not worth from a review standpoint, but delivering minimal HTML is worth from performance standpoint. |
Co-authored-by: silverwind <[email protected]>
|
Fixed the conflicts |
silverwind
added
the
reviewed/wait-merge
GiteaBot
removed
the
reviewed/wait-merge
* giteaofficial/main: (31 commits) Fix WORK_DIR for docker (root) image (go-gitea#25738) Avoid amending the Rebase and Fast-forward merge if there is no message template (go-gitea#25779) Show edit title button on commits tab of PR, too (go-gitea#25791) Make "install page" respect environment config (go-gitea#25648) Enable H014 and H023 djlint rules (go-gitea#25786) Restructure issue list template, styles (go-gitea#25750) Fix notification list bugs (go-gitea#25781) Revert package access change from go-gitea#23879 (go-gitea#25707) Make route middleware/handler mockable (go-gitea#25766) Update tool dependencies, lock govulncheck and actionlint (go-gitea#25655) Test if container blob is accessible before mounting (go-gitea#22759) Always pass 6-digit hex color to monaco (go-gitea#25780) Fix the wrong default branch name displayed by checkout (go-gitea#25777) Tweak repo topics bar (go-gitea#25769) docs: rootless docker ssh's default port is 2222 (go-gitea#25771) Repository Archived text title center align (go-gitea#25767) Update JS dependencies, misc tweaks (go-gitea#25768) Clarify "text-align" CSS helpers, fix clone button padding (go-gitea#25763) Switch to `vite-string-plugin` (go-gitea#25762) Newly pushed branches hints on repository home page (go-gitea#25715) ...
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. <details> <summary>Screenshots (left: before, right: after)</summary>                    </details> --------- Co-authored-by: Giteabot <[email protected]>
This PR does various modifications on the issue list shared template:
gt-*patches and other unneeded classes -> use existing css classesBefore:
After: