gitea/templates/explore/navbar.tmpl

<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
	<div class="overflow-menu-items tw-justify-center">
		<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
			{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
		</a>
		{{if not .UsersPageIsDisabled}}
			<a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users">
				{{svg "octicon-person"}} {{ctx.Locale.Tr "explore.users"}}
			</a>
		{{end}}
		{{if not .OrganizationsPageIsDisabled}}
		<a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations">
			{{svg "octicon-organization"}} {{ctx.Locale.Tr "explore.organizations"}}
		</a>
		{{end}}
		{{if and (not ctx.Consts.RepoUnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled (not .CodePageIsDisabled)}}
		<a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code">
			{{svg "octicon-code"}} {{ctx.Locale.Tr "explore.code"}}
		</a>
		{{end}}
	</div>
</overflow-menu>
Introduce `.secondary-nav` and handle `.page-content` spacing universally (#29982) Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce `.secondary-nav` as a universal way for styling and margin adjustments inside `.page-content`. If the first child of `.page-content` is `.secondary-nav`, we add margin below it, otherwise we add padding to the first child. Notable changes: - `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`. - `navbar` class is removed. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> 2024-03-23 07:54:09 +08:00			`<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">`
Add `<overflow-menu>`, rename webcomponents (#29400) 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> 2024-03-15 10:05:31 +08:00			`<div class="overflow-menu-items tw-justify-center">`
Use mask-based fade-out effect for `.new-menu` (#27181) The `.new-menu` was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child `new-menu-inner` which was present on all these menus except explore where I added it. There is no visual difference except that the items on the explore page have no `gap` between them any longer, making it consistent with other menus. Before and after: <img width="221" alt="Screenshot 2023-09-21 at 21 13 19" src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29"> <img width="222" alt="Screenshot 2023-09-21 at 21 32 36" src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b"> Also, this cleans up the related CSS vars: - `--color-header-wrapper-transparent` is removed, no longer needed - `--color-header-wrapper` is defined in base theme as well, was previously unset and therefor transparent. [no whitespace diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1) [demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/) 2023-09-25 09:03:00 +08:00			`<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">`
Always use `ctx.Locale.Tr` inside templates (#27231) 2023-09-25 16:56:50 +08:00			`{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}`
Add ui.explore settings to control view of explore pages (2) (#14094) This is an alternative PR to #13687. Add `[ui.explore]` settings to allow restricting the explore pages to logged in users only and to disable the users explore page. The two proposed settings are: - `REQUIRE_SIGNIN_VIEW`: Only allows access to the explore pages if the user is signed in. Also restricts - `/api/v1/user/search` - `/api/v1/users/{username}` - `/api/v1/users/{username}/repos` - but does not restrict `/api/v1/users/{username}/heatmap` - `DISABLE_USERS_PAGE`: Disables the /explore/users page Fix #2908 Close #13687 Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: 6543 <6543@obermui.de> 2021-03-11 21:40:54 +08:00			`</a>`
Add `DISABLE_ORGANIZATIONS_PAGE` and `DISABLE_CODE_PAGE` settings for explore pages and fix an issue related to user search (#32288) These settings can allow users to only display the repositories explore page. Thanks to yp05327 and wxiaoguang ! --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> 2024-10-22 13:09:19 +08:00			`{{if not .UsersPageIsDisabled}}`
Use mask-based fade-out effect for `.new-menu` (#27181) The `.new-menu` was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child `new-menu-inner` which was present on all these menus except explore where I added it. There is no visual difference except that the items on the explore page have no `gap` between them any longer, making it consistent with other menus. Before and after: <img width="221" alt="Screenshot 2023-09-21 at 21 13 19" src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29"> <img width="222" alt="Screenshot 2023-09-21 at 21 32 36" src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b"> Also, this cleans up the related CSS vars: - `--color-header-wrapper-transparent` is removed, no longer needed - `--color-header-wrapper` is defined in base theme as well, was previously unset and therefor transparent. [no whitespace diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1) [demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/) 2023-09-25 09:03:00 +08:00			`<a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users">`
Always use `ctx.Locale.Tr` inside templates (#27231) 2023-09-25 16:56:50 +08:00			`{{svg "octicon-person"}} {{ctx.Locale.Tr "explore.users"}}`
Use mask-based fade-out effect for `.new-menu` (#27181) The `.new-menu` was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child `new-menu-inner` which was present on all these menus except explore where I added it. There is no visual difference except that the items on the explore page have no `gap` between them any longer, making it consistent with other menus. Before and after: <img width="221" alt="Screenshot 2023-09-21 at 21 13 19" src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29"> <img width="222" alt="Screenshot 2023-09-21 at 21 32 36" src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b"> Also, this cleans up the related CSS vars: - `--color-header-wrapper-transparent` is removed, no longer needed - `--color-header-wrapper` is defined in base theme as well, was previously unset and therefor transparent. [no whitespace diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1) [demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/) 2023-09-25 09:03:00 +08:00			`</a>`
			`{{end}}`
Add `DISABLE_ORGANIZATIONS_PAGE` and `DISABLE_CODE_PAGE` settings for explore pages and fix an issue related to user search (#32288) These settings can allow users to only display the repositories explore page. Thanks to yp05327 and wxiaoguang ! --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> 2024-10-22 13:09:19 +08:00			`{{if not .OrganizationsPageIsDisabled}}`
Use mask-based fade-out effect for `.new-menu` (#27181) The `.new-menu` was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child `new-menu-inner` which was present on all these menus except explore where I added it. There is no visual difference except that the items on the explore page have no `gap` between them any longer, making it consistent with other menus. Before and after: <img width="221" alt="Screenshot 2023-09-21 at 21 13 19" src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29"> <img width="222" alt="Screenshot 2023-09-21 at 21 32 36" src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b"> Also, this cleans up the related CSS vars: - `--color-header-wrapper-transparent` is removed, no longer needed - `--color-header-wrapper` is defined in base theme as well, was previously unset and therefor transparent. [no whitespace diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1) [demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/) 2023-09-25 09:03:00 +08:00			`<a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations">`
Always use `ctx.Locale.Tr` inside templates (#27231) 2023-09-25 16:56:50 +08:00			`{{svg "octicon-organization"}} {{ctx.Locale.Tr "explore.organizations"}}`
Use mask-based fade-out effect for `.new-menu` (#27181) The `.new-menu` was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child `new-menu-inner` which was present on all these menus except explore where I added it. There is no visual difference except that the items on the explore page have no `gap` between them any longer, making it consistent with other menus. Before and after: <img width="221" alt="Screenshot 2023-09-21 at 21 13 19" src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29"> <img width="222" alt="Screenshot 2023-09-21 at 21 32 36" src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b"> Also, this cleans up the related CSS vars: - `--color-header-wrapper-transparent` is removed, no longer needed - `--color-header-wrapper` is defined in base theme as well, was previously unset and therefor transparent. [no whitespace diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1) [demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/) 2023-09-25 09:03:00 +08:00			`</a>`
Add `DISABLE_ORGANIZATIONS_PAGE` and `DISABLE_CODE_PAGE` settings for explore pages and fix an issue related to user search (#32288) These settings can allow users to only display the repositories explore page. Thanks to yp05327 and wxiaoguang ! --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> 2024-10-22 13:09:19 +08:00			`{{end}}`
			`{{if and (not ctx.Consts.RepoUnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled (not .CodePageIsDisabled)}}`
Use mask-based fade-out effect for `.new-menu` (#27181) The `.new-menu` was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child `new-menu-inner` which was present on all these menus except explore where I added it. There is no visual difference except that the items on the explore page have no `gap` between them any longer, making it consistent with other menus. Before and after: <img width="221" alt="Screenshot 2023-09-21 at 21 13 19" src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29"> <img width="222" alt="Screenshot 2023-09-21 at 21 32 36" src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b"> Also, this cleans up the related CSS vars: - `--color-header-wrapper-transparent` is removed, no longer needed - `--color-header-wrapper` is defined in base theme as well, was previously unset and therefor transparent. [no whitespace diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1) [demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/) 2023-09-25 09:03:00 +08:00			`<a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code">`
Always use `ctx.Locale.Tr` inside templates (#27231) 2023-09-25 16:56:50 +08:00			`{{svg "octicon-code"}} {{ctx.Locale.Tr "explore.code"}}`
Use mask-based fade-out effect for `.new-menu` (#27181) The `.new-menu` was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child `new-menu-inner` which was present on all these menus except explore where I added it. There is no visual difference except that the items on the explore page have no `gap` between them any longer, making it consistent with other menus. Before and after: <img width="221" alt="Screenshot 2023-09-21 at 21 13 19" src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29"> <img width="222" alt="Screenshot 2023-09-21 at 21 32 36" src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b"> Also, this cleans up the related CSS vars: - `--color-header-wrapper-transparent` is removed, no longer needed - `--color-header-wrapper` is defined in base theme as well, was previously unset and therefor transparent. [no whitespace diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1) [demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/) 2023-09-25 09:03:00 +08:00			`</a>`
			`{{end}}`
			`</div>`
Add `<overflow-menu>`, rename webcomponents (#29400) 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> 2024-03-15 10:05:31 +08:00			`</overflow-menu>`