The REAME on a repositories home page is 2px wider than the other elements in the main container. 1px on each side.
There appear to be at least 330 files that have one of these styles, I have tried to go through the UI and look for any regressions, but I may have missed some.
```sh
rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\bheader\b)' --pcre2|wc
275
rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\bsegment\b)' --pcre2|wc
330
rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\btable\b)' --pcre2|wc
56
```
I tried to track down the origin. I found the following information.
The behavior originates in semantic-ui, and was carried on in the fomantic-ui fork. It looks like the author was trying to achieve a 1px box-shadow look, but decided to implement it using a border after poor results with box-shadow.
* attachedHorizontalOffset introduced, a623e4411c
* attachedHorizontalOffset used for the margin on `.ui.segment.attached`, 5c7d5f13d8 (diff-ce37074faff5ddf9591ee8fd88818b6e99376519ce9e6e451cdb7db20dcbecf6R449)
I also found some upstream issues raised about the same bug:
* https://github.com/Semantic-Org/Semantic-UI/issues/3592
* https://github.com/Semantic-Org/Semantic-UI/issues/4248
* https://github.com/Semantic-Org/Semantic-UI/issues/6763
* https://github.com/fomantic/Fomantic-UI/issues/1401
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10240
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Magnus Jason <magnus@magnusjason.com>
Co-committed-by: Magnus Jason <magnus@magnusjason.com>
Replaced dropdowns in the navbar with JS-less ones from https://codeberg.org/forgejo/forgejo/pulls/7906.
Also made some changes to the dropdown component:
* fixed variable name
* painted backgrounds (hover, focus) are now consistently applied to the actual interactive items (`<a>`, `<button>`), not to `<li>`. This is consistent with how backgrounds are conditionally applied to pre-selected (`.active`) items and is better, as it allows to place additional things to `<li>`...
* ...`<hr>` can now be placed in some `<li>` instead of requiring splitting into multiple `<ul>`. This is simpler in code and I am guessing this should be better for a11y as screen readers can cast one continuous list instead of multiple ones. But have no hard proof that this is actually better. My main motivation was to avoid ugly mistake-prone tmpl logic where unconditional `<ul>` was getting closed and reopened inside of a condition.
I should note that on mobile all items, including these dropdowns, are hidden in another dropdown, and it stays JS-dependand for now. So this PR only makes this part of the UI JS-less for desktop.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10025
Reviewed-by: Robert Wolff <mahlzahn@posteo.de>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
See #8222 for context (loosely related to #4595).
## Implemented changes
The conversion logic is kept in the frontend and the related npm libraries are lazy-loaded (unchanged).
### Show some tabs on the preview of the `CITATION.*` file to switch between the formats:
### Convert the "Cite repository" to a simple link to the citation file
So that this change can be considered non-breaking
## Current state (before this PR)
The last non-test call of `git.Blob.GetBlobContent` is made to retrieve the content of an eventual CITATION file.
This is available in the `...` menu near the clone URL:
And is displayed as a popup:
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9103
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: oliverpool <git@olivier.pfad.fr>
Co-committed-by: oliverpool <git@olivier.pfad.fr>
Followup to https://codeberg.org/forgejo/forgejo/pulls/8859, https://codeberg.org/forgejo/forgejo/pulls/9636.
Convert the create branch and rename branch modals in the branch list to native dialogs and convert the create branch and create tag in the commit view to native dialogs.
The dialogs in the commit view have been simplified and no longer uses javascript to construct the data in the dialog (thus would be eligible for nojs modals).
The dialogs have footer styled actions.
The rename branch modal now has a 'branch name' label to indicate the field is required.
E2E testing is added.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9760
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
* Make danger buttons brighter - followup https://codeberg.org/forgejo/forgejo/pulls/9652#issuecomment-7803875
The new lightness 0.26 is same as lightness of --color-box-body instead of being darker than it, so the form controls aren't darker than the background they're on which might look bad. Looks pretty good, the calculated contrast is fine.
* Apply new buttons to avatar upload/removal forms
* Better responds to overflowing
* Consistently apply medium font-weight to all buttons - followup https://codeberg.org/forgejo/forgejo/pulls/9652#issuecomment-7783718
* This improves readability a lot. The previous normal weight was only chosen because some of the buttons had it, which wasn't a good excuse. We also have buttons with medium, and they are easier to read.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9863
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
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/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 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>
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>
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>
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>
- 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>
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>
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.
UX/Translation changes:
- new teams: remove redundant tooltips that don't add meaningful information
- move general information to table fieldset
- new teams: rename "general" to "custom" access for clarity
- new teams: show labels beside options on mobile
Accessibility:
- semantic form elements allow easier navigation (fieldset, mostly)
- improve better labelling of new teams table
- fix accessibility scan issues
- TODO: the parts that "disable" form elements were not yet touched and
are not really accessible to screenreaders
Technical:
- replace two JavaScript solutions with one CSS standard
- implement a simpler grid (.simple-grid)
- simplify markup
- remove some webhook settings specific CSS
Testing:
- check more form content for accessibility issues
- but exclude tooltips from the scan :(
- reuse existing form tests from previous PR
Cherry-pick of 2ced31e81d adapted to Forgejo releases UI.
Percentage-based `border-radius` [creates undesirable
ellipse](https://jsfiddle.net/silverwind/j9ko5wnt/4/) on non-square
content. Instead, use pixel value and use same wording `full` like
tailwind does, but increast to 99999px over their 9999px.
(cherry picked from commit 2ced31e81dd9e45659660c1abff529d0192fd8ed)
Enable
[`declaration-block-no-redundant-longhand-properties`](https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties/)
and autofix issues. The exclusions are because I find these two
shorthands to be harder to read.
(cherry picked from commit 46b7004f050bd2fdaf9800794cf2c1e9eeb08d51)
Signed-off-by: Beowulf <beowulf@beocode.eu>
This is a very old bug with the bottom border-radiuses not being there
and the `:has` selector now makes it possible to cleanly solve it. It
affects all header+segment boxes, which there are many throughout the
UI:
<img width="1017" alt="Screenshot 2024-04-23 at 20 47 21"
src="https://github.com/go-gitea/gitea/assets/115237/870fe352-cc38-4bd6-bfe6-9fe8c3066f92">
(cherry picked from commit 3f19a6334575e1d2849999e8339f1b515cefaf1a)
---------
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit b84baf21fa19521e1ab303a60918c74f85fcad1c)
Conflicts:
- web_src/css/base.css
Trivial commit resolved by removing the conflicting part.
(it conflicted because we did not pick a previous PR)
Added new class `flex-container-sidebar` to cover the dashboard sidebar.
Previously this was 37.5% with more padding. Now there is less empty
space between the two columns and this matches other pages like repo or
admin settings page.
Desktop:
<img width="1345" alt="Screenshot 2024-03-31 at 15 11 36"
src="https://github.com/go-gitea/gitea/assets/115237/717389d9-d42c-466e-a8fe-e968f79447fd">
Mobile:
<img width="444" alt="Screenshot 2024-03-31 at 15 11 44"
src="https://github.com/go-gitea/gitea/assets/115237/7faa840b-513a-411b-bf2d-26d52b9b71a0">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 044cc169e75dccbf1d846f8774ef2feccd0da1fd)
