Commit Graph

107 Commits

Author SHA1 Message Date
silverwind
564102ce89
Rework and fix stopwatch (#30732)
Fixes https://github.com/go-gitea/gitea/issues/30721 and overhauls the
stopwatch. Time is now shown inside the "dot" icon and on both mobile
and desktop. All rendering is now done by `<relative-time>`, the
`pretty-ms` dependency is dropped.

Desktop:
<img width="557" alt="Screenshot 2024-04-29 at 22 33 27"
src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac">

Mobile:
<img width="640" alt="Screenshot 2024-04-29 at 22 34 19"
src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877">

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is
really only meant for `.ui.menu`, so it was not optimal for the
stopwatch popover.

This introduces a unopinionated `default` theme that has no padding and
should be suitable for all content. I reviewed all existing uses and
explicitely set the desired `theme` on all of them.
2024-04-30 14:52:46 +00:00
wxiaoguang
059b2718a5
Right align the "Settings" menu item in overflow-menu (#30764)
I guess there could be enough people liking to make the Settings menu
item right aligned. As a site admin, I found it's easier to find the
right-aligned Settings menu item.

Tested with various sizes:

![image](https://github.com/go-gitea/gitea/assets/2114189/92836527-2cb2-4531-9296-233c5bd698f4)

![image](https://github.com/go-gitea/gitea/assets/2114189/3a0729fc-5e33-44b5-9fb4-3a4e787405b5)

![image](https://github.com/go-gitea/gitea/assets/2114189/9845ab6b-88e3-4e5a-8d6d-2b8af259d593)
2024-04-30 04:26:13 +00:00
silverwind
a3d9f0d915
Fix all rounded borders, change affected tab menus to pills (#30707)
Fixes https://github.com/go-gitea/gitea/issues/30673, all 23 issues.
Notes:

- Tab bar menus had to change to pills because of unsolvable issue with
the border-radius as tab bar renders a overlapping border onto the box
below. And I think pills look better.
- Added padding to code editor empty preview message
- Hide monaco's built-in blue focus border, we don't need it and it
never showed before either.
- Label add menu is simplified, removing the nested segment.

<img width="1322" alt="Screenshot 2024-04-25 at 22 26 19"
src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1">
<img width="1326" alt="Screenshot 2024-04-25 at 22 28 00"
src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65">
<img width="997" alt="Screenshot 2024-04-25 at 22 36 53"
src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae">
<img width="832" alt="Screenshot 2024-04-25 at 22 56 09"
src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c">
<img width="361" alt="Screenshot 2024-04-25 at 22 57 12"
src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-29 20:53:15 +00:00
silverwind
a21ca9b5a5
Remove fomantic dimmer module (#30723)
Tested extensively using modal which is the only dependant.
2024-04-29 14:49:50 +00:00
silverwind
d0bfc978de
Fix active item in tab menu (#30690)
Before, item would also resize on hover because of font weight:
<img width="381" alt="Screenshot 2024-04-25 at 01 28 53"
src="https://github.com/go-gitea/gitea/assets/115237/4f3291fc-90be-4d66-ae8b-3c2f763cb956">

After:
<img width="381" alt="Screenshot 2024-04-25 at 01 28 40"
src="https://github.com/go-gitea/gitea/assets/115237/06145bf2-1ddd-4171-9217-d92c100ea405">

Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-25 12:53:39 +02:00
silverwind
3f19a63345
Fix border-radius of header+segment boxes (#30667)
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">
2024-04-24 13:11:52 +00:00
silverwind
5ccd042f70
Tweak and fix toggle checkboxes (#30527)
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="https://github.com/go-gitea/gitea/assets/115237/be94517b-9cb7-46e2-ae96-fcf6767ce4ba">
<img width="187" alt="Screenshot 2024-04-16 at 21 58 50"
src="https://github.com/go-gitea/gitea/assets/115237/c13a1959-5c5a-4e88-9225-e5f6fb72e3e0">
2024-04-17 00:39:19 +02:00
silverwind
3746a625f5
Tweak repo buttons on mobile and labeled button border-radius (#30503)
Fixes: https://github.com/go-gitea/gitea/issues/30514
Fixes:
https://github.com/go-gitea/gitea/pull/30288#issuecomment-2057466623

- Fix border-radius regression from
https://github.com/go-gitea/gitea/pull/30475
- Fix and simplify hover state
- Move the modal HTML so it does not interfere with the CSS
- Make the star and unwatch text show on mobile. There is still plenty
of space, below is iPhone 12 viewport size

<img width="696" alt="Screenshot 2024-04-15 at 20 34 03"
src="https://github.com/go-gitea/gitea/assets/115237/af90bb00-4671-4973-a255-8eb44ee6ba8d">
<img width="230" alt="Screenshot 2024-04-15 at 20 31 42"
src="https://github.com/go-gitea/gitea/assets/115237/986ef533-7a01-4bb0-8dcd-fd19e4259e84">
<img width="233" alt="Screenshot 2024-04-15 at 20 31 47"
src="https://github.com/go-gitea/gitea/assets/115237/5b825dd8-0ccc-4d56-9d8f-774abb935b68">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-16 17:46:12 +02:00
silverwind
3b40ebf895
Remove active border on pointing menu (#30486)
It looks better when these menus don't flash a border-bottom on click.
2024-04-15 18:22:53 +00:00
silverwind
2dc7e9e5fe
Fix button color on red and green buttons (#30500)
Previously these colors were provided by fomantic css. I missed them.

Fixes: https://github.com/go-gitea/gitea/issues/30499
Regressed by: https://github.com/go-gitea/gitea/pull/30475
2024-04-15 17:20:32 +00:00
silverwind
ef3941f2eb
Revert 100% label max-width (#30481)
Partial revert of https://github.com/go-gitea/gitea/pull/30479

It's causing problems at least here:
https://github.com/go-gitea/gitea/pull/30344#discussion_r1564895591

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-04-15 01:04:02 +00:00
wxiaoguang
b84baf21fa
Improve flex ellipsis (#30479)
![image](https://github.com/go-gitea/gitea/assets/2114189/857794d8-2170-42be-a5bf-47ebacbafebd)

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-04-14 21:43:30 +02:00
silverwind
9946353282
Remove fomantic button module (#30475)
CSS-only module. Button colors are reduced to this:

<img width="639" alt="Screenshot 2024-04-14 at 15 36 07"
src="https://github.com/go-gitea/gitea/assets/115237/882d6c02-d1de-44f2-b707-db02a9f5070d">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-04-14 17:53:52 +00:00
silverwind
f3267548ab
Remove fomantic menu module (#30325)
A lot of variants are in use, so the diff stat isn't so great.

Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-14 11:43:46 +00:00
silverwind
044cc169e7
Use flex-container for dashboard layout (#30214)
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>
2024-04-14 13:39:11 +02:00
silverwind
4b1063f3db
Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453)
Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` and:

- Remove all jQuery except the necessary fomantic dropdown init
- Remove the recursion, instead bind event listeners to common parent container nodes

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-14 18:44:11 +08:00
silverwind
6999a88fd9
Pulse page improvements (#30149)
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="https://github.com/go-gitea/gitea/assets/115237/70f72c30-e69f-4ecb-882f-32b8bc94d638">
<img width="1020" alt="Screenshot 2024-03-27 at 23 41 02"
src="https://github.com/go-gitea/gitea/assets/115237/a35dbbda-515c-40b0-938a-d759f9686b8e">
2024-04-14 09:21:16 +00:00
silverwind
50099d7af4
Various improvements for long file and commit names (#30374)
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="https://github.com/go-gitea/gitea/assets/115237/5ccbb3d6-643a-4f60-ba79-3572b36d5182">
<hr>
<img width="711" alt="Screenshot 2024-04-09 at 21 44 24"
src="https://github.com/go-gitea/gitea/assets/115237/6ffe8fbb-407c-4aa7-b591-3d80daea7d57">
<hr>
<img width="439" alt="Screenshot 2024-04-09 at 21 19 03"
src="https://github.com/go-gitea/gitea/assets/115237/1ec7f6e9-2fd8-4841-87eb-6ca02ab9cd61">
<hr>
<img width="444" alt="Screenshot 2024-04-09 at 21 18 52"
src="https://github.com/go-gitea/gitea/assets/115237/70931b9e-5841-477e-b3bc-98f8d2662964">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-10 06:13:22 +00:00
silverwind
fec754258c
Fix floated list items (#30377)
Fixes https://github.com/go-gitea/gitea/issues/30365, regression from
https://github.com/go-gitea/gitea/pull/30281
2024-04-10 10:16:55 +08:00
silverwind
72dc75e594
Reduce checkbox size to 15px (#30346)
16 seems to big, 14 too small. Let's do 15. Alignment:

<img width="181" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/f2988611-dee2-492e-a18f-dc5ab3a1cd6c">
2024-04-09 03:09:43 +00:00
silverwind
019857a701
Add --page-spacing variable, fix admin dashboard notice (#30302)
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="https://github.com/go-gitea/gitea/assets/115237/3e81e707-e9ff-4b7f-a211-3d98f4f85353">
---
<img width="1327" alt="Screenshot 2024-04-06 at 01 35 45"
src="https://github.com/go-gitea/gitea/assets/115237/aad196c0-9e21-4c06-ae59-7e33a76c61e1">
---
<img width="1321" alt="Screenshot 2024-04-06 at 01 35 31"
src="https://github.com/go-gitea/gitea/assets/115237/785f6c5d-08b6-4e66-aa16-aeca7cfed3ad">
2024-04-07 15:45:36 +00:00
silverwind
94aad35a12
Fix right-aligned input icons (#30301)
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="https://github.com/go-gitea/gitea/assets/115237/f9168db5-0f69-4b5d-ba17-b60145ac4a09">
<img width="285" alt="Screenshot 2024-04-06 at 01 11 49"
src="https://github.com/go-gitea/gitea/assets/115237/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="https://github.com/go-gitea/gitea/assets/115237/1919220b-390e-463a-8e3d-33a3556bf111">
<img width="438" alt="Screenshot 2024-04-06 at 01 11 39"
src="https://github.com/go-gitea/gitea/assets/115237/fd94f8e4-1d56-4b04-99e3-1cd240bd7ab4">
2024-04-07 16:53:28 +08:00
silverwind
649aada366
Remove fomantic list module (#30281)
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">
2024-04-06 21:33:45 +00:00
silverwind
1195be41a1
Replace coloris with vanilla-colorful (#30201)
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="https://github.com/go-gitea/gitea/assets/115237/7639b911-a2d7-4f5c-bffd-a9d84561e747">
2024-04-03 09:15:06 +00:00
silverwind
944c76e784
Fix spacing in issue navbar (#30238)
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
2024-04-02 11:48:07 +00:00
silverwind
ff334749f5
Remove fomantic input module (#30194)
Another pure CSS module. Some styling is part of the `form` module which
will likely follow next.
2024-03-31 16:06:06 +00:00
silverwind
8da9130c1f
Prevent flash of dropdown menu on labels list (#30215)
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>
2024-03-31 16:58:55 +02:00
silverwind
640850e15f
Fix unclickable checkboxes (#30195)
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.
2024-03-31 02:00:58 +02:00
HEREYUA
c9068ef9e4
Fix:the rounded corners of the folded file are not displayed correctly (#29953)
Fix:    [#29933](https://github.com/go-gitea/gitea/issues/29933)

**Before**


![image](https://github.com/go-gitea/gitea/assets/37935145/71ec80f6-5896-4e4a-b686-4d792c11ebe2)


**After**


![image](https://github.com/go-gitea/gitea/assets/37935145/81348a61-946a-4562-881d-8d873e50228f)

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-03-29 15:39:46 +00:00
silverwind
8fd15990c5
Remove fomantic checkbox module (#30162)
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="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db">

<img width="499" alt="Screenshot 2024-03-28 at 21 00 07"
src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce">

<img width="83" alt="Screenshot 2024-03-28 at 22 14 34"
src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474">

---------

Co-authored-by: delvh <dev.lh@web.de>
2024-03-29 04:56:01 +00:00
silverwind
b08c7afe5f
Fix table alignment classes (#30144)
Fixes https://github.com/go-gitea/gitea/issues/30142, regression from
https://github.com/go-gitea/gitea/pull/30047. I searched the codebase
and only `bottom aligned` was definitely not in use so I removed it.
2024-03-27 21:47:40 +00:00
silverwind
c85619b82d
Fix download buttons on branches page (#30147)
Fixes https://github.com/go-gitea/gitea/issues/30143, regression from
https://github.com/go-gitea/gitea/pull/29920.

We have `.button` on the repo page, but on the branch page it's a
`.btn`. Eventually we should find a solution to have a single button
class but until then this solution should be acceptable.
2024-03-27 21:05:49 +01:00
silverwind
643e6b0958
Remove fomantic label module (#30081)
Of note is the CSS has references to "floating label" and "transparent
label" but I could not find those anywhere in the code. They are related
to https://github.com/go-gitea/gitea/pull/3939, but I think these have
long been removed.

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-03-27 09:58:02 +00:00
silverwind
30a561ce56
Restore aligned grid column CSS (#30106)
Fixes #30097, regression from #29894.
2024-03-26 15:37:14 +00:00
silverwind
dd75237c34
Fix table header text-align (#30084)
Fix regression from https://github.com/go-gitea/gitea/pull/30047.
Apparently tables have certain user-agent styles that center inside
`<th>` etc. Restored the original fomantic rules for these.

Before:
<img width="1332" alt="Screenshot 2024-03-25 at 21 59 33"
src="https://github.com/go-gitea/gitea/assets/115237/e06a5509-b505-4752-9b6e-91d5ed49f61d">

After:
<img width="1330" alt="Screenshot 2024-03-25 at 21 59 40"
src="https://github.com/go-gitea/gitea/assets/115237/6444817f-dd61-4a1e-a8b3-959c2780148d">
2024-03-26 06:50:04 +00:00
silverwind
f73d891fc4
Remove fomantic table module (#30047)
Big CSS module. I tested basic functionality on admin and commits table.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-03-25 16:40:50 +01:00
silverwind
bbaf62589f
Fix button hover border (#30048)
Fix regression from https://github.com/go-gitea/gitea/pull/30014. The
rule was to broad and affecting things like `primary` button
unintentionally.
2024-03-25 10:14:43 +00:00
silverwind
ec3d467f15
Migrate gt-hidden to tw-hidden (#30046)
We have to define this one in helpers.css because tailwind only
generates a single class but certain things rely on this being
double-class. Command ran:

```sh
perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/*

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-24 18:23:38 +00:00
silverwind
8d93cea296
Remove fomantic segment module (#30042)
Another CSS-only module. Also, I re-ordered the imports based on
[original fomantic
order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less).
2024-03-24 16:48:06 +00:00
silverwind
2d281704de
Remove fomantic container module (#30036)
Small CSS module. There was a ordering conflict between `.ui.menu` and
`.ui.container` which I've solved by adding the `.ui.menu` rule into
base.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-03-24 14:04:18 +00:00
silverwind
f22fe4e194
Remove fomantic header module (#30033)
Likely still a few useless classes left, but I think I at least don't
have missed any.

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-03-24 14:32:19 +01:00
silverwind
db01bf6cc8
Various code view improvements (#30014)
1. Restore missing styles for message close icon
2. Move `code-line-button` so that it does not go off-screen on small
viewports
3. Make `code-line-button` look and behave like other buttons
4. Make `code-line-button` work in blame
5. Make the active selection span the whole line, not just the code part
6. Tweak colors, make dark theme code bg darker, make line numbers same
color in diff and file view.
7. Move code background to parent, fixing border radius and other
problems
8. Enable code wrap in blame
9. Improve blame responsiveness
10. Remove `--color-code-sidebar-bg` in blame, now it uses same
background as code
11. Rename `--color-active-line` to `--color-highlight-bg`
12. Add `--color-highlight-bg`
13. Fix button group borders on hover and border-right on last button.

<img width="1343" alt="Screenshot 2024-03-23 at 22 34 13"
src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554">
<img width="1334" alt="Screenshot 2024-03-23 at 22 34 26"
src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d">

<img width="1338" alt="Screenshot 2024-03-23 at 22 34 57"
src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac">
<img width="1337" alt="Screenshot 2024-03-23 at 22 34 42"
src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85">

Fixes: https://github.com/go-gitea/gitea/issues/18074
2024-03-24 12:14:03 +00:00
silverwind
3ccda41a53
Introduce .secondary-nav and handle .page-content spacing universally (#29982)
Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce
`.secondary-nav` as a universal way for styling and margin adjustments
inside `.page-content`.

If the first child of `.page-content` is `.secondary-nav`, we add margin
below it, otherwise we add padding to the first child. Notable changes:

- `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`.
- `navbar` class is removed.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-22 23:54:09 +00:00
wxiaoguang
bfa160fc98
Refactor repo header/list (#29969)
1. Use general "mobile-only" and "not-mobile" CSS styles, remove some`@media (max-width: 767.98px)` tricks
2. Use `CountFmt` for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page)
2024-03-21 17:04:03 +00:00
silverwind
286268c915
Remove fomantic grid module (#29894)
Removed the grid module and moved the used parts it into our own CSS,
eliminating around 75% unused CSS in turn.
2024-03-20 22:05:24 +00:00
silverwind
4b1c88628a
Load citation JS only when needed (#29855)
Previously, the citation js would load every time when opening a citable
repo. Now it only loads when the user clicks the button for it. The
loading state is representend with a spinner on the button:

<img width="83" alt="Screenshot 2024-03-17 at 00 25 13"
src="https://github.com/go-gitea/gitea/assets/115237/29649089-13f3-4974-ab81-e12c0f8e651f">

Diff ist best viewed with whitespace hidden.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-03-17 11:04:59 +01:00
silverwind
4e547822f3
Remove fomantic message module (#29856)
Remove this CSS-only module, which gives a nice reduction in CSS size.
Should look exactly like before.
2024-03-17 11:21:14 +08:00
silverwind
256a1eeb9a
Add <overflow-menu>, rename webcomponents (#29400)
1. Add `<overflow-menu>` web component
2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames
match.

<img width="439" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74">

<img width="444" alt="Screenshot 2024-03-02 at 21 36 52"
src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e">

<img width="537" alt="Screenshot 2024-03-03 at 03 05 06"
src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245">


![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786)


![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a)

TODO:

- [x] Check if removal of `requestAnimationFrame` is possible to avoid
flash of content. Likely needs a `MutationObserver`.
- [x] Hide tippy when button is removed from DOM.
- [x] ~~Implement right-aligned items
(https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it.
- [x] Clean up CSS so base element has no background and add background
via tailwind instead.
- [x] Use it for org and user page.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-15 02:05:31 +00:00
silverwind
35def319fd
Fix Safari spinner rendering (#29801)
Fixes: https://github.com/go-gitea/gitea/issues/29041
Fixes: https://github.com/go-gitea/gitea/pull/29713

Any of the `width: *-content` properties seem to workaround this Webkit
bug, this one seemed most suitable.
2024-03-14 22:04:33 +00:00
silverwind
850fc2516e
Apply compact padding to small buttons with svg icons (#29471)
The buttons on the repo release tab were larger in height than on other
tabs because one of them contained the RSS icon which stretched the
button height by 3px. Workaround this problem by applying the "compact"
padding to any such button. They are within 0.4px in height now to
non-icon buttons.

Before:

<img width="406" alt="Screenshot 2024-02-28 at 15 30 23"
src="https://github.com/go-gitea/gitea/assets/115237/805bb93a-6fe4-40a0-82d1-03001bee8ecf">

After:

<img width="407" alt="Screenshot 2024-02-28 at 15 38 43"
src="https://github.com/go-gitea/gitea/assets/115237/27707588-890f-4852-ab08-105a57eda880">


For comparison, button on issue tab:

<img width="452" alt="Screenshot 2024-02-28 at 15 31 46"
src="https://github.com/go-gitea/gitea/assets/115237/74ac13d5-d016-49ba-9dd9-40ed32a748e9">
2024-02-28 21:26:12 +01:00