Add --page-spacing variable, fix admin dashboard notice (#30302) (#30323)

Backport #30302 by @silverwind

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">

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit db370c47a69b2fb17d8b16c8025451efde5c33b6)
This commit is contained in:
Giteabot 2024-04-08 10:04:24 +08:00 committed by Earl Warren
parent 3f6f134260
commit 7dfe3fe2cb
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
3 changed files with 11 additions and 6 deletions

View file

@ -1,7 +1,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-sequence-number="{{.SequenceNumber}}">
<div class="ui container">
{{$notificationUnreadCount := call .NotificationUnreadCount}}
<div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
<div class="tw-flex tw-items-center tw-justify-between tw-mb-[--page-spacing]">
<div class="small-menu-items ui compact tiny menu">
<a class="{{if eq .Status 1}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=unread">
{{ctx.Locale.Tr "notification.unread"}}