silverwind
97b078d226
Add background to dashboard navbar, fix missing padding ( #29940 )
...
Two small CSS fixes:
1. Add background and reduced padding/avatar size to dashboard navbar.
We use that background already in a number of "secondary navbars", so it
fits.
<img width="1344" alt="Screenshot 2024-03-20 at 18 18 21"
src="https://github.com/go-gitea/gitea/assets/115237/ce5ebedc-e607-42c7-b7b4-b7a4c0ee68f2 ">
2. Fix padding on top of user settings and subscriptions, regressed by
https://github.com/go-gitea/gitea/pull/29922 .
8 months ago
silverwind
8cad44f410
Remove the negative margin from `.page-content` ( #29922 )
...
The negative margin was suboptimal and presents a few unnecessary
challenges while styling the page. Remove it and add custom margin
values, which slightly changes the height a few things near the top of
the page as well:
15px less height of explore and login navbar:
<img width="899" alt="Screenshot 2024-03-20 at 00 52 34"
src="https://github.com/go-gitea/gitea/assets/115237/72a01ca4-5d17-4a0f-b915-61f95054fcb1 ">
15px reduced padding-top height of "user bar" and equal 4px padding
added:
<img width="484" alt="Screenshot 2024-03-20 at 00 52 50"
src="https://github.com/go-gitea/gitea/assets/115237/a8507e6d-372d-4a8b-9048-66fcf8a5facd ">
3px less padding on top of repo:
<img width="552" alt="Screenshot 2024-03-20 at 00 53 49"
src="https://github.com/go-gitea/gitea/assets/115237/dede6e44-7688-440f-a1b6-13532638ae03 ">
8 months ago
puni9869
0989f437df
Dashboard context dropdown position fix on landing page in mobile view. ( #27047 )
...
as title.
Screensots
before
![image](https://github.com/go-gitea/gitea/assets/80308335/d72da379-1fb1-4d75-9f3e-f70e06ad4065 )
after
![image](https://github.com/go-gitea/gitea/assets/80308335/110ea806-feed-4947-bf56-2985b1e1ec5f )
1 year ago
silverwind
9b76df53dc
Minor dashboard tweaks, fix flex-list margins ( #26829 )
...
Some small dashboard tweaks:
- Remove margin-bottom from divider so first item does not appear to
have un-equal margins
- Restore previous icon color
- Add slight margin-right to icon
Before:
<img width="783" alt="Screenshot 2023-08-31 at 00 10 28"
src="https://github.com/go-gitea/gitea/assets/115237/b75f70d7-8704-4afb-866d-fea0484c52d4 ">
After:
<img width="783" alt="Screenshot 2023-08-31 at 00 10 08"
src="https://github.com/go-gitea/gitea/assets/115237/50ed0c47-6f7c-449e-a054-13091369d43f ">
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
1 year ago
delvh
dca2f9371d
Unify `border-radius` behavior ( #26770 )
...
## Changes
- no more hardcoded `border-radius`es (apart from `0`)
- no more value inconsistencies
- no more guessing what pixel value you should use
- two new variables:
- `--border-radius-medium` (for elements where the normal border radius
does not suffice)
- `--border-radius-circle` (for displaying circles)
---------
Co-authored-by: silverwind <me@silverwind.io>
1 year ago
wxiaoguang
e4b2bdfbc0
More improvements for the "flex list" and the dashboard list ( #26675 )
...
Follow #26649 and #25790 and add one more example (text truncate) in the devtest page
1 year ago
Denys Konovalov
b9baed2c74
Introduce `flex-list` & `flex-item` elements for Gitea UI ( #25790 )
...
This PR introduces a new UI element type for Gitea called `flex-item`.
It consists of a horizontal card with a leading, main and trailing part:
![grafik](https://github.com/go-gitea/gitea/assets/47871822/395dd3f3-3906-4481-8f65-be6ac0acbe03 )
The idea behind it is that in Gitea UI, we have many cases where we use
this kind of layout, but it is achieved in many different ways:
- grid layout
- `.ui.list` with additional hacky flexbox
- `.ui.key.list` - looks to me like a style set originally created for
ssh/gpg key list, was used in many other places
- `.issue.list` - created for issue cards, used in many other places
- ...
This new style is based on `.issue.list`, specifically the refactoring
of it done in #25750 .
In this PR, the new element is introduced and lots of templates are
being refactored to use that style. This allows to remove a lot of
page-specific css, makes many of the elements responsive or simply
provides a cleaner/better-looking way to present information.
A devtest section with the new style is also available.
<details>
<summary>Screenshots (left: before, right: after)</summary>
![Bildschirmfoto vom 2023-07-09
21-01-21](https://github.com/go-gitea/gitea/assets/47871822/545b7da5-b300-475f-bd6d-b7d836950bb5 )
![Bildschirmfoto vom 2023-07-09
21-01-56](https://github.com/go-gitea/gitea/assets/47871822/b6f70415-6795-4f71-a5ea-117d56107ea1 )
![Bildschirmfoto vom 2023-07-09
21-02-45](https://github.com/go-gitea/gitea/assets/47871822/47407121-3f2a-4778-8f6d-ad2687c2e7b3 )
![Bildschirmfoto vom 2023-07-09
21-03-44](https://github.com/go-gitea/gitea/assets/47871822/76167aaf-c3b2-46f6-9ffd-709f20aa6a34 )
![Bildschirmfoto vom 2023-07-09
21-04-52](https://github.com/go-gitea/gitea/assets/47871822/af8fdde5-711e-4524-99cf-fb5d68af85b9 )
![Bildschirmfoto vom 2023-07-09
21-05-25](https://github.com/go-gitea/gitea/assets/47871822/ae406946-e3e4-4109-abfe-b3588a07b468 )
![Bildschirmfoto vom 2023-07-09
21-06-35](https://github.com/go-gitea/gitea/assets/47871822/2dbacc04-24d6-4f91-9e42-e16d6e4b5f1f )
![Bildschirmfoto vom 2023-07-09
21-09-03](https://github.com/go-gitea/gitea/assets/47871822/d3ca4e56-a72f-4179-adc8-98bfd638025b )
![Bildschirmfoto vom 2023-07-09
21-09-44](https://github.com/go-gitea/gitea/assets/47871822/df1fa689-499c-4e54-b6fb-3b81644b725f )
![Bildschirmfoto vom 2023-07-09
21-10-27](https://github.com/go-gitea/gitea/assets/47871822/b21cac71-a85a-4c8c-bb99-ab90373d8e09 )
![Bildschirmfoto vom 2023-07-09
21-11-12](https://github.com/go-gitea/gitea/assets/47871822/89be39cf-0af9-4f2d-9fca-42f9eb5e7824 )
![Bildschirmfoto vom 2023-07-09
21-12-01](https://github.com/go-gitea/gitea/assets/47871822/079579ea-1ecb-49c0-b32b-b59ed957caec )
![Bildschirmfoto vom 2023-07-09
21-17-44](https://github.com/go-gitea/gitea/assets/47871822/61ac6ec4-a319-4d5c-9c99-2e02a77295ba )
![Bildschirmfoto vom 2023-07-09
21-18-27](https://github.com/go-gitea/gitea/assets/47871822/5b55b73f-6244-47f7-a3e6-c5e4a7474585 )
![Bildschirmfoto vom 2023-07-09
21-19-18](https://github.com/go-gitea/gitea/assets/47871822/c1b7c22e-3e5a-46d4-b8d6-5560db478c0b )
![Bildschirmfoto vom 2023-07-09
21-29-13](https://github.com/go-gitea/gitea/assets/47871822/82ffca8d-ab2e-4a18-9954-5b685bf6a422 )
![Bildschirmfoto vom 2023-07-09
21-30-11](https://github.com/go-gitea/gitea/assets/47871822/ad2fdccc-2be8-41bb-bfdc-a084aa387b61 )
![Bildschirmfoto vom 2023-07-09
21-32-44](https://github.com/go-gitea/gitea/assets/47871822/2d298ba7-d084-48b5-a139-f86d56262110 )
![Bildschirmfoto vom 2023-07-09
21-33-28](https://github.com/go-gitea/gitea/assets/47871822/4cbd838e-9de8-4ad0-8ed9-438da5c9a5cb )
</details>
---------
Co-authored-by: Giteabot <teabot@gitea.io>
1 year ago
silverwind
6a075589bf
Fix mobile navbar and misc cleanups ( #25134 )
...
- Fix and improve mobile navbar layout
- Apply all cleanups suggested in
https://github.com/go-gitea/gitea/pull/25111
- Make media query breakpoints match Fomantic's exactly
- Clean up whitespace in class on navbar items
Mobile navbar before and after:
<img width="745" alt="Screenshot 2023-06-08 at 08 40 56"
src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28 ">
<img width="739" alt="Screenshot 2023-06-08 at 08 41 23"
src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521 ">
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
1 year ago
wxiaoguang
48bfea6705
Fix incorrect issuel filter menu style ( #25018 )
...
Before:
<details>
![image](https://github.com/go-gitea/gitea/assets/2114189/b67b3a83-ebe4-4dac-b4b2-de93401d7ab2 )
</details>
After:
<details>
![image](https://github.com/go-gitea/gitea/assets/2114189/fbf34418-2ddf-4d47-82da-155823501d31 )
![image](https://github.com/go-gitea/gitea/assets/2114189/1b275de3-8c16-4873-b056-0df430c882f0 )
</details>
1 year ago
silverwind
245f2c08db
Repo list improvements, fix bold helper classes ( #24935 )
...
- Fix bold helper classes that were broken because of CSS syntax error
- Refined the repo list CSS and layout
- Removing bold
- Downsize the mirror icon to fit
- Fix icon positions
- Adapted the org list to match
- Center the '+' icon and mute it
<img width="385" alt="Screenshot 2023-05-25 at 18 38 31"
src="https://github.com/go-gitea/gitea/assets/115237/ac8d6efb-5751-4845-a4ab-db1ddaf36ec3 ">
<img width="384" alt="Screenshot 2023-05-25 at 18 30 29"
src="https://github.com/go-gitea/gitea/assets/115237/bbd39ae7-da9d-4c6f-bfe3-42f28b7a74c3 ">
1 year ago
yp05327
4aec1f87a4
Remove highlight in repo list ( #24675 )
...
Before:
![image](https://github.com/go-gitea/gitea/assets/18380374/aa5e9f1f-48ff-4e9f-a693-23a34e390760 )
After:
![image](https://github.com/go-gitea/gitea/assets/18380374/a4b58a6c-4ea3-4ded-80df-2e650d39a1d3 )
private or internal repos have `lock` icon, no need to add highlights to
them.
2 years ago
Krzysztof Jeziorny
fcad9fd19f
Vertical widths of containers removed ( #24184 )
...
A vertical overflow appears in Firefox 112/MacOS 12.6 when the system
setting for scrollbars is to "Always" show them.
---
Here, the fixed 100vw container widths are removed, which removes the
overflow. It is, however, only simulated in Developer Tools in latest
Firefox and Chromium, so please test on a Gitea installation.
2 years ago
silverwind
202803fc69
Replace Less with CSS ( #23481 )
...
Ran most of the Less files through the Less compiler and Prettier and
then followed up with a round of manual fixes.
The Less compiler had unfortunately stripped all `//` style comments
that I had to restore (It did preserve `/* */` comments). Other fixes
include duplicate selector removal which were revealed after the
transpilation and which weren't caught by stylelint before but now are.
Fixes: https://github.com/go-gitea/gitea/issues/15565
2 years ago