Move the previous custom `tw-` classes to be defined in a tailwind
plugin. I think it's cleaner that way and I also verified double-class
works as expected:
<img width="299" alt="Screenshot 2024-05-30 at 19 06 24"
src="https://github.com/go-gitea/gitea/assets/115237/003cbc76-2013-46a0-9e27-63023fa7c7a4">
(cherry picked from commit 8c68c5e436805848197d98313e9ee77e8d540a83)
Move the rule to the parent node. `tab-size` is inherited so will work
just as before.
(cherry picked from commit 0f0db6a14fd10a493ba73f211e2e627c3884d114)
Currently the collapsed sections on the installation page have bad visibility, clickability and don't look good. This commit attempts to improve this. It is also worth noting that the amount of these sections might increase.
### Changes
* make custom style for these collapsible sections of the form. This is not a standard design to Forgejo, but we also don't have forms this large anywhere else, and it's fit in a few small CSS rules, so I think that's justified. I'm curious how it looks to others visually, good or bad.
* improve the positioning of the installation location hint.
* remove very rare occasion of dashed horizontal divider as this rule is no longer needed with the new borders. It was [added](c16ae1ab39 (diff-f8dad1e2c95a9e959d4688c763f3e02d1878c8e0)) just a month ago and had a visual bug with duplicated dividers.
### Preview
|Before|After|
|-|-|
|||
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4062
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
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>
This PR split the `Board` into two parts. One is the struct has been
renamed to `Column` and the second we have a `Template Type`.
But to make it easier to review, this PR will not change the database
schemas, they are just renames. The database schema changes could be in
future PRs.
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: yp05327 <576951401@qq.com>
(cherry picked from commit 98751108b11dc748cc99230ca0fc1acfdf2c8929)
Conflicts:
docs/content/administration/config-cheat-sheet.en-us.md
docs/content/index.en-us.md
docs/content/installation/comparison.en-us.md
docs/content/usage/permissions.en-us.md
non existent files
options/locale/locale_en-US.ini
routers/web/web.go
templates/repo/header.tmpl
templates/repo/settings/options.tmpl
trivial context conflicts
- 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>
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)
- fix rounding on /notifications/subscriptions
- add navigation interconnectivity between notifications and subscriptions
- use modern style for tabs
- clearing notificatons: hide the whole form instead of div. It doesn't seem like its changed via JS?
- replace issue-title-buttons and edit-buttons with universal top-right-buttons, get rid of tw-mr-0 helpers
- repo issues: fix misalignments on mobile view
Fix the action issue in https://github.com/go-gitea/gitea/issues/30303,
specifically:
- Use opaque step header hover background to avoid transparency issue
- Un-sticky the `action-view-left` on mobile, it would otherwise overlap
into right view
- Improve commit summary, let it wrap
- Fix and comment z-indexes
- Tweak width for run-list-item-right so it wastes less space on desktop
- Synced latest changes to console colors from dark to light theme
<img width="467" alt="Screenshot 2024-04-06 at 18 58 15"
src="https://github.com/go-gitea/gitea/assets/115237/8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">
(cherry picked from commit 0178eaec256a349371c75e582edd7fefca2085d0)
1. The previous color contrast calculation function was incorrect at
least for the `#84b6eb` where it output low-contrast white instead of
black. I've rewritten these functions now to accept hex colors and to
match GitHub's calculation and to output pure white/black for maximum
contrast. Before and after:
<img width="94" alt="Screenshot 2024-04-02 at 01 53 46"
src="https://github.com/go-gitea/gitea/assets/115237/00b39e15-a377-4458-95cf-ceec74b78228"><img
width="90" alt="Screenshot 2024-04-02 at 01 51 30"
src="https://github.com/go-gitea/gitea/assets/115237/1677067a-8d8f-47eb-82c0-76330deeb775">
2. Fix project-related issues:
- Expose the new `ContrastColor` function as template helper and use it
for project cards, replacing the previous JS solution which eliminates a
flash of wrong color on page load.
- Fix a bug where if editing a project title, the counter would get
lost.
- Move `rgbToHex` function to color utils.
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
---
Conflict resolution: Trivial.
(cherry picked from commit 36887ed3921d03f1864360c95bd2ecf853bfbe72)
Likely still some unnecessary CSS but any combinations with the `ui
list` classes are covered. There was only on instance of `horizontal
list` which I removed. It was this part of the commit page:
<img width="396" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/c49ec4f5-93c3-41d6-a907-cdbedf8abc44">
(cherry picked from commit 649aada3664f5adccdaecc7dd24b8252ae070220)
Create a new `issue-navbar` class specifically for this bar, previous
class used in many places and I thought I had them all removed, but not
this one.
Fixes: https://github.com/go-gitea/gitea/issues/30226
(cherry picked from commit 944c76e78423405a33450eb3d07cd2b772f4a81c)
Another pure CSS module. Some styling is part of the `form` module which
will likely follow next.
(cherry picked from commit ff334749f58c71980ec19143bc21c0a799074b30)
Conflicts:
- web_src/js/components/DashboardRepoList.vue
Resolved the conflict by manually applying the Gitea change.
On the labels list, This `left` class caused the dropdown content to
flash on page load until JS had hidden it. Remove it as I see no purpose
to it.
<img width="215" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/9e1de97f-dd89-41e0-9229-5c4a786ba762">
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 8da9130c1ffe93e0e97290fddb908ae5b67432e2)
Tailwind does not support. Dropped the vendor-prefix.
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 44dd6d6927180a4d36b3811fd2fb7557d0b44adb)
Fix https://github.com/go-gitea/gitea/issues/30185, regression from
https://github.com/go-gitea/gitea/pull/30162.
The checkboxes were unclickable because the label was positioned over
the checkbox with `padding`. Now it uses `margin` so the checkbox itself
will be clickable in all cases.
Secondly, I changed the for/id linking to also add missing `for`
attributes when `id` is present. The other way around (only `for`
present) is currently not handled and I think there are likey no
occurences in the code and introducing new non-generated `id`s might
cause problems elsewhere if we do, so I skipped on that.
(cherry picked from commit 640850e15f56bbe01f5d8ea407f99c79dc38457e)
1. Distinguish inline an block code with new CSS variable
`--color-markup-code-inline`
2. Various color tweaks, better contrast from background
(cherry picked from commit 662eb4b0852f9ce2c161e7fea5ac66bf912fc9f6)
---
- Revert the changes of #2874.
- Add more contrast to the inline block for light and dark theme.
(cherry picked from commit 662eb4b0852f9ce2c161e7fea5ac66bf912fc9f6)
Get rid of one more jQuery dependant and have a nicer color picker as
well.
Now there is only a single global color picker init because that is all
that's necessary because the elements are present on the page when the
init code runs. The init is slightly weird because the module only takes
a selector instead of DOM elements directly.
The label modals now also perform form validation because previously it
was possible to trigger a 500 error `Color cannot be empty.` by clearing
out the color value on labels.
<img width="867" alt="Screenshot 2024-03-25 at 00 21 05"
src="https://github.com/go-gitea/gitea/assets/115237/71215c39-abb1-4881-b5c1-9954b4a89adb">
<img width="860" alt="Screenshot 2024-03-25 at 00 20 48"
src="https://github.com/go-gitea/gitea/assets/115237/a12cb68f-c38b-4433-ba05-53bbb4b1023e">
(cherry picked from commit dd8dde2be89921b2b1497c6cc5eafdde213429cb)
- Adjust the warning and success text to be more representive (make them
more green and yellow). They still confirm to AAA contrast.
- For important, note and caution callout boxes make use of the light
variants for the colors colors rather than the dark variant.
- Resolves#3084
- Wrap the icon and callout into a seperate `<p>` which has `display:
flex; align-items: center` set. To center the icon with the callout text.
- Resolves#3006
Move the signed tag verification line above the release notes, don't
disable the bottom margin, and make sure the verification line's box is
properly rounded like other boxes.
Signed-off-by: Gergely Nagy <forgejo@gergo.csillger.hu>
- Add a visual (but still semantic way) separation between Forgejo's
generated attachments and the user's uploaded ones.
- The styling was first done by `ul` element, but is moved to the
individual list items to have better control over them.
- Add tooltip explaining the attachment was generated by Forgejo.
- Remove the tooltip of the other attachments and 'simplify' them into a text.
- Resolves#2893
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
