Follow
https://github.com/go-gitea/gitea/pull/30547#discussion_r1573866519Fix#30624
The Fomantic UI Dropdown wasn't designed to work that way, its "text"
element might contain images. So the "overflow" shouldn't be added to
any general dropdown text.
(cherry picked from commit 1e4867730b261352d63098b85cf53ca05867c8c2)
Fixes: https://github.com/go-gitea/gitea/issues/29994
Also some misc enhancements done to the form in the modal.
<img width="840" alt="Screenshot 2024-04-17 at 23 02 55"
src="e71fba55-55cd-4e48-a497-6b1025c36a43">
(cherry picked from commit dd8e6ae270b4b5e91a152a145978029dacb938ff)
Fixes: https://github.com/go-gitea/gitea/issues/30540
1. Fix all these boxes by adding `bottom attached` and removing a
problematic CSS rule:
<img width="1319" alt="Screenshot 2024-04-17 at 22 25 31"
src="346445a4-4944-4003-a1ef-6f5b0eda624e">
<img width="643" alt="Screenshot 2024-04-17 at 22 21 18"
src="10f17ed3-9ad6-48de-92fa-bac6621815b9">
2. Change the "last commit" box to `ui segment` which has correct
border-radius. Also included is a tiny tweak to make author name ellipse
instead of wrap.
<img width="1331" alt="Screenshot 2024-04-17 at 22 23 23"
src="285fbd45-ced0-4d33-abe3-7384ffa03188">
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 31538133c32009532897989ad623067bd224f924)
Fixes https://github.com/go-gitea/gitea/issues/30493, regression from
https://github.com/go-gitea/gitea/pull/30374.
Also did the flexbox convertion as suggested by the existing comment.
<img width="850" alt="Screenshot 2024-04-16 at 22 28 48"
src="e8905944-620a-4211-b5c5-53ed3b3ee23e">
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 311f5261cdb23b46d3f510e40fd4e2ac06e376c0)
Fixes: https://github.com/go-gitea/gitea/issues/30524. Slightly restyled
them so that the "knob" is contained inside the background.
<img width="179" alt="Screenshot 2024-04-16 at 21 58 09"
src="be94517b-9cb7-46e2-ae96-fcf6767ce4ba">
<img width="187" alt="Screenshot 2024-04-16 at 21 58 50"
src="c13a1959-5c5a-4e88-9225-e5f6fb72e3e0">
(cherry picked from commit 5ccd042f7080e1f4ef4b96591e1b1002a4826115)
Fix a number of text overflow issues in actions view and run list. Also
improve mobile view of run list.
Fixes: https://github.com/go-gitea/gitea/issues/30328
<img width="782" alt="Screenshot 2024-04-08 at 23 10 16"
src="3d9f9f88-3eab-44a0-8144-30c2b58b24cb">
<img width="935" alt="Screenshot 2024-04-08 at 23 17 46"
src="581d73ea-a31d-416b-be3a-47313b879b12">
<img width="1008" alt="Screenshot 2024-04-08 at 23 49 05"
src="c5d10565-f285-477f-8659-1caf94797647">
<img width="397" alt="Screenshot 2024-04-08 at 23 55 30"
src="368aaa75-1903-4058-9d75-d1fe91c564d6">
(cherry picked from commit b9f69b4a4d1d6b5b1f94852f6dfcae41b30658ff)
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="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="717389d9-d42c-466e-a8fe-e968f79447fd">
Mobile:
<img width="444" alt="Screenshot 2024-03-31 at 15 11 44"
src="7faa840b-513a-411b-bf2d-26d52b9b71a0">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 044cc169e75dccbf1d846f8774ef2feccd0da1fd)
1. add border-radius and spacing to bars
2. use tailwind background classes
3. Add more space around activity list headers
<img width="983" alt="Screenshot 2024-03-27 at 23 40 54"
src="70f72c30-e69f-4ecb-882f-32b8bc94d638">
<img width="1020" alt="Screenshot 2024-03-27 at 23 41 02"
src="a35dbbda-515c-40b0-938a-d759f9686b8e">
(cherry picked from commit 6999a88fd9bef6baa0a8cc5f63e419079611fc9b)
- 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
Fixes: https://github.com/go-gitea/gitea/issues/29438
This contains numerous enhancements for how large commit messages and
large filenames render. Another notable change is that the file path is
no longer cut off by backend at 30 chars, but rendered in full with
wrapping.
<img width="1329" alt="Screenshot 2024-04-09 at 21 53 57"
src="5ccbb3d6-643a-4f60-ba79-3572b36d5182">
<hr>
<img width="711" alt="Screenshot 2024-04-09 at 21 44 24"
src="6ffe8fbb-407c-4aa7-b591-3d80daea7d57">
<hr>
<img width="439" alt="Screenshot 2024-04-09 at 21 19 03"
src="1ec7f6e9-2fd8-4841-87eb-6ca02ab9cd61">
<hr>
<img width="444" alt="Screenshot 2024-04-09 at 21 18 52"
src="70931b9e-5841-477e-b3bc-98f8d2662964">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 50099d7af436785daf66a3a9f27bd5c009f90684)
Conflicts:
- templates/repo/diff/box.tmpl
Picked Gitea's version, because it appears we missed a
gt-gap-1 => tw-gap-1 conversion
- web_src/css/repo.css
Conflict due to tag signature highlighting, resolved by
adding the Gitea changes on top of ours manually.
16 seems to big, 14 too small. Let's do 15. Alignment:
<img width="181" alt="image"
src="f2988611-dee2-492e-a18f-dc5ab3a1cd6c">
(cherry picked from commit 72dc75e594fb5227abfa1cb74cb652cc33bacc93)
Fixes https://github.com/go-gitea/gitea/issues/30293 and introduce the
`--page-spacing` variable which holds the spacing between the elements
on the page. This is working vertically for all pages, including ones
that have fomantic grid, and horizontally for all that use
`flex-container`.
The `.page-content > :first-child:not(.secondary-nav)` selector uses
margin which in some cases enables to adjacent margins to overlap, which
is nice.
<img width="1320" alt="Screenshot 2024-04-06 at 01 35 19"
src="3e81e707-e9ff-4b7f-a211-3d98f4f85353">
---
<img width="1327" alt="Screenshot 2024-04-06 at 01 35 45"
src="aad196c0-9e21-4c06-ae59-7e33a76c61e1">
---
<img width="1321" alt="Screenshot 2024-04-06 at 01 35 31"
src="785f6c5d-08b6-4e66-aa16-aeca7cfed3ad">
(cherry picked from commit 019857a7015cae32c12b5eac0b895c05f0264b77)
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="8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">
(cherry picked from commit 0178eaec256a349371c75e582edd7fefca2085d0)
Fix the checkbox issues in
https://github.com/go-gitea/gitea/issues/30303 which were existing
problems with these selectors, but made visible with
https://github.com/go-gitea/gitea/pull/30162.
There is a lot of dead/useless CSS in `form.css`, I only fixed the two
problems and remove CSS that was definitely not in use or needed.
<img width="369" alt="Screenshot 2024-04-06 at 18 00 08"
src="720f178b-1b22-48d4-8704-becb8ce66129">
<img width="405" alt="Screenshot 2024-04-06 at 18 00 28"
src="61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2">
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 644ade5ae6805a3db063b3f81a596febe49bacaf)
Not sure exactly when this regressed, but has been a while I think.
Before:
<img width="895" alt="Screenshot 2024-04-08 at 22 46 50"
src="9b1788f8-017e-4fe1-8ab9-938e0d76fb41">
After:
<img width="689" alt="Screenshot 2024-04-08 at 23 00 58"
src="90193df9-5c24-4a1a-96fe-3d4e8392063c">
Co-authored-by: Giteabot <teabot@gitea.io>
---
Conflict resolution: none
(cherry picked from commit 8d14266269f1b4fd5e13d701830919c1a1613444)
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="00b39e15-a377-4458-95cf-ceec74b78228"><img
width="90" alt="Screenshot 2024-04-02 at 01 51 30"
src="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)
Fix: [#29933](https://github.com/go-gitea/gitea/issues/29933)
**Before**
**After**
---------
Co-authored-by: silverwind <me@silverwind.io>
Conflicts:
- web_src/css/modules/segment.css
Ported by adding the new selector with a larger radius,
keeping the existing one with ours.
Fix regression from https://github.com/go-gitea/gitea/pull/30194 where
right-aligned items would not display correctly.
Before and After:
<img width="285" alt="Screenshot 2024-04-06 at 01 12 11"
src="f9168db5-0f69-4b5d-ba17-b60145ac4a09">
<img width="285" alt="Screenshot 2024-04-06 at 01 11 49"
src="639ab6ed-d018-4e3a-9980-1f079e4ebe9d">
Frontpage search tweaked to accommodate (which was the reason for the
changes that broken above):
<img width="445" alt="Screenshot 2024-04-06 at 01 11 34"
src="1919220b-390e-463a-8e3d-33a3556bf111">
<img width="438" alt="Screenshot 2024-04-06 at 01 11 39"
src="fd94f8e4-1d56-4b04-99e3-1cd240bd7ab4">
(cherry picked from commit 94aad35a120b05897a0b6b97f0d9605a52ea9642)
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="c49ec4f5-93c3-41d6-a907-cdbedf8abc44">
(cherry picked from commit 649aada3664f5adccdaecc7dd24b8252ae070220)
1. Distinguish inline an block code with new CSS variable
`--color-markup-code-inline`
2. Various color tweaks, better contrast from background
<img width="447" alt="Screenshot 2024-04-05 at 00 51 00"
src="93e069f4-6807-4f2c-9331-2d69730919d4">
<img width="456" alt="Screenshot 2024-04-05 at 00 50 44"
src="0dc9c745-c531-40fa-94ec-b0ba10bd7ccf">
(cherry picked from commit 662eb4b0852f9ce2c161e7fea5ac66bf912fc9f6)
Found [a better color
picker](https://github.com/web-padawan/vanilla-colorful) that [does not
rely](https://github.com/mdbassit/Coloris/issues/139) on
`querySelectorAll` or a global shared instance, and is also around a
third of the size of the previous one.
The popover is handled by tippy.js for which I introduced a new "bare"
theme and it uses a new sibling-based mechanism which should prove
useful later to create tippy popovers via HTML only.
<img width="846" alt="Screenshot 2024-03-31 at 04 03 38"
src="7639b911-a2d7-4f5c-bffd-a9d84561e747">
(cherry picked from commit 1195be41a13d2198ab644c8558549edd74485510)
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="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)
CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on
admin page also still work. The only necessary JS is the one that links
`input` and `label` so that it can be toggled via label. All checkboxes
except the markdown ones render at `--checkbox-size: 16px` now.
<img width="174" alt="Screenshot 2024-03-28 at 22 15 10"
src="3455c1bb-166b-47e4-9847-2d20dd1f04db">
<img width="499" alt="Screenshot 2024-03-28 at 21 00 07"
src="412be2b3-d5a0-478a-b17b-43e6bc12e8ce">
<img width="83" alt="Screenshot 2024-03-28 at 22 14 34"
src="d8c89838-a420-4723-8c49-89405bb39474">
---------
Co-authored-by: delvh <dev.lh@web.de>
(cherry picked from commit 8fd15990c5c8980caf2b9ffefc0b3427efacdc04)
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="71215c39-abb1-4881-b5c1-9954b4a89adb">
<img width="860" alt="Screenshot 2024-03-25 at 00 20 48"
src="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
