Commit graph

999 commits

Author SHA1 Message Date
Yarden Shoham
f8a332c2e6
Remove jQuery class from the comment context menu (#30179)
- Switched from jQuery class functions to plain JavaScript
- Tested the comment context menu functionality and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 66f7d47d2c702bab4ca9bcedc1c0ba9ddfa49a17)
2024-04-07 15:40:31 +02:00
Yarden Shoham
0f1bd1be06
Remove jQuery class from the commit button (#30178)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the commit button disabled toggling functionality and it works
as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 42870cf40278e84024ccea41368312451f79a4d6)
2024-04-07 15:40:31 +02:00
Yarden Shoham
ecc78da55a
Remove jQuery class from the diff view (#30176)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the diff view functionality and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit c487a32bcd093affe3284282ea279d97f52a867f)
2024-04-07 15:40:31 +02:00
Yarden Shoham
6d164224e9
Remove jQuery class from the notification count (#30172)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the notification count and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 56ac5f18e8022242316d86c8f3091bce554faebb)
2024-04-07 15:40:31 +02:00
Yarden Shoham
811c14b8ba
Remove jQuery class from the code range selection (#30173)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the code range selection functionality and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit 911993429f3bec0ff4440c012b2a8f295673f961)
2024-04-07 15:40:31 +02:00
Yarden Shoham
ee33869f84
Remove jQuery class from the image diff (#30140)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the image diff and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 849eee8db70c8999d54350b85ea7a16fc44dc404)
2024-04-07 11:05:47 +02:00
silverwind
66f9a4ee68
Remove fomantic checkbox module (#30162)
CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on
admin page also still work. The only necessary JS is the one that links
`input` and `label` so that it can be toggled via label. All checkboxes
except the markdown ones render at `--checkbox-size: 16px` now.

<img width="174" alt="Screenshot 2024-03-28 at 22 15 10"
src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db">

<img width="499" alt="Screenshot 2024-03-28 at 21 00 07"
src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce">

<img width="83" alt="Screenshot 2024-03-28 at 22 14 34"
src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474">

---------

Co-authored-by: delvh <dev.lh@web.de>
(cherry picked from commit 8fd15990c5c8980caf2b9ffefc0b3427efacdc04)
2024-04-07 11:05:37 +02:00
silverwind
2e542f17a3
replace jquery-minicolors with coloris (#30055)
Get rid of one more jQuery dependant and have a nicer color picker as
well.

Now there is only a single global color picker init because that is all
that's necessary because the elements are present on the page when the
init code runs. The init is slightly weird because the module only takes
a selector instead of DOM elements directly.

The label modals now also perform form validation because previously it
was possible to trigger a 500 error `Color cannot be empty.` by clearing
out the color value on labels.

<img width="867" alt="Screenshot 2024-03-25 at 00 21 05"
src="https://github.com/go-gitea/gitea/assets/115237/71215c39-abb1-4881-b5c1-9954b4a89adb">
<img width="860" alt="Screenshot 2024-03-25 at 00 20 48"
src="https://github.com/go-gitea/gitea/assets/115237/a12cb68f-c38b-4433-ba05-53bbb4b1023e">

(cherry picked from commit dd8dde2be89921b2b1497c6cc5eafdde213429cb)
2024-04-07 11:02:33 +02:00
Gusted
d8eebe7698 Merge pull request 'Add optional pronoun field in user settings' (#1518) from hazy/forgejo:feat/pronoun-field into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/1518
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Gergely Nagy <algernon@noreply.codeberg.org>
2024-04-06 12:23:54 +00:00
wxiaoguang
c1ac3e5891
[PORT] Refactor dropzone (#30232)
Simplify code and use `.files` elements

(cherry picked from commit ca297a90fb1fec5b270fad1a3e575916510e7385)

Conflicts:
	web_src/js/features/repo-legacy.js
2024-04-05 09:23:51 +02:00
Mai-Lapyst
8c31b78630
Fixes regression of issue edit not working 2024-04-05 00:39:30 +02:00
hazycora
1c551f923b
only add name attribute to pronouns input in JS, to ensure fallback works 2024-04-03 15:16:40 -05:00
hazycora
454ceb2ada
add some comments 2024-04-03 15:16:40 -05:00
hazycora
8d086ad91c
change "any/all" to "any pronouns" 2024-04-03 15:15:53 -05:00
hazycora
12e00abe29
add any/all pronoun option to dropdown 2024-04-03 15:12:30 -05:00
hazycora
563e8b49e8
Add "Unspecified" option to pronouns dropdown 2024-04-03 15:12:29 -05:00
hazycora
994c6d3cde
move pronouns JS 2024-04-03 15:12:16 -05:00
Earl Warren
2e744dc991 Merge pull request 'Render inline file permalinks' (#2669) from Mai-Lapyst/forgejo:markup-add-filepreview into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2669
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
2024-04-01 13:57:01 +00:00
Gusted
ddc24177dd
[BUG] Render emojis in labels in issue info popup
- Currently emojis that are part of the label's name aren't rendered
when shown in the popup that you get when you hover over issue
references.
- This patch fixes that by rendering the emoji.
- Adds CSS to not make the emoji big in the label.
- Resolves #1531
2024-03-30 11:18:46 +01:00
Earl Warren
8f10247585
[BUG] Fix Ctrl+Enter on editor (followup)
s/$editContentZone/editContentZone/

because the variable was renamed by

Remove jQuery `.attr` from the code comments (#30112)
2024-03-30 07:17:32 +01:00
Yarden Shoham
d8fa9b1580
Remove jQuery from the user search form in admin page (#29151)
- Switched to plain JavaScript
- Tested the form and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit a8748eedae3518550bd43fd592d206df2bea6bef)

Conflicts:
	web_src/js/features/admin/users.js
	prefer Gitea version and discard jQuery specific fixes from
	Forbid jQuery `.prop` and fix related issues (#29832)
2024-03-30 07:17:32 +01:00
silverwind
bcfb7e0356
Migrate font-family to tailwind (#30118)
Enable us to use tailwind's
[`font-family`](https://tailwindcss.com/docs/font-family) classes as
well as remove `gt-mono` in favor of `tw-font-mono`. I also merged the
"compensation" to one selector, previously this was two different values
0.9em and 0.95em. I did not declare a `serif` font because I don't think
there will ever be a use case for those. Command ran:

```sh
perl -p -i -e 's#gt-mono#tw-font-mono#g' web_src/js/**/* templates/**/*

(cherry picked from commit 226a82a9396dc94f362ba27bd1c9318630df74b4)
2024-03-30 07:17:32 +01:00
silverwind
47c61f909c
Drag-and-drop improvements for projects and issue pins (#29875)
1. Add "grabbing" cursor while dragging items:

![](https://github.com/go-gitea/gitea/assets/115237/c60845ff-7544-4215-aeaa-408e8c4ef03a)

2. Make project board only drag via their header, not via their whole
body.

![](https://github.com/go-gitea/gitea/assets/115237/62c27f3d-993a-481d-9cc3-b6226b4c5d61)

3. Fix some cursor problems in projects
4. Move shared options into `createSortable`.

(cherry picked from commit 7fda109aba6cd077343edef086b2f2ff60124f78)
2024-03-30 07:17:31 +01:00
Denys Konovalov
8ffb9c6fb1
Add default board to new projects, remove uncategorized pseudo-board (#29874)
On creation of an empty project (no template) a default board will be
created instead of falling back to the uneditable pseudo-board.

Every project now has to have exactly one default boards. As a
consequence, you cannot unset a board as default, instead you have to
set another board as default. Existing projects will be modified using a
cron job, additionally this check will run every midnight by default.

Deleting the default board is not allowed, you have to set another board
as default to do it.

Fixes #29873
Fixes #14679 along the way
Fixes #29853

Co-authored-by: delvh <dev.lh@web.de>
(cherry picked from commit e5160185ed65fd1c2bcb2fc7dc7e0b5514ddb299)

Conflicts:
	options/locale/locale_en-US.ini
	trivial conflict because Forgejo strings do not have
	surrounding double quotes
2024-03-30 07:17:31 +01:00
silverwind
d67e7ae25a
Fix loading spinner on ContextPopup (#30145)
Fix regression from https://github.com/go-gitea/gitea/pull/26670. Here
with simulated delay:

![](https://github.com/go-gitea/gitea/assets/115237/9de5a136-c8a6-4d69-adc7-07e1184e3311)

(cherry picked from commit 4eb86d68233241d53cff1009ecff17ac35efccd4)
2024-03-30 07:17:31 +01:00
silverwind
8d2b764607
Fix download buttons on branches page (#30147)
Fixes https://github.com/go-gitea/gitea/issues/30143, regression from
https://github.com/go-gitea/gitea/pull/29920.

We have `.button` on the repo page, but on the branch page it's a
`.btn`. Eventually we should find a solution to have a single button
class but until then this solution should be acceptable.

(cherry picked from commit c85619b82d19a928cb219eba3f38473928b29b0c)
2024-03-30 07:17:31 +01:00
Yarden Shoham
708fdf2da9
Remove jQuery class from the common admin functions (#30137)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the new authentication source form and the deletion of system
notices. They work as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 1551d73d3f95284965675b828e1eeceafa378437)
2024-03-30 07:17:31 +01:00
Yarden Shoham
36ee0745cc
Remove jQuery class from the reaction selector (#30138)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the reaction selector and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 1a71dbfb7881f65d39b689a5be26cc94afefb10f)
2024-03-30 07:17:31 +01:00
Yarden Shoham
bdc3f7beb1
Remove jQuery .attr from the Fomantic dropdowns (#30114)
- Switched from jQuery `attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested the dropdowns and they work as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 0922ce8191ae83834b89b59c5c504209a8a0558e)
2024-03-30 07:17:31 +01:00
Yarden Shoham
b95a893b22
Remove jQuery .attr from the common admin functions (#30115)
- Switched from jQuery `attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested most of the functions and they work as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit a190f68f1bf92554923a4adde50e5cbc637a2a2e)
2024-03-30 07:17:31 +01:00
Yarden Shoham
4249512c73
Remove jQuery from the create/rename branch modals (except Fomantic) (#30109)
- Switched to plain JavaScript
- Tested the create/rename branch modals' functionality and they work as
before

# Demo using JavaScript without jQuery

![demo](https://github.com/go-gitea/gitea/assets/20454870/ca53155e-856e-44ca-9852-12ff60065735)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 4efe7884a3c99235b39998472ea430bffe0799e5)
2024-03-30 07:17:31 +01:00
HEREYUA
8c2559a726
When the title in the issue has a value, set the text cursor at the end of the text. (#30090)
Fix:  [#25055](https://github.com/go-gitea/gitea/issues/25055)

Before

![image](https://github.com/go-gitea/gitea/assets/37935145/1b89cd7b-4fa3-49aa-9b5e-a8413add436e)

After

![image](https://github.com/go-gitea/gitea/assets/37935145/fa808f8d-d3ce-4245-a4fe-dd0282ba3fdf)

ps: I've noticed that we are gradually replacing jQuery, so I didn't use jQuery here.
(cherry picked from commit 1261dd6742fb7095e51c173ca4641477d81a3634)
2024-03-30 07:17:31 +01:00
silverwind
43db1e81c1
Fix click handler in job-step-summary (#30122)
Fix mistake from https://github.com/go-gitea/gitea/pull/29977 where the
click handler wasn't updated for the change with the `isExpandable`
function.

(cherry picked from commit 57539bcdc024110c890320e3e785bf3d6ad6df55)
2024-03-30 07:17:31 +01:00
Yarden Shoham
544e66ec3a
Remove jQuery .attr from the Fomantic modal cancel buttons (#30113)
- Switched from jQuery `attr` to plain javascript `setAttribute`
- Tested the modals and they work as before

---------

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit f47e00d9d3c3bd58b5944a29c4ff5cec0357520a)
2024-03-30 07:17:30 +01:00
Yarden Shoham
0cf308107e
Remove jQuery .attr from the code comments (#30112)
- Switched from jQuery `attr` to plain javascript `getAttribute`
- Tested the code comments and they work as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 5687aca4fc9aef44e1fb5af655b2320d18583dbd)
2024-03-30 07:17:30 +01:00
Yarden Shoham
95024f1486
Remove jQuery calls that have no effect on showElem and hideElem (#30110)
There's no need to initialize a jQuery object with a CSS selector when
we can pass the CSS selector directly.

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit a1f11e2e33f20409eac65b2d0e9a7cd7c767eb72)
2024-03-30 07:17:30 +01:00
Yarden Shoham
7e0dfa07ba
Remove jQuery .attr from the common issue page functions (#30083)
- Switched from jQuery `attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested most of the functions and they work as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>
(cherry picked from commit e0b018706fa7703ef1759d9a75a1399383715808)
2024-03-30 07:17:30 +01:00
silverwind
f77922ce4e
Update JS any PY dependencies, remove workarounds (#30085)
- Update dependencies via `make update-js update-py svg`
- Remove `postcss` workaround -
https://github.com/postcss/postcss/issues/1914
- Remove `happy-dom` workaround -
https://github.com/capricorn86/happy-dom/pull/1365.
- Tested Katex and Asciinema

(cherry picked from commit c1ac72150885b327f56ea61273e27b16d6da5435)
2024-03-30 07:17:30 +01:00
silverwind
82e83d3076
Fix alignment in actions right view (#29979)
Fixes: https://github.com/go-gitea/gitea/issues/29974, Regression from
https://github.com/go-gitea/gitea/pull/29640.

Depending on the number of steps on the left side, the right side will
vertically expand. Collapse it with `align-self`.

<img width="1308" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/9bcede9c-d869-4f3f-8a10-026c74c03f71">

(cherry picked from commit a4455d313e2c129dc9734292035b89339577174d)
2024-03-30 07:17:30 +01:00
Yarden Shoham
e8c5406971
Remove jQuery .attr from the code line range selection (#30077)
- Switched from jQuery `attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested the code line range selection and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit a9a5734185a1a2837cfae42de7b17cf41dbb218a)
2024-03-30 07:17:30 +01:00
silverwind
c55e30ff13
Refactor all .length === 0 patterns in JS (#30045)
This pattern comes of often during review, so let's fix it once and for
all. Did not test, but changes are trivial enough imho.

(cherry picked from commit 8fe26fb314f1710139728d9118b455fc6a16cce2)
2024-03-30 07:17:30 +01:00
Yarden Shoham
8e3e31a566
Remove jQuery .attr from the reaction selector (#30052)
- Switched from jQuery `attr` to plain javascript `getAttribute`
- Tested the reaction selector and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit 2e31a2800e1112ee0ab5a8d3c66b0fba2e737870)
2024-03-30 07:17:29 +01:00
Yarden Shoham
8557c6ae43
Remove jQuery .attr from the ComboMarkdownEditor (#30051)
- Switched from jQuery `attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested the markdown editor and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit 428e05662f4f745fe7fef04ce9218a86aa4f1b6c)
2024-03-30 07:17:29 +01:00
Yarden Shoham
e9b729fc46
Remove jQuery .attr from the label edit exclusive checkbox (#30053)
- Switched from jQuery `attr` to plain javascript `getAttribute`
- Tested the label edit exclusive checkbox and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit a7d0c5de4c82d8d206f6c5c51f012ee831502f67)
2024-03-30 07:17:29 +01:00
Yarden Shoham
91f8164012
Remove jQuery .attr from the repository topic bar (#30050)
- Switched from jQuery `.attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested the repository topic bar. It works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit 314cd1ec98b1ea015e7585d3f6f5d08218379399)
2024-03-30 07:17:29 +01:00
silverwind
5016bc5d5c
Migrate gt-hidden to tw-hidden (#30046)
We have to define this one in helpers.css because tailwind only
generates a single class but certain things rely on this being
double-class. Command ran:

```sh
perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/*

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit ec3d467f15a683b305ac165c3eba6683628dcb25)

Conflicts:
	templates/install.tmpl
	templates/repo/diff/conversation.tmpl
	templates/repo/issue/view_content/conversation.tmpl
	templates/repo/issue/view_content/sidebar.tmpl
	templates/repo/issue/view_title.tmpl

	resolved by prefering Forgejo version and applying the
	commands to all files
2024-03-30 07:17:29 +01:00
silverwind
e28f4328b3
Forbid jQuery is and fix issues (#30016)
Tested all functionality.

---------

Co-authored-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit 0a2f973de9b681a472c96bdfcd945978e88458d8)
2024-03-30 07:17:29 +01:00
silverwind
c82bef515e
Migrate margin and padding helpers to tailwind (#30043)
This will conclude the refactor of 1:1 class replacements to tailwind,
except `gt-hidden`. Commands ran:

```bash
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-0#tw-$1$2-0#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-1#tw-$1$2-0.5#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-2#tw-$1$2-1#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-3#tw-$1$2-2#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-4#tw-$1$2-4#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-5#tw-$1$2-8#g'   {web_src/js,templates,routers,services}/**/*
```

(cherry picked from commit 68ec9b48592fe88765bcc3a73093d43c98b315de)

Conflicts:
	routers/web/repo/view.go
	templates/base/head_navbar.tmpl
	templates/repo/code/recently_pushed_new_branches.tmpl
	templates/repo/diff/box.tmpl
	templates/repo/diff/compare.tmpl
	templates/repo/diff/conversation.tmpl
	templates/repo/header.tmpl
	templates/repo/issue/filter_list.tmpl
	templates/repo/issue/view_content/conversation.tmpl
	templates/repo/issue/view_content/sidebar.tmpl
	templates/repo/settings/options.tmpl
	templates/repo/view_file.tmpl
	templates/shared/user/blocked_users.tmpl
	templates/status/500.tmpl
	web_src/js/components/DashboardRepoList.vue
	resolved by prefering Forgejo version and applying the
	commands to all files
2024-03-30 07:17:29 +01:00
silverwind
a579a0f318
[Port] gitea#30014: Various code view improvements
1. Restore missing styles for message close icon
2. Move `code-line-button` so that it does not go off-screen on small
viewports
3. Make `code-line-button` look and behave like other buttons
4. Make `code-line-button` work in blame
5. Make the active selection span the whole line, not just the code part
6. Tweak colors, make dark theme code bg darker, make line numbers same
color in diff and file view.
7. Move code background to parent, fixing border radius and other
problems
8. Enable code wrap in blame
9. Improve blame responsiveness
10. Remove `--color-code-sidebar-bg` in blame, now it uses same
background as code
11. Rename `--color-active-line` to `--color-highlight-bg`
12. Add `--color-highlight-bg`
13. Fix button group borders on hover and border-right on last button.

<img width="1343" alt="Screenshot 2024-03-23 at 22 34 13"
src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554">
<img width="1334" alt="Screenshot 2024-03-23 at 22 34 26"
src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d">

<img width="1338" alt="Screenshot 2024-03-23 at 22 34 57"
src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac">
<img width="1337" alt="Screenshot 2024-03-23 at 22 34 42"
src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85">

Fixes: https://github.com/go-gitea/gitea/issues/18074

---

Conflict resolution: Trivial.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
2024-03-28 16:43:14 +01:00
silverwind
18d13000e9
[PORT] gitea#29831: Prevent layout shift in <overflow-menu> items
There is a small layout shift in when active tab changes. Notice how the
actions SVG is unstable:

![](https://github.com/go-gitea/gitea/assets/115237/a6928e89-5d47-4a91-8f36-1fa22fddbce7)

This is because the active item with bold text is wider then the
inactive one. I have applied [this
trick](https://stackoverflow.com/a/32570813/808699) to prevent this
layout shift. It's only active inside `<overflow-menu>` because I wanted
to avoid changing HTML and doing it in regular JS would cause a flicker.
I don't expect us to introduce other similar menus without
`<overflow-menu>`, so that place is likely fine.

![after](https://github.com/go-gitea/gitea/assets/115237/d6089924-8de6-4ee0-8db4-15f16069a131)

I also changed the weight from 500 to 600, slightly reduced horizontal
padding, merged some tab-bar related CSS rules and a added a small
margin below repo-header so it does not look so crammed against the
buttons on top.

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

---

Conflict resolution: Moved an `:focus` selector to the new CSS rule.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 99d7ef50917e8d61798715e1b0b3dc1a99709f27)
2024-03-28 16:09:14 +01:00