Follow up of forgejo/forgejo#8859
Move the following modals to native dialogs:
- Admin notice.
- Edit label.
- New label.
- Update email in admin's email list.
Each has a E2E test to screenshot the modal and test functionality.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9636
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
Followup to https://codeberg.org/forgejo/forgejo/pulls/6700 & https://codeberg.org/forgejo/forgejo/pulls/9429
## Testing
Test coverage is already present in `tests/e2e/repo-home.test.e2e.ts` - there are no changes in behavior, so just selectors were updated.
## Changes
* Re-make stats using details+summary: it now works without JS, works immediately after page is displayed, responds to clicking more quickly
* Make the clickable bar taller on coarse screens
* Fix broken overflowing on narrow screens
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9532
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
The change prevents unnecessary resizing of the text field.
## Testing
- Compose some text e.g. in an issue
- Enter a lot of lines, until the compose field is as big as possible
- Move the screen up, the top of the compose field should leave the screen, but the last e.g. 5 lines should still be visible on the screen
- Append some text
- Make sure the textfield just gets bigger, but doesn't jump to the bottom of the page
Fixes#7522
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7569
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Co-authored-by: Beowulf <beowulf@beocode.eu>
Co-committed-by: Beowulf <beowulf@beocode.eu>
This is a short CSS fix for "mobile" devices (being screen-width < 390px) where the clone panel would not get smaller than 370px and thus causes an ugly overflow which also leads to the page being wider than view when loaded and thus causes the page to weirdly bounce a bit left and right when scrolling.
The 390px mark was chosen because that's exactly the point where, with padding, the panel stops having a usable size.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9447
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: DasLixou <einlixou@gmail.com>
Co-committed-by: DasLixou <einlixou@gmail.com>
Resolves#8403
There's a issue with the comment history items that are deleted, they can be deleted by the author of the comment or by those that have write access. However when the item is deleted, it shows that the one who wrote that revision of the comment deleted it, which is not always true. Strike-through the item instead.
Co-authored-by: Daniele Pintore <daniele.pintore1@gmail.com>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8458
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: danielep <danielep@noreply.codeberg.org>
Co-committed-by: danielep <danielep@noreply.codeberg.org>
- The current implementation for modals is provided by fomantic UI.
- This patch introduces a new implementation that relies on the `<dialog>` element to provide modal, whereby the heavy lifting is done by the browser.
- This implementation is considerably simpler, accessible (although untested) and lightweight. It is capable of replacing fomantic UI's modal implementation + our dimmer implementation (~2k lines of code and CSS).[^1] As a first step the empty content modal is migrated.
- This brings in the CSS needed to display `<dialog>` and a helper function that hides some boilerplate code that's needed to show `<dialog>` as a modal.
- Add a E2E test that shows the modal's cancel and approve button works.
[^1]: The heavy work has already been done by me in a local branch, but reviewing that gigantic patch in one PR is not doable.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8859
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
ref #9231
Removed the conditional inclusion of the `primary` class as this one is unneeded after the use of the dedicated class
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9251
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: pat-s <patrick.schratz@gmail.com>
Co-committed-by: pat-s <patrick.schratz@gmail.com>
This PR improves the row/box with signature information used on commit and tag pages: [commit example](096a03eb42), [tag example](https://codeberg.org/forgejo/forgejo/releases/tag/v1.4.0-rc2). It improves padding consistency, mainly on mobile, and cleans up code a bit. Instead of relying on min-height the box now uses paddings so overflown text is never too close to borders.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8984
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Addresses #6332.
This allows
```
1. [ ] task1
2. [ ] task2
```
to be rendered with numbers.
It also fixes a little alignment issue between items from unordered checkbox and other lists.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9184
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Ellen Εμιλία Άννα Zscheile <fogti@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Robert Wolff <mahlzahn@posteo.de>
Co-committed-by: Robert Wolff <mahlzahn@posteo.de>
The context menu of the comment box was not always available on a mobile-sized device, because it would escape its container, overlap other elements, and be unable to be clicked.
To address this, I've made the comment box constrained to the width of the diff box.
This allows Playwright to interact with the element without ambiguity of the click targets, avoiding any "intercepts pointer events".
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9052
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net>
Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>
* refactored to untangle comment headers of different styles of comments from each other
* fixed misalignments
* improved consistency
* fixed missing avatar rounding
* made reactions aligned with content
* fixed text in the "Outdated" label overflowing into the toggle icon
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8138
Reviewed-by: Beowulf <beowulf@beocode.eu>
Followup to https://codeberg.org/forgejo/forgejo/pulls/7822
* Fix signaturebox's background breaking out of hashbox and thus breaking it's rounded corners
* Fix a bug where an extra right margin was applied to signbox's avatar on pull request overview by unrelated rule
* Untangle hashbox's CSS from .label - it was not a good partnership between them. Some extra properties, some that we had to override
* Move CSS out of "repo.css" to a separate file - it's clearly not only related to repos
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8721
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
After seeing #8111 use a webcomponent, I think that they are a neat usecase for Forgejo where most of the frontend is backend-generated, with some "island of enhancements".
I am considering using a webcomponent for the CITATION management (last occurrence of [`Blob.GetBlobContent`](https://codeberg.org/forgejo/forgejo/issues/8222)), however I noticed that the developer experience wasn't ideal.
With this PR it would be very easy to declare a webcomponent, which will be loaded only if needed (I converted `model-viewer` and `pdf-object` to this technique).
Some cleanup in the neighbor webcomponents.
## Testing
1) Create a new repository or use an existing one.
2) Upload a `.pdf` or `.glb` file (such as https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/testdata/data/viewer/Unicode%E2%9D%A4%E2%99%BBTest.glb)
3) Open the Network inspector and view the file in the repository.
- After a short loading spinner, the PDF or 3D model should be rendered in a viewer
- the related JS should have been loaded (e.g. http://localhost:3000/assets/js/model-viewer.494bf0cd.js)
- visiting another page and check that this JS file isn't loaded
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8510
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: oliverpool <git@olivier.pfad.fr>
Co-committed-by: oliverpool <git@olivier.pfad.fr>
Related: https://codeberg.org/forgejo/forgejo/pulls/6977/files#diff-fd05eba523810d46c7763db938ad5839372a074a, https://codeberg.org/forgejo/forgejo/pulls/3949, https://codeberg.org/forgejo/forgejo/pulls/7906
* use the new noJS dropdown for extra actions in org view (currently only includes report button)
* this required some refactoring of the area because the said dropdown was not built to be placed in an area where `font-size:36px` is forced onto everything
* this greatly improves consistently with user profiles which now use this type of dropdown
* I decided against making the opener button mimicrate an actual button because it looks ok as is and is consitent with menu in user profiles and because I don't think this is a good design language to make a kebab menu opener look this way
* add icon to the entry
* add atom entry
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8572
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
In similar vein of forgejo/forgejo#7416
- Fomantic's tab module is responsible for showing the right content when a tab is clicked upon. Most notably the Write/Preview tabs on the comment editor.
- Remove it and replace the javascript with our own function that is able to provide everything Forgejo needs.
- Replace the CSS with our own bare minimum CSS.
- No functionality or visual is affected by this replacement.
- E2E test added.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8587
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
Related: https://codeberg.org/forgejo/forgejo/pulls/3950#issue-785253, https://codeberg.org/forgejo/forgejo/pulls/3950#issuecomment-1998551.
## Links in dropdown
* move _admin only_ User details link here, give it always-visible text
* add new _self only_ Edit profile link here
* move RSS feed link here
* add new Atom feed link here, previously unadvertised
* add new SSH keys link here (`.keys`), previously unadvertised
* add new GPG keys link here (`.gpg`), previously unadvertised
* move Block/Unblock button here
* move Report abuse link here
If primary action is available (Follow/Unfollow), dropdown with more actions goes after it. If not, it is in line with followers, in place where RSS feed button used to be.
## New dropdown
Related: https://codeberg.org/forgejo/design/issues/23, https://codeberg.org/forgejo/forgejo/issues/3853, https://codeberg.org/0ko/forgejo/issues/2.
Implemented a new dropdown: noJS-usable, JS-enhanced for better keyboard navigation and a11y.
Styling is mostly same as the existing ones have, but row density depends on `@media` pointer type.
My choice of CSS properties have been influenced of these:
* 72a3adb16b
* 51dd2293ca
Inspired-by: KiranMantha <kiranv.mantha@gmail.com>
Inspired-by: Lucas Larroche <lucas@larroche.com>
Co-authored-by: Beowulf <beowulf@beocode.eu>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7906
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
## Motivation
The GLTF (`.gltf`, `.glb`) 3D model format is very popular for game development and visual productions.
For an indie game studio, it would be convenient for a team to view textured 3D models directly from the Forgejo interface (otherwise they need to be downloaded and opened). [Perforce](https://www.perforce.com/products/helix-dam), [Diversion](https://www.diversion.dev/), and GitHub all have this capability to differing extents.
Some discussion on 3D file support here: https://codeberg.org/forgejo/forgejo/issues/5188
## Changes
Adds a model viewer similar to [GitHub STL viewer](https://github.com/assimp/assimp/blob/master/test/models/STL/Spider_ascii.stl) for `.glb` model files, and lays some groundwork to support future files. Uses the [model-viewer](https://modelviewer.dev/) library by Google and three.js. The model viewer is interactive and can be rotated and scaled.
## How to Test
1) Create a new repository or use an existing one.
2) Upload a `.glb` file such as `tests/testdata/data/viewer/Unicode❤♻Test.glb` (CC0 1.0 Universal)
3) View the file in the repository.
- Similar to image files, the 3D model should be rendered in a viewer.
- Use mouse clicks to turn and zoom.
## Licenses
Libraries used for this change include three.js and @google/model-viewer, which are MIT and Apache-2.0 licenses respectively. Both of these are compatible with Forgejo's GPL3.0 license.
## Future Plans
1) `.gltf` was not attempted because it is a multiple file format, referencing other files in the same directory. Still need to experiment with this to see if it can work. `.glb` is a single file containing a `.gltf` and all of its other file/texture dependencies so was easier to implement.
2) The PR diff still shows the model as an unviewable bin file, but clicking the "View File" button takes you to a view screen where this model viewer is used. It would be nice to view the before and after of the model in two side-by-side model viewers, akin to reviewing a change in an image.
3) Also inserted stubs for adding contexts for GLTF, STL, OBJ, and 3MF. These ultimately don't do anything yet as only `.glb` files can be detected by the type sniffer of all of these.
## Checklist
The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).
### Tests
- I added test coverage for checking GLB file content using the first few bytes.
- [x] in their respective `typesniffer_test.go` for unit tests.
### Documentation
- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.
### Release notes
- [ ] I do not want this change to show in the release notes.
- [ ] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.
<!--start release-notes-assistant-->
## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface features
- [PR](https://codeberg.org/forgejo/forgejo/pulls/8111): <!--number 8111 --><!--line 0 --><!--description YWRkIG1vZGVsIHZpZXdlciBmb3IgYC5nbGJgIChHTFRGKSBtb2RlbCBpbiBmaWxlIHZpZXc=-->add model viewer for `.glb` (GLTF) model in file view<!--description-->
<!--end release-notes-assistant-->
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8111
Reviewed-by: oliverpool <oliverpool@noreply.codeberg.org>
Co-authored-by: Alex Smith <amsmith.pro@pm.me>
Co-committed-by: Alex Smith <amsmith.pro@pm.me>
This implements the UI controls and information displays necessary to allow reviewing pull requests by stepping through commits individually.
Notable changes:
- Within the PR page, commit links now stay in the PR context by navigating to `{owner}/{repo}/pulls/{id}/commits/{sha}`
- When showing a single commit in the "Files changed" tab, the commit header containing commit message and metadata is displayed
- I dropped the existing buttons, since they make less sense to me in the PR context
- The SHA links to the separate, dedicated commit view
- "Previous"/"Next" buttons have been added to that header to allow stepping through commits
- Reviews can be submitted in "single commit" view
Talking points:
- The "Showing only changes from" banner made sense when that view was limited (e.g. review submit was disabled). Now that it's on par with the "all commits" view, and visually distinct due to the commit header, this banner could potentially be dropped.
Closes: #5670#5126#5671#2281#8084
## Checklist
The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).
### Tests
- I added test coverage for Go changes...
- [ ] in their respective `*_test.go` for unit tests.
- [ ] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I added test coverage for JavaScript changes...
- [ ] in `web_src/js/*.test.js` if it can be unit tested.
- [x] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).
### Documentation
- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.
### Release notes
- [ ] I do not want this change to show in the release notes.
- [x] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7155
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: Lucas Schwiderski <lucas@lschwiderski.de>
Co-committed-by: Lucas Schwiderski <lucas@lschwiderski.de>
- Before #6813, there were no `kbd`s in the UI, but now we have a few. Currently they do not have any special styling other than font family+size. But markup did have pretty good styling.
- This PR makes that styling used globally.
- The only concerning property is `background-color`, which uses a variable with `-markup-` in it, but I do not find this as a significant scope violation. We have many CSS variables but seemingly not enough generic ones.
Co-authored-by: floss4good <floss4good@disroot.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7958
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Followup to https://codeberg.org/forgejo/forgejo/pulls/4760
* some refactoring
* move rules out of repo.css to a new module
* simplify selectors by omitting .list: it is now only used to style the list itself, they're still precise enough in scope of .user-cards
* apply wrap/ellipsis to cards' content. Done via CSS to avoid spamming gt-ellipsis in the template
* prevent cards with long content from taking horizontal space from other cards
* prevent such cards from causing horizontal overflow on mobile
* prevent varying card height, it doesn't look good even with text wrapping
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6799
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This has been introduced in the cherry-picked commit from https://github.com/go-gitea/gitea/pull/34072
To me, adding this seems to be a bug as it forces a hard stop to any overflow nested within a markup div.
Why should it be removed again?
Because otherwise (wide) markdown tables might look super odd because the column breaking/wrapping logic is strange (likely related to the "anywhere" strategy being used).
- [Example of current state with `overflow-wrap`](https://codefloe.com/devxy/helm-rdepot/src/branch/main/charts/rdepot)
- [Example with `overflow-wrap` being removed](https://codefloe.com/devxy/helm-rdepot/src/branch/main/charts/rdepot)
| Current | Patched |
|---------|---------|
|  |  |
The initial change in Gitea was motivated to resolve issues of content overflow caused by the expandable file list tree view they introduced lately. However, this seem to have caused the whole README to overflow in their case, which doesn't apply to Forgejo.
When removing this in Forgejo, only large markdown content (i.e. tables) are allowed to overflow. The whole README div will not overflow (I tested this with an extreme markdown table case).
These tables are then horizontally scrollable, similar to how GitHub handles this.
If the expandable tree view is going to be added to Forgejo, this should then be handled entirely differently. This specific change is not a solution.
I've also checked other value settings to `overflow-wrap` but none had any or any desirable effect.
I did not check all other possible CSS-related options for overflow*, but this might as well be a different task per se.
For the reasons outlined above, I am quite certain this change should be reverted (again).
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7945
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: pat-s <patrick.schratz@gmail.com>
Co-committed-by: pat-s <patrick.schratz@gmail.com>
Careful removal of unused classes and rules from editable CSS. One class was used once in the UI and could have been easily replaced, others were only used in a devtest page.
Removed completely:
* pink
* olive
* violet
* background
Removed partially:
* blue
Some of them are also present in generated Fomantic code, but it's not possible to remove them easily here.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7898
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
On large screens, use grid to force right position of the button.
On small screens, just left it hang out wherever it fits. It's not possible to not make it hide behind mergebox while keeping `float`, and with grid it would overflow too much.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7746
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Old activities are shown like before, new commits are displayed like commits in e.g. the commits list. _(Second commit)_
| New signed commits | Old (signed) commits |
|:--:|:--:|
|  |  |
Additionally the sha box was moved in an own component to unify the usage. _(First commit)_
Closes#1824
<!--start release-notes-assistant-->
## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface features
- [PR](https://codeberg.org/forgejo/forgejo/pulls/6933): <!--number 6933 --><!--line 0 --><!--description U2hvdyBpZiBjb21taXQgaXMgdmVyaWZpZWQgaW4gYWN0aXZpdHkgZmVlZCBvZiBhbiB1c2VyIG9yIGFuIG9yZ2FuaXphdGlvbiBmb3IgbmV3IGFjdGl2aXR5-->Show if commit is verified in activity feed of an user or an organization for new activity<!--description-->
<!--end release-notes-assistant-->
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6933
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Beowulf <beowulf@beocode.eu>
Co-committed-by: Beowulf <beowulf@beocode.eu>
- The pagination labels 'First', 'Previous', 'Next' and 'Last' are
hidden away when the screen width becomes smaller. However this also
hides them from the screen reader. Instead of using `display: none`, use
some well-known tricks to still make them visible to the screen reader.
- Add E2E test.
- ResolvesCodeberg/Community#1858
Followup to https://codeberg.org/forgejo/forgejo/pulls/7481.
Fix a bug reported by @Gusted where the switch would jump ~1px up when switched to preview mode.
It was because the switch is always center-aligning to the largest element in the toolbar. With toolbar buttons disappearing, the largest element was the switch itself. By placing it in a box with same height as the buttons we can ensure it can always stay in the same position.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7492
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
- Fomantic's dimmer module is responsible for dimming the page and make some element the primary focus on the page (e.g. modal). This module is only used by Fomantic's modal module.
- Remove it and replace the javascript with our own `Dimmer` class that is able to provide Fomantic's modal module with everything it needs.
- Replace the CSS with our own bare minimum CSS.
- No functionality or visual is affected by this replacement.
- E2E test added.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7416
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
- Follow up for #7314. Turns out this impacted the positioning of icons in tabs negatively, like the "Conversation"/"Commits"/"Files changed".
- Limit the change to the `overflow-menu` element.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7356
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Simon Ochsenreither <simon@ochsenreither.de>
Co-committed-by: Simon Ochsenreither <simon@ochsenreither.de>
- Add `vertical-align: baseline` to the svg class.
- Improves the vertical alignment of the icons that contain text in the overflow menu, and possibly in other places.
Co-authored-by: Simon Ochsenreither <simon@ochsenreither.de>
Co-committed-by: Simon Ochsenreither <simon@ochsenreither.de>
* home buttons: use `button-sequence` for consistency of gaps with other ui
* folder-actions: use `button-sequence` for better overflowing and so gap actually works instead of relying on whitespace, because currently it doesn't due to lack of flex
* introduce variable `--button-spacing` for `button-row` and `button-sequence`
* it's `0.33rem` on desktop for more pleasant hovering over button rows
* it's `0.5rem` on touchscreens for worrying less about misstapping
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7271
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Improve consistency of these tag/branch selector menus between these areas: repo file/dir view, issue branch selection, compare page.
Improve the look slightly by aligning icons properly, adding consistent gap and ensuring consistent vertical gaps with no excessive space waste.
Preview:
https://codeberg.org/attachments/0740a811-d6bf-4c27-a16d-bdc7e2aa63eb
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7187
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
The related CSS `milestone-card` is used in 3 places:
* global milestone view `/milestones`
* per-repo milestone view
* per-user/org projects view
The first two had gaps too small basically provided by whitespace. The latter was using an unusually large gap via tailwind.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7174
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Closes: https://codeberg.org/forgejo/forgejo/issues/6042
Continuation of: https://codeberg.org/forgejo/forgejo/pulls/6284
Replaces: https://codeberg.org/forgejo/forgejo/pulls/6285
Context: https://codeberg.org/forgejo/forgejo/pulls/6284#issuecomment-2518599
Create a new type of comment: `CommentTypeAggregator`
Replaces the grouping of labels and review request in a single place: the comment aggregator
The whole list of comments is "scanned", if they can get aggregated (diff of time < 60secs, same poster, open / close issue, add / del labels, add /del review req), they are added to the aggregator.
Once needed, the list of all the aggregated comments are replaced with a single aggregated comment containing all the data required.
In templates, have a specific HTML rendering part for the comment aggregator, reuse the same rendering as with the other types of comments.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6523
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: Litchi Pi <litchi.pi@proton.me>
Co-committed-by: Litchi Pi <litchi.pi@proton.me>
This fixes an issue with Simplified Chinese (and likely other languages)
where the "Actions" button would be shown in English and have a different
height compared to the other buttons in Chinese.
This solution was proposed by Codeberg user "aimuz".
Co-authored-by: aimuz
It is shown when there's no activity in the feed.
This is a partial implementation of https://github.com/go-gitea/gitea/pull/32990.
Differences:
* drawer icon instead of package icon
* h2 instead of h3
* explore links include a link to organizations list
* explore links are hidden for hidden explore sections
* locales are in JSON, I think it's the time to start using it, the hint is simpler and doesn't lie about following users to get their updates in the feed, which isn't a feature yet
* hint uses general hint color instead of input placeholder color
* the large icon still uses placeholder color, but I think it's ok
Things to improve later:
* use 24px variant of icon. This will require reworking `tools/generate-svg.js`
* the vue part wasn't ported, but it'd be also nice to have
Inspired-by: Kerwin Bryant <kerwin612@qq.com>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7030
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
- `gt-ellipsis` is set on elements to avoid overflowing its text contents and in the case of overflowing it would show an ellipsis. To force it to not overflow `overflow: hidden` is set, however this also hides the overflow on the y-axis, `overflow-x: hidden` has the same behavior.
- To avoid avoid the branch name from being clipped, add a very small amount of padding on the y-axis. This is a workaround and not a proper solution. There does not seem a good cross-platform solution available to fix this in a proper way.
- Resolvesforgejo/forgejo#6811
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6817
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
## Changes
* same as https://codeberg.org/forgejo/forgejo/pulls/6201, but for role labels
* remove border
* decrease paddings
* all by simply removing `basic`
* I did check that no important properties were added by that class
* make the header itself more compact by decreasing paddings here too
* it's really large currently - being as high as single line content
* removed "review" label by @fnetX request
There was no heavy consideration behind these changes. I was just poking around the area from time to time and finally decided to submit something. If you think there's more consideration needed, please tell!
## Preview
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6816
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
A few typos, some from spell checker, some from grepping `the the`, `the a `, ` a the`. Some in comments and some in changelogs.
Decapped a few remaining annoying strings, and one new from https://codeberg.org/forgejo/forgejo/pulls/6351 which was introduced by copy-pasting on a slightly out-of-date branch, causing Weblate to issue "reused translation" alerts again. Ref #6439.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6666
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
The benefit / functionality provided by DiffFileList is already (better)
integrated in the header of the files.
If you want an overview, you can collapse all files via the same
overflow menu (where the stats were available).
To reduce the maintenance effort, the DiffFileList component is
therefore removed.
Followup to https://codeberg.org/forgejo/forgejo/pulls/6459.
Usually it's quite hard to have inputs with balanced size that works for both desktop and mobile: it's either too large or too small for one of them. I think this can be a solution for this new element.
I tried it locally, it feels good on a phone. There's likely one downside which is that the switch will still be larger on touch devices even when they're wide, like on tablets. I think it can be resolved separately at some point. It isn't a problem on small devices because usually these elements go on separate rows.
## Preview
This change only affects touch devices.
|Before|After|
|-|-|
|||
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6546
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Followup to https://codeberg.org/forgejo/forgejo/pulls/6459 and https://codeberg.org/forgejo/forgejo/pulls/6542.
There are some edge cases where the UI would try to stretch the switch. Such inputs aren't really supposed to be dynamically stretched like this because it never looks good. So, I added a few rules to prevent this.
## Preview
This is the edge case with an artificially narrow screen.
|Before|After|
|-|-|
|||
No visual changes are expected outside of such edge case.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6543
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
[skip ci] no relevant tests
It's been there for a while. `flex-start` causes all items to stick to one side and be misaligned if they have different heights.
`align-items` isn't actually needed in this area when the goal is centered vertical alignment, however, unsetting it _could_ break items' height. I couldn't make it do that, but to be safe I kept it and only replaced the value.
## Preview
||
|-|
||
There's no difference when they're broken into two rows, on mobile.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6541
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Accessibility:
- improved semantic layout
- Fixes unlabelled input for custom pronouns. CC @hazy
- Adds labels to dropdowns.
- Shortens certain texts for less verbose screen reader outputs and
people with slow reading speed.
- Turned optional username rename helper text with low contrast into
"normal" help text.
UI/UX:
- Removes section about primary email which is no longer managed in the
profile section.
- Fixes section about primary email not displaying in user settings when notifications are
not available.
- Removes primary email display, because it is not actually a form
element here. (Alternatively, we could display it and link to the
account settings for managing the email)
Added support for searching content in a specific directory or file.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6143
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
Co-committed-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
Confine the search menu to be at most the width of the page, or 80% of
the viewport width, whichever is smaller. To do this, introduce a new
`--container-width` variable for the descendant elements of
`.ui.container` to be able to access.
Also update the relevant e2e test: add a long 'lorem ipsum' page, add a
search for it, parameterize the width.
I found them to have too little contrast so I tweaked them a bit.
Screenshots and discussion can be found at:
https://codeberg.org/forgejo/forgejo/pulls/1746#issuecomment-2442469
Thanks a lot to @jpkhawam for creating the colorblind themes and for
helping me improving my changes even further! :)
This css class was used to display the "forgot password"-link right and above the password field.
cd75519a0b moves this link, so this class is now unused
