The row of buttons on the org view is pretty bad on mobile, as it doesn't leave enough space for the org name. My recent PR 3642 made it worse. I added a mitigation to allow buttons to go to an other row, so that the layout is usable on mobile. It is still non-ideal as it will continue going out of bounds on small screens, but is much better.
## Preview
[Old preview](/attachments/1e280a77-533c-41b5-954d-b336f1b72186)
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3949
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
- make sure margins are all consistent and good, elements are not too close or too apart
- this also applies to "Show commit body" button
- remove unused code. The class `commit-status-link` doesn't exist in templates, nor I could find it on any related pages in case it's generated in runtime
## Preview
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3948
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
Use the same padding horizontally and vertically, so the views like readme look a bit nicer. Just slightly adjusted two values, nothing really test-able here.
## Motivation
I came to the conclusion that they should be the same myself, later I checked GitHub and it turned out to also use the same paddings. I would like to notice that the padding here (2em = 32px) is the same as GitHub uses too.
I find this as a logical UI change because the paddings are usually same on both axis across the UI (like on PR sidebar).
Also updated paddings for when the files are shown in profile, but copied the `1.5em` that GitHub uses. This, once again, makes sense, because the overview markdown isn't the primary content, or as primary as the readme on the repo is, taking the full usable width.
## Preview
https://codeberg.org/attachments/55f6685c-1978-410a-a17b-9fac91f0642e
---
https://codeberg.org/attachments/d9016a1c-13cf-4ea6-a8e4-2619d93f3560
## Note
`.non-diff-file-content .plain-text` is left untouched with `1em 2em`, because the plaintext seems to add it's own margins, so it would make it look worse.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3944
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
Remove CSS code that was made unused by some changes in Gitea. I was working on a layout change here but was bothered a bit by these. I dug a bit into the git history to find out how they were made unused but it's relatively uneasy.
- remove rule that was setting `width: 100%;`: the exactly same selector setting this exact value is duplicated below
- remove rules with `followers` in selectors: we don't use this class in templates (would be nice if someone double-checks)
- my editor forced EoF fix
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3937
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
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)
These are some slight design changes to how usercards are presented.
- `margin`: removed one of the sides so the margins are the same in both axis
- `margin`: increased from 10px to 15px
Previously it was (Y, X) = (20, 10); now it's (15, 15)
- `width`: slightly decreased so that the point, where too small screen width causes card relocation to another row, doesn't increase
- `padding`: this change does nothing visually. `padding-bottom` was useless because padding was already set for all sides by another rule `.ui.segment {padding: 1em};`. This change just ensures that padding stays the same for all sides even if `.ui.segment` changes, instead of causing inconsistency
- `margin-bottom`: added as an override to margin caused by `display: flex`. From my research, usually there's `25px` gap between the content and the pagination. It was `39px` here, now it's `25px` too
### Before
### After
I can't show the distance between the content and the pagination, but the change does work when applying via devtools on https://codeberg.org/forgejo/forgejo/stars.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3915
Reviewed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
Reviewed-by: Caesar Schinas <caesar@caesarschinas.com>
This PR ports [gitea#30858](https://github.com/go-gitea/gitea/pull/30858) / [this commit](5c236bd4c0) to forgejo.
[week 2024-20 cherry pick](https://codeberg.org/forgejo/forgejo/pulls/3729)
## Tests
- [ ] Click "edit" to get into edit mode, change the title and then use Alt+Enter to save the title
## Screenshots
Before:
After:
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3797
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
Co-committed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
This fixes that titles of project columns can overflow and push the
action menu out of the card, so that interaction is no longer possible.
Fixes #3717
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>
Forbid
[deprecated](https://drafts.csswg.org/css-text-3/#word-break-property)
`break-word` and fix all occurences.
Regarding `overflow-wrap: break-word` vs `overflow-wrap: anywhere`:
Example of difference: https://jsfiddle.net/silverwind/1va6972r/
[Here](https://stackoverflow.com/questions/77651244) it says:
> The differences between normal, break-word and anywhere are only clear
if you are using width: min-content on the element containing the text,
and you also set a max-width. A pretty rare scenario.
I don't think this difference will make any practical impact as we are
not hitting this rare scenario.
(cherry picked from commit 5556782ebeb1ca4d17e2fff434b11651887b9899)
Makes it easier to use because you see which square is currently
hovered:
<img width="314" alt="Screenshot 2024-05-02 at 15 38 20"
src="https://github.com/go-gitea/gitea/assets/115237/3a15dad1-2259-4f28-9fae-5cf6ad3d8798">
I did try a `scoped` style for this, but that did not work for some
reason.
(cherry picked from commit 6f89d5e3a0886d02ead732005f593ae003f78f78)
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)
- `.text-thin` and `.text-italic` are not present in CSS so were doing nothing and I removed them.
- `.text.middle` was unused so I removed it.
- `.text.italic` is replaced with `tw-italic`.
- `.text.normal` had exactly one use and it wasn't even needed.
- add a `muted` class to the link to `org_profile_avatar.tmpl`.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit aff7b7bdd285cc1fcabea774f153886e11ae9f5d)
Small tweak here to prevent this and likely other events from
overflowing in the timeline:
<img width="895" alt="Screenshot 2024-04-14 at 22 53 17"
src="https://github.com/go-gitea/gitea/assets/115237/001b4f6b-f649-44ff-b2f0-c8e0dedeb384">
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 1508a85f6235814271ea927d651bcbcd8c9f5f18)
---------
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)
