-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Prevent layout shift in <overflow-menu>
items
#29831
Conversation
<overflow-menu>
items<overflow-menu>
items
<overflow-menu>
items<overflow-menu>
items
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would prefer either:
- Make all "tab" items use the same normal font weight
- Make all "tab" items use the same semi-bold font weight
Instead of this trick .....
TBH I do not see toggling the font weight for tab items would really help the user experence.
I do prefer active tab to be bold, it gives a visual distinction. Imho, it's better than color alone. The only other option i consider is making all normal weight and distinguish by color alone. |
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* origin/main: Fix loadOneBranch panic (go-gitea#29938) Fix comment review avatar alignment (go-gitea#29935) Remove the negative margin from `.page-content` (go-gitea#29922) Move notifications to a standalone file (go-gitea#29930) Remove unnecessary ".Link" usages (go-gitea#29929) Remove unnecessary ".Link" usages (go-gitea#29909) Show Actions post step when it's running (go-gitea#29926) Fix the wrong default value of ENABLE_OPENID_SIGNIN on docs (go-gitea#29925) Restore deleted branches when syncing (go-gitea#29898) Don't lock using GitHub actions (go-gitea#29913) Remove jQuery `.attr` from the user search box (go-gitea#29919) Remove jQuery `.attr` from the archive download and compare page branch selector (go-gitea#29918) Remove jQuery `.attr` from the image diff (go-gitea#29917) Remove jQuery `.attr` from the quick pull request button text (go-gitea#29916) Remove jQuery `.attr` from the issue author dropdown (go-gitea#29915)
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>
* giteaofficial/main: (34 commits) Refactor URL detection (go-gitea#29960) Solving the issue of UI disruption when the review is deleted without refreshing (go-gitea#29951) Fix JS error and improve error message styles (go-gitea#29963) Fix the bug that user may logout if he switch pages too fast (go-gitea#29962) Cancel previous runs of the same PR automatically (go-gitea#29961) Exclude `routers/private/tests` from air (go-gitea#29949) Remove codecov badge (go-gitea#29950) Misc color tweaks (go-gitea#29943) Fix and rewrite markup anchor processing (go-gitea#29931) Remove fomantic grid module (go-gitea#29894) Add background to dashboard navbar, fix missing padding (go-gitea#29940) Prevent layout shift in `<overflow-menu>` items (go-gitea#29831) Fix loadOneBranch panic (go-gitea#29938) Fix comment review avatar alignment (go-gitea#29935) Remove the negative margin from `.page-content` (go-gitea#29922) Move notifications to a standalone file (go-gitea#29930) Remove unnecessary ".Link" usages (go-gitea#29929) Remove unnecessary ".Link" usages (go-gitea#29909) Show Actions post step when it's running (go-gitea#29926) Fix the wrong default value of ENABLE_OPENID_SIGNIN on docs (go-gitea#29925) ... # Conflicts: # templates/user/dashboard/issues.tmpl
* origin/main: (332 commits) Refactor external URL detection (go-gitea#29973) Refactor repo header/list (go-gitea#29969) Fix various loading states, remove `.loading` class (go-gitea#29920) Update register application URL for GitLab (go-gitea#29959) Refactor StringsToInt64s (go-gitea#29967) Switch to happy-dom for testing (go-gitea#29948) Performance improvements for pull request list page (go-gitea#29900) Refactor URL detection (go-gitea#29960) Solving the issue of UI disruption when the review is deleted without refreshing (go-gitea#29951) Fix JS error and improve error message styles (go-gitea#29963) Fix the bug that user may logout if he switch pages too fast (go-gitea#29962) Cancel previous runs of the same PR automatically (go-gitea#29961) Exclude `routers/private/tests` from air (go-gitea#29949) Remove codecov badge (go-gitea#29950) Misc color tweaks (go-gitea#29943) Fix and rewrite markup anchor processing (go-gitea#29931) Remove fomantic grid module (go-gitea#29894) Add background to dashboard navbar, fix missing padding (go-gitea#29940) Prevent layout shift in `<overflow-menu>` items (go-gitea#29831) Fix loadOneBranch panic (go-gitea#29938) ...
1. Extend concept of #29831 to all tabular menus, there were only three left that weren't already `<overflow-menu>`. <img width="634" alt="Screenshot 2024-05-27 at 00 42 16" src="https://github.com/go-gitea/gitea/assets/115237/d9a7e219-d05e-40a1-9e93-777f9a8a90dd"> <img width="965" alt="Screenshot 2024-05-27 at 00 29 32" src="https://github.com/go-gitea/gitea/assets/115237/e6ed71b1-11fb-4a74-9adb-af4524286cff"> 2. Remove extra padding on `fluid padded` container like for example PR diff view. The page margin is already correctly sized via `.ui.container`, so this was just extraneous padding that looked ugly. Before: <img width="1351" alt="Screenshot 2024-05-27 at 00 45 11" src="https://github.com/go-gitea/gitea/assets/115237/4b45fd11-b1b2-4fbb-a618-26eb22be9472"> After: <img width="1344" alt="Screenshot 2024-05-27 at 00 45 22" src="https://github.com/go-gitea/gitea/assets/115237/d09593eb-6c7f-45e7-85b6-f0050047004b"> 3. Replace `gt-word-break` with `tw-break-anywhere` in issue-title, fixing overflow. Before: <img width="1333" alt="Screenshot 2024-05-27 at 00 50 14" src="https://github.com/go-gitea/gitea/assets/115237/64d15d04-b456-401e-a972-df636965f0eb"> After: <img width="1316" alt="Screenshot 2024-05-27 at 00 50 26" src="https://github.com/go-gitea/gitea/assets/115237/ed1ce830-1408-414b-8263-eeaf773f52c8">
) 1. Extend concept of go-gitea#29831 to all tabular menus, there were only three left that weren't already `<overflow-menu>`. <img width="634" alt="Screenshot 2024-05-27 at 00 42 16" src="https://github.com/go-gitea/gitea/assets/115237/d9a7e219-d05e-40a1-9e93-777f9a8a90dd"> <img width="965" alt="Screenshot 2024-05-27 at 00 29 32" src="https://github.com/go-gitea/gitea/assets/115237/e6ed71b1-11fb-4a74-9adb-af4524286cff"> 2. Remove extra padding on `fluid padded` container like for example PR diff view. The page margin is already correctly sized via `.ui.container`, so this was just extraneous padding that looked ugly. Before: <img width="1351" alt="Screenshot 2024-05-27 at 00 45 11" src="https://github.com/go-gitea/gitea/assets/115237/4b45fd11-b1b2-4fbb-a618-26eb22be9472"> After: <img width="1344" alt="Screenshot 2024-05-27 at 00 45 22" src="https://github.com/go-gitea/gitea/assets/115237/d09593eb-6c7f-45e7-85b6-f0050047004b"> 3. Replace `gt-word-break` with `tw-break-anywhere` in issue-title, fixing overflow. Before: <img width="1333" alt="Screenshot 2024-05-27 at 00 50 14" src="https://github.com/go-gitea/gitea/assets/115237/64d15d04-b456-401e-a972-df636965f0eb"> After: <img width="1316" alt="Screenshot 2024-05-27 at 00 50 26" src="https://github.com/go-gitea/gitea/assets/115237/ed1ce830-1408-414b-8263-eeaf773f52c8">
…1099) Backport #31090 by @silverwind 1. Extend concept of #29831 to all tabular menus, there were only three left that weren't already `<overflow-menu>`. <img width="634" alt="Screenshot 2024-05-27 at 00 42 16" src="https://github.com/go-gitea/gitea/assets/115237/d9a7e219-d05e-40a1-9e93-777f9a8a90dd"> <img width="965" alt="Screenshot 2024-05-27 at 00 29 32" src="https://github.com/go-gitea/gitea/assets/115237/e6ed71b1-11fb-4a74-9adb-af4524286cff"> 2. Remove extra padding on `fluid padded` container like for example PR diff view. The page margin is already correctly sized via `.ui.container`, so this was just extraneous padding that looked ugly. Before: <img width="1351" alt="Screenshot 2024-05-27 at 00 45 11" src="https://github.com/go-gitea/gitea/assets/115237/4b45fd11-b1b2-4fbb-a618-26eb22be9472"> After: <img width="1344" alt="Screenshot 2024-05-27 at 00 45 22" src="https://github.com/go-gitea/gitea/assets/115237/d09593eb-6c7f-45e7-85b6-f0050047004b"> 3. Replace `gt-word-break` with `tw-break-anywhere` in issue-title, fixing overflow. Before: <img width="1333" alt="Screenshot 2024-05-27 at 00 50 14" src="https://github.com/go-gitea/gitea/assets/115237/64d15d04-b456-401e-a972-df636965f0eb"> After: <img width="1316" alt="Screenshot 2024-05-27 at 00 50 26" src="https://github.com/go-gitea/gitea/assets/115237/ed1ce830-1408-414b-8263-eeaf773f52c8"> Co-authored-by: silverwind <me@silverwind.io>
This release stands as a monumental milestone in our development journey with a record-breaking incorporation of [1528](https://github.com/go-gitea/gitea/pulls?q=is%3Apr+milestone%3A1.22.0+is%3Amerged) pull requests. It marks the most extensive update in Gitea's history, showcasing a plethora of new features and infrastructure improvements. Noteworthy advancements in this release include the introduction of `HTMX` and `Tailwind`, signaling a strategic shift as we gradually phase out `jquery` and `Fomantic UI`. These changes reflect our commitment to embracing modern technologies and enhancing the user experience. Key highlights of this release encompass significant changes categorized under `BREAKING`, `FEATURES`, `ENHANCEMENTS`, and `PERFORMANCE`, each contributing to a more robust and efficient Gitea platform. * BREAKING * Improve reverse proxy documents and clarify the AppURL guessing behavior (go-gitea#31003) (go-gitea#31020) * Remember log in for a month by default (go-gitea#30150) * Breaking summary for template refactoring (go-gitea#29395) * All custom templates need to follow these changes * Recommend/convert to use case-sensitive collation for MySQL/MSSQL (go-gitea#28662) * Make offline mode as default to not connect external avatar service by default (go-gitea#28548) * Include public repos in the doer's dashboard for issue search (go-gitea#28304) * Use restricted sanitizer for repository description (go-gitea#28141) * Support storage base path as prefix (go-gitea#27827) * Enhanced auth token / remember me (go-gitea#27606) * Rename the default themes to `gitea-light`, `gitea-dark`, `gitea-auto` (go-gitea#27419) * If you didn't see the new themes, please remove the `[ui].THEMES` config option from `app.ini` * Require MySQL 8.0, PostgreSQL 12, MSSQL 2012 (go-gitea#27337) * FEATURES * Allow everyone to read or write a wiki by a repo unit setting (go-gitea#30495) * Use raw Wiki links for non-renderable Wiki files (go-gitea#30273) * Render embedded code preview by permalink in markdown (go-gitea#30234) (go-gitea#30249) * Support repo code search without setting up an indexer (go-gitea#29998) * Support pasting URLs over markdown text (go-gitea#29566) * Allow to change primary email before account activation (go-gitea#29412) * Customizable "Open with" applications for repository clone (go-gitea#29320) * Allow options to disable user deletion from the interface on app.ini (go-gitea#29275) * Extend issue template YAML engine (go-gitea#29274) * Add support for `linguist-detectable` and `linguist-documentation` (go-gitea#29267) * Implement code frequency graph (go-gitea#29191) * Show commit status for releases (go-gitea#29149) * Add user blocking (go-gitea#29028) * Actions Artifacts v4 backend (go-gitea#28965) * Add merge style `fast-forward-only` (go-gitea#28954) * Retarget depending pulls when the parent branch is deleted (go-gitea#28686) * Add global setting on how timestamps should be rendered (go-gitea#28657) * Implement actions badge SVGs (go-gitea#28102) * Add skip ci functionality (go-gitea#28075) * Show latest commit for file (go-gitea#28067) * Allow to sync tags from the admin dashboard (go-gitea#28045) * Add Profile Readme for Organisations (go-gitea#27955) * Implement contributors graph (go-gitea#27882) * Artifact deletion in actions ui (go-gitea#27172) * Add API routes to get runner registration token (go-gitea#27144) * Add support for forking single branch (go-gitea#25821) * Add support for sha256 repositories (go-gitea#23894) * Add admin API route for managing user's badges (go-gitea#23106) * ENHANCEMENTS * Make gitea webhooks openproject compatible (go-gitea#28435) (go-gitea#31081) * Support using label names when changing issue labels (go-gitea#30943) (go-gitea#30958) * Fix various problems around project board view (go-gitea#30696) (go-gitea#30902) * Improve context popup rendering (go-gitea#30824) (go-gitea#30829) * Allow to save empty comment (go-gitea#30706) * Prevent allow/reject reviews on merged/closed PRs (go-gitea#30686) * Initial support for colorblindness-friendly themes (go-gitea#30625) * Some NuGet package enhancements (go-gitea#30280) (go-gitea#30324) * Markup color and font size fixes (go-gitea#30282) (go-gitea#30310) * Show 12 lines in markup code preview (go-gitea#30255) (go-gitea#30257) * Add `[other].SHOW_FOOTER_POWERED_BY` setting to hide `Powered by` (go-gitea#30253) * Pulse page improvements (go-gitea#30149) * Render code tags in commit messages (go-gitea#30146) * Prevent re-review and dismiss review actions on closed and merged PRs (go-gitea#30065) * Cancel previous runs of the same PR automatically (go-gitea#29961) * Drag-and-drop improvements for projects and issue pins (go-gitea#29875) * Add default board to new projects, remove uncategorized pseudo-board (go-gitea#29874) * Prevent layout shift in `<overflow-menu>` items (go-gitea#29831) * Add skip ci support for pull request title (go-gitea#29774) * Add more stats tables (go-gitea#29730) * Update API to return 'source_id' for users (go-gitea#29718) * Determine fuzziness of bleve indexer by keyword length (go-gitea#29706) * Expose fuzzy search for issues/pulls (go-gitea#29701) * Put an edit file button on pull request files to allow a quick operation (go-gitea#29697) * Fix action runner offline label padding (go-gitea#29691) * Update allowed attachment types (go-gitea#29688) * Completely style the webkit autofill (go-gitea#29683) * Highlight archived labels (go-gitea#29680) * Add a warning for disallowed email domains (go-gitea#29658) * Set user's 24h preference from their current OS locale (go-gitea#29651) * Add setting to disable user features when user login type is not plain (go-gitea#29615) * Improve natural sort (go-gitea#29611) * Make wiki default branch name changeable (go-gitea#29603) * Unify search boxes (go-gitea#29530) * Add support for API blob upload of release attachments (go-gitea#29507) * Detect broken git hooks (go-gitea#29494) * Sync branches to DB immediately when handling git hook calling (go-gitea#29493) * Allow options to disable user GPG key configuration from the interface on app.ini (go-gitea#29486) * Allow options to disable user SSH key configuration from the interface on app.ini (go-gitea#29447) * Use relative links for commits, mentions, and issues in markdown (go-gitea#29427) * Add `<overflow-menu>`, rename webcomponents (go-gitea#29400) * Include resource state events in Gitlab downloads (go-gitea#29382) * Properly migrate target branch change GitLab comment (go-gitea#29340) * Recolor dark theme to blue shade (go-gitea#29283) * Partially enable MSSQL case-sensitive collation support (go-gitea#29238) * Auto-update the system status in the admin dashboard (go-gitea#29163) * Integrate alpine `noarch` packages into other architectures index (go-gitea#29137) * Document how the TOC election process works (go-gitea#29135) * Tweak repo header (go-gitea#29134) * Make blockquote border size less aggressive (go-gitea#29124) * Downscale pasted PNG images based on metadata (go-gitea#29123) * Show `View at this point in history` for every commit (go-gitea#29122) * Add support for action artifact serve direct (go-gitea#29120) * Change webhook-type in create-view (go-gitea#29114) * Drop "@" from the email sender to avoid spam filters (go-gitea#29109) * Allow non-admin users to delete review requests (go-gitea#29057) * Improve user search display name (go-gitea#29002) * Include username in email headers (go-gitea#28981) * Show whether a PR is WIP inside popups (go-gitea#28975) * Also match weakly validated ETags (go-gitea#28957) * Support nuspec manifest download for Nuget packages (go-gitea#28921) * Fix hardcoded GitHub icon used as migrated release avatar (go-gitea#28910) * Propagate install_if and provider_priority to APKINDEX (go-gitea#28899) * Add artifacts v4 JWT to job message and accept it (go-gitea#28885) * Enable/disable owner and repo projects independently (go-gitea#28805) * Add non-JS fallback for reaction tooltips (go-gitea#28785) * Add the ability to see open and closed issues at the same time (go-gitea#28757) * Move sign-in labels to be above inputs (go-gitea#28753) * Display the latest sync time for pull mirrors on the repo page (go-gitea#28712) * Show in Web UI if the file is vendored and generated (go-gitea#28620) * Add orphaned topic consistency check (go-gitea#28507) * Add branch protection setting for ignoring stale approvals (go-gitea#28498) * Add option to set language in admin user view (go-gitea#28449) * Fix incorrect run order of action jobs (go-gitea#28367) * Add missing exclusive in advanced label options (go-gitea#28322) * Added instance-level variables (go-gitea#28115) * Add edit option for README.md (go-gitea#28071) * Fix link to `Code` tab on wiki commits (go-gitea#28041) * Allow to set explore page default sort (go-gitea#27951) * Improve PR diff view on mobile (go-gitea#27883) * Properly migrate automatic merge GitLab comments (go-gitea#27873) * Display issue task list on project cards (go-gitea#27865) * Add Index to pull_auto_merge.doer_id (go-gitea#27811) * Fix display member unit in the menu bar if there are no hidden members in public org (go-gitea#27795) * List all Debian package versions in `Packages` (go-gitea#27786) * Allow pull requests Manually Merged option to be used by non-admins (go-gitea#27780) * Only show diff file tree when more than one file changed (go-gitea#27775) * Show placeholder email in privacy popup (go-gitea#27770) * Revamp repo header (go-gitea#27760) * Add `must-change-password` command line parameter (go-gitea#27626) * Unify password changing and invalidate auth tokens (go-gitea#27625) * Add border to file tree 'sub-items' and add padding to 'item-file' (go-gitea#27593) * Add slow SQL query warning (go-gitea#27545) * Pre-register OAuth application for tea (go-gitea#27509) * Differentiate between `push` and `pull` `mirror sync in progress` (go-gitea#27390) * Link to file from its history (go-gitea#27354) * Add a shortcut to user's profile page to admin user details (go-gitea#27299) * Doctor: delete action entries without existing user (go-gitea#27292) * Show total TrackedTime on issue/pull/milestone lists (go-gitea#26672) * Don't show the new pull request button when the page is not compare pull (go-gitea#26431) * Add `Hide/Show all checks` button to commit status check (go-gitea#26284) * Improvements of releases list and tags list (go-gitea#25859) * PERFORMANCE * Fix package list performance (go-gitea#30520) (go-gitea#30616) * Add commit status summary table to reduce query from commit status table (go-gitea#30223) * Refactor markup/csv: don't read all to memory (go-gitea#29760) * Lazy load object format with command line and don't do it in OpenRepository (go-gitea#29712) * Add cache for branch divergence on branch list page (go-gitea#29577) * Do some performance optimization for issues list and view issue/pull (go-gitea#29515) * Cache repository default branch commit status to reduce query on commit status table (go-gitea#29444) * Use `crypto/sha256` (go-gitea#29386) * Some performance optimization on the dashboard and issues page (go-gitea#29010) * Add combined index for issue_user.uid and issue_id (go-gitea#28080) # -----BEGIN PGP SIGNATURE----- # # iQIzBAABCAAdFiEEumb2f9c/cFjXEtMIw7fJG2Mvc4oFAmZUPBEACgkQw7fJG2Mv # c4polxAAjJgg1UISxasNGbX/V4G2P9eeXam9lQ5DYAGS6d+RYdTcYdGSbOZujIGG # cVqoZjYCJm7b3KuL1Jjrf7sIAjPB3E9gO8aJ3r+6PGjRpMwCACPUlCo8QWRPDhcU # /eWleWFs59ZMxHnHT3oLH0TGwbdY4tc35/iKElUIc6sX8WBal0SsYScfBJrRTtS/ # DxBaovmkiG0RUWHK3mK0zHrRW9nJecz/4XFWIHgBjKzvCHlzSYrOjUPvytERlWtO # o7i+1Wsret1JLWoW53L3ZQIXCwBBLYjsan9oq7YgSD0Usl9En3o0+S06+TVNiWMp # MNbOQt2SQsIJPPP83pql+rPbKqAp1dibWXLF70mJrBVpdw/b0VHK2K8fIa5Eiilk # EOR9D8uoOgjvxWVjNI9Gg+lzbT0KoQI90Iexwcloq22MDFPJC3EqirDpwBdkZFJA # 5/6iGvPILD1SVkAzjdMD6Ukc8zWwPVLENwcTCVxr8H2q6/Jbo+29WIlCM+/0a0t3 # 1kN77Yx1So9VFUOqPjHsoO72Wc/Zved1ZDqg9UgqP6L2dH2ns0mh92QM+Pplqi2T # NsJQih4NeZsfDQ7rm0oMcvFqV21a62zZYDi/KqFePRAs5D9K4PU2EmR7jcvf4uax # ZRyHsqDh00/OSYE/CefriyIMshWmTVCDbT/I3/SCXZX1scrKa3k= # =UO/N # -----END PGP SIGNATURE----- # gpg: Signature made Mon, May 27, 2024 3:53:53 PM # gpg: using RSA key BA66F67FD73F7058D712D308C3B7C91B632F738A # gpg: Can't check signature: No public key # Conflicts: # .github/workflows/release-nightly.yml
There is a small layout shift in when active tab changes. Notice how the actions SVG is unstable:
This is because the active item with bold text is wider then the inactive one. I have applied this trick 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.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.