oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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)

authored by

silverwind and committed by
Gergely Nagy d80fca38 50e05875

+11 -6
+1 -1
templates/user/notification/notification_div.tmpl
··· 1 1 <div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-sequence-number="{{.SequenceNumber}}"> 2 2 <div class="ui container"> 3 3 {{$notificationUnreadCount := call .NotificationUnreadCount}} 4 - <div class="tw-flex tw-items-center tw-justify-between tw-mb-4"> 4 + <div class="tw-flex tw-items-center tw-justify-between tw-mb-[--page-spacing]"> 5 5 <div class="small-menu-items ui compact tiny menu"> 6 6 <a class="{{if eq .Status 1}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=unread"> 7 7 {{ctx.Locale.Tr "notification.unread"}}
+8 -4
web_src/css/base.css
··· 25 25 --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */ 26 26 --tab-size: 4; 27 27 --checkbox-size: 16px; /* height and width of checkbox and radio inputs */ 28 + --page-spacing: 16px; /* space between page elements */ 28 29 } 29 30 30 31 :root * { ··· 594 595 margin-bottom: 14px; 595 596 } 596 597 597 - /* add padding to all content when there is no .secondary.nav. this uses padding instead of 598 - margin because with the negative margin on .ui.grid we would have to set margin-top: 0, 599 - but that does not work universally for all pages */ 598 + /* add margin to all pages when there is no .secondary.nav */ 600 599 .page-content > :first-child:not(.secondary-nav) { 601 - padding-top: 14px; 600 + margin-top: var(--page-spacing); 601 + } 602 + /* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need 603 + to compensate here */ 604 + .page-content > :first-child.ui.grid { 605 + margin-top: calc(var(--page-spacing) - 1rem); 602 606 } 603 607 604 608 .ui.pagination.menu .active.item {
+2 -1
web_src/css/modules/flexcontainer.css
··· 2 2 3 3 .flex-container { 4 4 display: flex !important; 5 - gap: 16px; 5 + gap: var(--page-spacing); 6 + margin-top: var(--page-spacing); 6 7 } 7 8 8 9 .flex-container-nav {