diff options
| author | silverwind <me@silverwind.io> | 2023-09-25 03:03:00 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-09-25 01:03:00 +0000 |
| commit | 6af34c09a7fba3b987497ac09713bcfa03e3c35c (patch) | |
| tree | 99b9a514d4d8714f063d2515e5c326f8a9308ec3 /templates/explore | |
| parent | c2eed613299fb7f40497d6b92f53dbdaf2047f53 (diff) | |
| download | gitea-6af34c09a7fba3b987497ac09713bcfa03e3c35c.tar.gz gitea-6af34c09a7fba3b987497ac09713bcfa03e3c35c.zip | |
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/)
Diffstat (limited to 'templates/explore')
| -rw-r--r-- | templates/explore/navbar.tmpl | 32 |
1 files changed, 17 insertions, 15 deletions
diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl index 3a556812f9..9dbb0320b2 100644 --- a/templates/explore/navbar.tmpl +++ b/templates/explore/navbar.tmpl @@ -1,18 +1,20 @@ <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> - <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> - {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} - </a> - {{if not .UsersIsDisabled}} - <a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users"> - {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} + <div class="new-menu-inner"> + <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> + {{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} </a> - {{end}} - <a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations"> - {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} - </a> - {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} - <a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code"> - {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} - </a> - {{end}} + {{if not .UsersIsDisabled}} + <a class="{{if .PageIsExploreUsers}}active {{end}}item" href="{{AppSubUrl}}/explore/users"> + {{svg "octicon-person"}} {{.locale.Tr "explore.users"}} + </a> + {{end}} + <a class="{{if .PageIsExploreOrganizations}}active {{end}}item" href="{{AppSubUrl}}/explore/organizations"> + {{svg "octicon-organization"}} {{.locale.Tr "explore.organizations"}} + </a> + {{if and (not $.UnitTypeCode.UnitGlobalDisabled) .IsRepoIndexerEnabled}} + <a class="{{if .PageIsExploreCode}}active {{end}}item" href="{{AppSubUrl}}/explore/code"> + {{svg "octicon-code"}} {{.locale.Tr "explore.code"}} + </a> + {{end}} + </div> </div> |