There are a few inconsistencies within Gitea and this PR addresses one
of them. This PR updates the sign-in page layout, including the register
and openID tabs, to match the layout of the settings pages
(/user/settings) for more consistency.
This PR updates the following routes:
`/user/login`
`/user/sign_up`
`/user/login/openid`
`/user/forgot_password`
`/user/link_account`
`/user/recover_account`
**Before**
<img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM"
src="fb0cb517-57c0-4eed-be1d-56f36bd1960d">
**After**
<img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM"
src="428d691d-0a42-4a67-a646-05527f2a7b41">
This PR addresses a revert of the original PR due to this
[comment](https://github.com/go-gitea/gitea/pull/28753#issuecomment-1956596817).
---------
Co-authored-by: rafh <rafaelheard@gmail.com>
Previously, the citation js would load every time when opening a citable
repo. Now it only loads when the user clicks the button for it. The
loading state is representend with a spinner on the button:
<img width="83" alt="Screenshot 2024-03-17 at 00 25 13"
src="29649089-13f3-4974-ab81-e12c0f8e651f">
Diff ist best viewed with whitespace hidden.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 4b1c88628a6856e533ff10d346ca5bd73ce952b3)
Remove this CSS-only module, which gives a nice reduction in CSS size.
Should look exactly like before.
(cherry picked from commit 4e547822f348c2963e0db33135b45d43dfc58df8)
Same as https://github.com/go-gitea/gitea/pull/29822 but for light
theme. Slight shift towards blue and made the themes match more, like on
header and footer background.
Before
<img width="1342" alt="Screenshot 2024-03-16 at 00 43 03"
src="b46021a1-241c-446a-b220-ca25cc90f3bf">
After
<img width="1343" alt="Screenshot 2024-03-16 at 00 45 21"
src="1c898875-a6bb-4bd3-b059-f82e1a145c99">
Before
<img width="1018" alt="Screenshot 2024-03-16 at 00 43 13"
src="d237ee7d-b4cc-4688-a074-1e96515ac475">
After
<img width="1022" alt="Screenshot 2024-03-16 at 00 43 50"
src="89b1da77-6bc9-4b38-9688-546e794aadfa">
(cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
The modal was broken in two ways:
- On small screens, the input box was partially hanging outside the
modal. Fixed with flexbox and increased modal width.
- The clipboard copy was not working because the modal had both
`data-clipboard-text` and `data-clipboard-target`, while we only support
one of those. Made a small tweak in clipboard as well so that it will
still fall back to target if text is empty.
(cherry picked from commit 94512ee0628dc0d2b697441a4355ace54b6515cd)
1. Add `<overflow-menu>` web component
2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames
match.
<img width="439" alt="image"
src="2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74">
<img width="444" alt="Screenshot 2024-03-02 at 21 36 52"
src="aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e">
<img width="537" alt="Screenshot 2024-03-03 at 03 05 06"
src="fddd50aa-adf1-4b4b-bd7f-caf30c7b2245">
TODO:
- [x] Check if removal of `requestAnimationFrame` is possible to avoid
flash of content. Likely needs a `MutationObserver`.
- [x] Hide tippy when button is removed from DOM.
- [x] ~~Implement right-aligned items
(https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it.
- [x] Clean up CSS so base element has no background and add background
via tailwind instead.
- [x] Use it for org and user page.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 256a1eeb9a67b18c62a10f5909b584b7b220848a)
Conflicts:
options/locale/locale_en-US.ini
templates/package/content/cargo.tmpl
templates/package/content/cran.tmpl
templates/package/content/debian.tmpl
templates/package/content/maven.tmpl
A previous commit (via gitea#29638) changed the `.repository .data-table
.tr` CSS rule to forcibly override the background to `none`. This, in
turn, disabled the even-odd row coloring.
Doing so should be a preference of the theme used, and should not be
enforced by the core CSS rules. This patch removes the override.
Signed-off-by: Gergely Nagy <forgejo@gergo.csillger.hu>
Previously it was only partially styled, e.g. there was black text on
white background even in dark theme caused by fomantic styles.
<img width="195" alt="image"
src="bc5cf516-2aef-45c3-854a-c9f5497aacca">
<img width="195" alt="Screenshot 2024-03-09 at 02 09 29"
src="ef0af17d-6e0b-402e-b24d-bfa34dc2f4e0">
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 9b69f76e5a33788150f3abc3dee64010539c6b86)
Fomantic grey labels in the dashboard repo lists were showing original
fomantic colors, fixed that. Also slightly tweaked the light theme
colors so it uses same opacity values as dark theme.
<img width="165" alt="Screenshot 2024-03-07 at 21 06 23"
src="72744d6f-2ee1-4e5d-8ba0-b482a446f535">
<img width="167" alt="Screenshot 2024-03-07 at 21 06 00"
src="1ba93775-e5a9-4b28-b90f-59c1e9199687">
(cherry picked from commit 114bb505a3b0819db683d4b586e950df6a17bff8)
- Increase contrast overall
- Unalias the ansi color in dark theme and copy them to light
- Add outer border
- Add border radius
<img width="1337" alt="Screenshot 2024-03-06 at 22 30 03"
src="11407c0f-0bb2-435e-a034-22b1f106d9b0">
<img width="1335" alt="Screenshot 2024-03-06 at 22 36 59"
src="267db442-0979-4acc-a79e-8579b4cb0262">
(cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
Tested a few things, all working fine. Not sure if the chinese machine
translation is good.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 7e8c1c5ba18e1ac8861f429b825163b8210fd178)
Conflicts:
docs/content/contributing/guidelines-frontend.zh-cn.md
Gitea docs
Follow #29418
I think using "flex-wrap: wrap" here is better than hard-coding the screen width.
By using "flex-wrap: wrap", the UI layouts automatically for various
widths (even if in some languages, the sentence might be pretty long)
(cherry picked from commit ade62416917bc87810991585d7047851834ee316)
Fixes#29189.
This is the result after the fix at a width of 768 pixels.
(cherry picked from commit c660149a7079c2b06d4ee6dce2a45804d6d4d7f6)
Replace 18 `gt-` prefixes with `tw-` with perl replacement. I manually
checked them all with `rg` afterwards.
(cherry picked from commit a2e90014ec20a1085449a66061389cfe0d12260f)
Conflicts:
templates/repo/header.tmpl
because some of the header moved to header_fork.tmpl
Improve contrast by lightening the text colors in dark theme by around
35%. Additionally, share some variables that had the same or similar
color, which will ease future theme creation.
(cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
The buttons on the repo release tab were larger in height than on other
tabs because one of them contained the RSS icon which stretched the
button height by 3px. Workaround this problem by applying the "compact"
padding to any such button. They are within 0.4px in height now to
non-icon buttons.
Before:
<img width="406" alt="Screenshot 2024-02-28 at 15 30 23"
src="805bb93a-6fe4-40a0-82d1-03001bee8ecf">
After:
<img width="407" alt="Screenshot 2024-02-28 at 15 38 43"
src="27707588-890f-4852-ab08-105a57eda880">
For comparison, button on issue tab:
<img width="452" alt="Screenshot 2024-02-28 at 15 31 46"
src="74ac13d5-d016-49ba-9dd9-40ed32a748e9">
(cherry picked from commit 850fc2516e67049ec195c72d861896b275bd09d1)
Now uses the same primary color as light theme. The secondary colors are
shifted towards a slightly blue shade. Could maybe desaturate a bit
more, but overall I think I'm happy with it.
Fixes: https://github.com/go-gitea/gitea/issues/27097
<img width="1343" alt="Screenshot 2024-02-27 at 22 21 46"
src="4163c393-b469-4a53-8f4b-1c33aa04f3ac">
<img width="581" alt="image"
src="e621f7f8-5679-4605-bf42-3d5ff1071e1e">
<img width="581" alt="image"
src="20e66493-2457-482b-b8f1-e5710934e189">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit d557fbc5a715a1920a2860cb04ae6c8fe2225182)
The elements were hidden on small screens to preserve space and the
icons still conveyed the meaning for users with intact eye vision.
However, the names were no longer exposed to screen readers, and their
users usually cannot obtain the meaning from the icons.
Adding aria-labels to the affected templates results in certain
complexity due to the DOM, so instead I decided to use some accessible
CSS tricks to move the content off the screen instead of hiding it. It
should remain accessible for most screen readers.
While it might be favourable to have distinct focus and hover styling,
having no focus styling at all makes keyboard navigation very difficult.
Some people consider :focus to be equal to a keyboard-driven :hover, so
I'm moving the focus pseudo-classes from being a no-op to adding the
hover styling.
In a previous [PR](https://github.com/go-gitea/gitea/pull/28753) we
moved the labels to be above the inputs. The PR ensures that the
alignment is also on both tabs of the link account page
(`/user/link_account`).
Before
<img width="1094" alt="before"
src="ac1e86bd-c4d6-4e45-87d1-87bb8a736149">
After
<img width="1094" alt="after"
src="1b5fc109-f4d2-43ee-b924-0a9e53a0e391">
---------
Co-authored-by: rafh <rafaelheard@gmail.com>
(cherry picked from commit e4e5d76932e9d5ba1f8c63213aefae1493012a81)
- Trivial auto-fix applied.
- Removed CSS that was no longer needed (either was removed or upstream
already improved the CSS).
- Used existing variables for colors.
- Fix CSS selectors to match existing ones.
- Port 1fd7e3d6be to the Forgejo themes,
they are a copy paste, but have a bit darker console background color to
have better contrast and match better with the overal Forgejo dark
theme's shade.
1. Tweak diff header and remove a numbe of unneeded CSS for it:
Before:
<img width="433" alt="Screenshot 2024-02-18 at 01 08 09"
src="d8b377c0-57bc-44d5-bb57-a582c7d4b3b4">
After:
<img width="463" alt="Screenshot 2024-02-18 at 01 07 56"
src="d08c17e7-5b86-4d07-81da-6371f4754325">
3. Reduce height of review textarea and also reduce fomantic's CSS from
12em to 8em. Now fits better on my screen:
<img width="1352" alt="image"
src="5c658d13-295e-4929-94da-13ade888020d">
---------
Co-authored-by: delvh <dev.lh@web.de>
(cherry picked from commit 39f8ab591c18a65cf783ecd17ddc1a5914ceff7a)
There are a few inconsistencies within Gitea and this PR addresses one of them.
This PR updates the sign-in page layout, including the register and openID tabs,
to match the layout of the settings pages (`/user/settings`) for more consistency.
**Before**
<img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM"
src="fb0cb517-57c0-4eed-be1d-56f36bd1960d">
**After**
<img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM"
src="428d691d-0a42-4a67-a646-05527f2a7b41">
---------
Co-authored-by: rafh <rafaelheard@gmail.com>
(cherry picked from commit 1c14cd0c43d670fef984068e2666641ea5a062db)
- When previewing the content in a review, no font size was set. This
resulted in the previewed content being bigger than other text and
therefor creating an noticable inconsistency.
- Set the font size of the previewed content, 14px, this is consistent
with how the content would be rendered.
- `comment-code-cloud` is the class used for the review boxes.
`.ui.tab.markup` means it only applies to the preview tab.
This border-radius is obsolete since we changed the comment rendering a
few months ago and it caused incorrect display on blockquotes.
Before:
<img width="160" alt="Screenshot 2024-02-10 at 18 42 48"
src="ccbf4660-acf9-4268-aad9-1ad49d317a67">
After:
<img width="135" alt="Screenshot 2024-02-10 at 18 42 40"
src="6f588e02-3b2a-49ee-b459-81d8068b2f4e">
(cherry picked from commit 9063fa096386362f9ae602fdf8a39ae8c972b8e0)
It's too thick
I made it match GitHub's size
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit 5f5b5ba6e3e50ba5385e6cbf5957d4b73805769b)
- This is actually https://github.com/go-gitea/gitea/pull/19978 &
https://github.com/go-gitea/gitea/pull/19486 but was removed in one of
the UI refactors of v1.20
- This is a very technical fix and is best explained in the CSS
comments. But the short version: When there's an overflow being set, but
you want an element to 'break out' of that overflow with `position:
absolute`, it sometimes doesn't work! You need to set some CSS to let
the browser know that the element needs to use an element outside of
that overflow as 'clip parent'.
- Resolves my internal frustration with the mobile UI constantly getting broken.
(cherry picked from commit 879f842bed999190506e1d60508e7aede1a4be21)
(cherry picked from commit 6099c9b41b9a135fb14b41304459056050abbbe2)
(cherry picked from commit 0749d00b160033de0457e17baa1e000e68810d94)
(cherry picked from commit ec6a5428a7f05d8e6d2e8a6c476b2b9d35656b0f)
(cherry picked from commit 9d0bee784d387fac026d3dcc09f10e496a99a7c5)
(cherry picked from commit 61d6ae48828cb83ca3668a28ba8ddcb7fcb471d5)
(cherry picked from commit 8b3f3639b60ac6f3de8f9fcd83ac7a48bbd659f0)
(cherry picked from commit 2c600ddb2c3e76598b9bdbd58026ab76d7590470)
(cherry picked from commit 960a9786ef62eb8664bca129e9d4fae22e98f378)
(cherry picked from commit b194354c3b489879b10774174cc91a6915b43abc)
(cherry picked from commit 8e7915ee8c7061474b821f2275d11344b06bb9df)
(cherry picked from commit ba82b0c6fe217c44140b75f0afb0c92186460b23)
(cherry picked from commit b2dfb233a8f9c6d1ea82cd11891de20e02aed22b)
(cherry picked from commit ff3ec7f612c5c1cc743862e03a59c5fadd369401)
(cherry picked from commit ef01240cc7344d309a13d19a5e5d6a723c5c4557)
(cherry picked from commit 7778b5bb1019619cd0ed25ef6a0aad37ae978185)
(cherry picked from commit 5f949b1b07ff57a4fc17438ea44523e2f3a489f8)
(cherry picked from commit b3872096907177ee0226011ff181b80003be9c96)
(cherry picked from commit 5d7e3a542effdfe04ed906868eeebfbff8270ee4)
(cherry picked from commit ffef2231fb4abbee684a4ff7a51988d4977c3fe3)
(cherry picked from commit c74cf73ab4d98c0c2dd4b07c5e84696f897d60c9)
(cherry picked from commit 4aa9e9fca4e92f4573daa9738fa04fcfe19de364)
(cherry picked from commit 6b0dab3ba0aba46d114943f519fd318ec4cc4133)
(cherry picked from commit 374612f61b955778f6d30bd95de858ac14729a3e)
This PR adds colorblind theme variants of the forgejo themes. I duplicated the forjego light and dark themes and only changed the lines related to diff colors for added and removed rows/words.
I am not a designer, and I am also colorblind, so better suggestions of colors are most welcome. However, this is a good start as I can at least personally see the colors now. I got the colors for the dark theme from the GitHub diff colors, the light ones I couldn't get from GitHub as they use white as a plain background, which Forgejo's theme doesn't, so they were decided on after a bit of random testing.
Resolves#986
(cherry picked from commit dcdb4a372da814eda27065c58d03100f0589f0a7)
