mirror of
https://github.com/go-gitea/gitea
synced 2024-11-05 01:34:25 +00:00
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="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"> Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
parent
cc95def2d2
commit
db370c47a6
@ -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"}}
|
||||
|
@ -24,6 +24,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 * {
|
||||
@ -656,11 +657,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 {
|
||||
|
@ -2,7 +2,8 @@
|
||||
|
||||
.flex-container {
|
||||
display: flex !important;
|
||||
gap: 16px;
|
||||
gap: var(--page-spacing);
|
||||
margin-top: var(--page-spacing);
|
||||
}
|
||||
|
||||
.flex-container-nav {
|
||||
|
Loading…
Reference in New Issue
Block a user