From d80fca38e94eeef9118fb777d225ce95d2594e72 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 7 Apr 2024 17:45:36 +0200
Subject: [PATCH] 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">
(cherry picked from commit 019857a7015cae32c12b5eac0b895c05f0264b77)
---
templates/user/notification/notification_div.tmpl | 2 +-
web_src/css/base.css | 12 ++++++++----
web_src/css/modules/flexcontainer.css | 3 ++-
3 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 04e79ba749..bf3b51ee3b 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -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"}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 17c3f2ee68..ffbf5d01c4 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -25,6 +25,7 @@
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
--tab-size: 4;
--checkbox-size: 16px; /* height and width of checkbox and radio inputs */
+ --page-spacing: 16px; /* space between page elements */
}
:root * {
@@ -594,11 +595,14 @@ img.ui.avatar,
margin-bottom: 14px;
}
-/* add padding to all content when there is no .secondary.nav. this uses padding instead of
- margin because with the negative margin on .ui.grid we would have to set margin-top: 0,
- but that does not work universally for all pages */
+/* add margin to all pages when there is no .secondary.nav */
.page-content > :first-child:not(.secondary-nav) {
- padding-top: 14px;
+ margin-top: var(--page-spacing);
+}
+/* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need
+ to compensate here */
+.page-content > :first-child.ui.grid {
+ margin-top: calc(var(--page-spacing) - 1rem);
}
.ui.pagination.menu .active.item {
diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css
index 0b559f1e7d..1ca513687f 100644
--- a/web_src/css/modules/flexcontainer.css
+++ b/web_src/css/modules/flexcontainer.css
@@ -2,7 +2,8 @@
.flex-container {
display: flex !important;
- gap: 16px;
+ gap: var(--page-spacing);
+ margin-top: var(--page-spacing);
}
.flex-container-nav {