- 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)
