TRKJ/gitea
2
0
Fork 0
mirror of https://gitee.com/gitea/gitea synced 2025-11-04 16:40:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile navbar and misc cleanups (#25134)

Browse Source 
- Fix and improve mobile navbar layout
- Apply all cleanups suggested in
https://github.com/go-gitea/gitea/pull/25111
- Make media query breakpoints match Fomantic's exactly
- Clean up whitespace in class on navbar items

Mobile navbar before and after:
<img width="745" alt="Screenshot 2023-06-08 at 08 40 56"
src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28">
<img width="739" alt="Screenshot 2023-06-08 at 08 41 23"
src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
2023-06-09 11:10:51 +02:00
committed by GitHub
parent 623b3b590e
commit 6a075589bf
23 changed files with 223 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
templates/base/head_navbar.tmpl
View File

@@ -1,29 +1,30 @@
<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
{{$notificationUnreadCount := 0}} {{$notificationUnreadCount := 0}}
{{if .IsSigned}} {{if and .IsSigned .NotificationUnreadCount}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}} {{$notificationUnreadCount = call .NotificationUnreadCount}}
{{end}} {{end}}
<div class="item brand gt-sb">
<nav id="navbar" class="ui secondary stackable menu" aria-label="{{.locale.Tr "aria.navbar"}}">
<div class="item">
<!-- the logo -->
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}"> <a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true"> <img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
</a> </a>
<div class="gt-df gt-ac">
<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
<div class="ui secondary menu navbar-mobile-right gt-gap-2">
{{if .IsSigned}} {{if .IsSigned}}
<a href="{{AppSubUrl}}/notifications" class="mobile-only gt-mr-4 gt-mt-3" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}"> <a class="item gt-mx-0 gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<span class="fitted item"> <div class="gt-relative">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}"> <span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
{{$notificationUnreadCount}} </div>
</span>
</span>
</a> </a>
{{end}} {{end}}
<button class="ui icon button mobile-only" id="navbar-expand-toggle"> <button class="item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
{{svg "octicon-three-bars"}}
</button>
</div> </div>
</div> </div>
<!-- navbar links -->
{{if and .IsSigned .MustChangePassword}} {{if and .IsSigned .MustChangePassword}}
{{/* No links */}} {{/* No links */}}
{{else if .IsSigned}} {{else if .IsSigned}}
@@ -34,7 +35,9 @@
<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a> <a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
{{end}} {{end}}
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}} {{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
{{if .ShowMilestonesDashboardPage}}<a class="item {{if .PageIsMilestonesDashboard}}active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>{{end}} {{if .ShowMilestonesDashboardPage}}
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>
{{end}}
{{end}} {{end}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a> <a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{else if .IsLandingPageOrganizations}} {{else if .IsLandingPageOrganizations}}
@@ -45,26 +48,20 @@
{{template "custom/extra_links" .}} {{template "custom/extra_links" .}}
{{/* TODO {{if not .IsSigned}}
<div class="item"> <a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
<div class="ui icon input"> {{end}}
<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
</div>
</div>
*/}}
<!-- the full dropdown menus -->
<div class="right menu">
{{if and .IsSigned .MustChangePassword}} {{if and .IsSigned .MustChangePassword}}
<div class="right stackable menu"> <div class="ui dropdown jump item" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<div class="ui dropdown jump item" tabindex="-1" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}"> <span class="text gt-df gt-ac">
<span class="text"> {{avatar $.Context .SignedUser 24 "gt-mr-2"}}
{{avatar $.Context .SignedUser 24 "tiny"}} <span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="mobile-only">{{.SignedUser.Name}}</span>
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu" tabindex="-1"> <div class="menu user-menu">
<div class="ui header"> <div class="ui header">
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong> {{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
</div> </div>
@@ -72,22 +69,20 @@
<div class="divider"></div> <div class="divider"></div>
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/"> <a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
{{svg "octicon-sign-out"}} {{svg "octicon-sign-out"}}
{{.locale.Tr "sign_out"}}<!-- Sign Out --> {{.locale.Tr "sign_out"}}
</a> </a>
</div><!-- end content avatar menu --> </div><!-- end content avatar menu -->
</div><!-- end dropdown avatar menu --> </div><!-- end dropdown avatar menu -->
</div>
{{else if .IsSigned}} {{else if .IsSigned}}
<div class="right stackable menu gt-mr-4">
{{if EnableTimetracking}} {{if EnableTimetracking}}
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}"> <a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{.locale.Tr "active_stopwatch"}}">
<span class="fitted gt-relative"> <div class="gt-relative">
{{svg "octicon-stopwatch"}} {{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span> <span class="header-stopwatch-dot"></span>
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span> </div>
</span> <span class="mobile-only gt-ml-2">{{.locale.Tr "active_stopwatch"}}</span>
</a> </a>
<div class="active-stopwatch-popup tippy-target"> <div class="active-stopwatch-popup tippy-target gt-p-3">
<div class="gt-df gt-ac"> <div class="gt-df gt-ac">
<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}"> <a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}} {{svg "octicon-issue-opened" 16 "gt-mr-3"}}
@@ -100,7 +95,7 @@
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<button <button
type="submit" type="submit"
class="ui button mini compact basic icon fitted" class="ui button mini compact basic icon"
data-tooltip-content="{{.locale.Tr "repo.issues.stop_tracking"}}" data-tooltip-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
>{{svg "octicon-square-fill"}}</button> >{{svg "octicon-square-fill"}}</button>
</form> </form>
@@ -108,7 +103,7 @@
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<button <button
type="submit" type="submit"
class="ui button mini compact basic icon fitted" class="ui button mini compact basic icon"
data-tooltip-content="{{.locale.Tr "repo.issues.cancel_tracking"}}" data-tooltip-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
>{{svg "octicon-trash"}}</button> >{{svg "octicon-trash"}}</button>
</form> </form>
@@ -117,45 +112,42 @@
{{end}} {{end}}
<a href="{{AppSubUrl}}/notifications" class="item not-mobile gt-mx-0" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}"> <a href="{{AppSubUrl}}/notifications" class="item not-mobile gt-mx-0" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<span class="fitted item"> <div class="gt-relative">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}"> <span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
{{$notificationUnreadCount}} </div>
</span>
</span>
</a> </a>
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "create_new"}}"> <div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "create_new"}}">
<span class="text"> <span class="text">
<span class="fitted">{{svg "octicon-plus"}}</span> {{svg "octicon-plus"}}
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="mobile-only">{{.locale.Tr "create_new"}}</span>
</span> </span>
<div class="menu"> <div class="menu">
<a class="item" href="{{AppSubUrl}}/repo/create"> <a class="item" href="{{AppSubUrl}}/repo/create">
<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}} {{svg "octicon-plus"}} {{.locale.Tr "new_repo"}}
</a> </a>
{{if not .DisableMigrations}} {{if not .DisableMigrations}}
<a class="item" href="{{AppSubUrl}}/repo/migrate"> <a class="item" href="{{AppSubUrl}}/repo/migrate">
<span class="fitted">{{svg "octicon-repo-push"}}</span> {{.locale.Tr "new_migrate"}} {{svg "octicon-repo-push"}} {{.locale.Tr "new_migrate"}}
</a> </a>
{{end}} {{end}}
{{if .SignedUser.CanCreateOrganization}} {{if .SignedUser.CanCreateOrganization}}
<a class="item" href="{{AppSubUrl}}/org/create"> <a class="item" href="{{AppSubUrl}}/org/create">
<span class="fitted">{{svg "octicon-organization"}}</span> {{.locale.Tr "new_org"}} {{svg "octicon-organization"}} {{.locale.Tr "new_org"}}
</a> </a>
{{end}} {{end}}
</div><!-- end content create new menu --> </div><!-- end content create new menu -->
</div><!-- end dropdown menu create new --> </div><!-- end dropdown menu create new -->
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}"> <div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text"> <span class="text gt-df gt-ac">
{{avatar $.Context .SignedUser 24 "tiny"}} {{avatar $.Context .SignedUser 24 "gt-mr-2"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span> <span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
<span class="mobile-only">{{.SignedUser.Name}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu" tabindex="-1"> <div class="menu user-menu">
<div class="ui header"> <div class="ui header">
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong> {{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
</div> </div>
@@ -163,7 +155,7 @@
<div class="divider"></div> <div class="divider"></div>
<a class="item" href="{{.SignedUser.HomeLink}}"> <a class="item" href="{{.SignedUser.HomeLink}}">
{{svg "octicon-person"}} {{svg "octicon-person"}}
{{.locale.Tr "your_profile"}}<!-- Your profile --> {{.locale.Tr "your_profile"}}
</a> </a>
{{if not .DisableStars}} {{if not .DisableStars}}
<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars"> <a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
@@ -173,15 +165,15 @@
{{end}} {{end}}
<a class="item" href="{{AppSubUrl}}/notifications/subscriptions"> <a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
{{.locale.Tr "notification.subscriptions"}}<!-- Subscriptions --> {{.locale.Tr "notification.subscriptions"}}
</a> </a>
<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings"> <a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
{{svg "octicon-tools"}} {{svg "octicon-tools"}}
{{.locale.Tr "your_settings"}}<!-- Your settings --> {{.locale.Tr "your_settings"}}
</a> </a>
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io"> <a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">
{{svg "octicon-question"}} {{svg "octicon-question"}}
{{.locale.Tr "help"}}<!-- Help --> {{.locale.Tr "help"}}
</a> </a>
{{if .IsAdmin}} {{if .IsAdmin}}
<div class="divider"></div> <div class="divider"></div>
@@ -199,10 +191,7 @@
</a> </a>
</div><!-- end content avatar menu --> </div><!-- end content avatar menu -->
</div><!-- end dropdown avatar menu --> </div><!-- end dropdown avatar menu -->
</div><!-- end signed user right menu -->
{{else}} {{else}}
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
<div class="right stackable menu">
{{if .ShowRegistrationButton}} {{if .ShowRegistrationButton}}
<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up"> <a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
{{svg "octicon-person"}} {{.locale.Tr "register"}} {{svg "octicon-person"}} {{.locale.Tr "register"}}
@@ -211,6 +200,6 @@
<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}"> <a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
{{svg "octicon-sign-in"}} {{.locale.Tr "sign_in"}} {{svg "octicon-sign-in"}} {{.locale.Tr "sign_in"}}
</a> </a>
</div><!-- end anonymous user right menu -->
{{end}} {{end}}
</div><!-- end full right menu -->
</nav> </nav>

2
templates/org/home.tmpl
View File

@@ -19,7 +19,7 @@
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}} {{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
</div> </div>
</div> </div>
<div class="right stackable menu"> <div class="right menu">
<form method="post" action="{{.Link}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}&redirect_to={{$.Link}}"> <form method="post" action="{{.Link}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}&redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<button type="submit" class="ui basic button gt-mr-0"> <button type="submit" class="ui basic button gt-mr-0">

1
templates/repo/settings/lfs_file_find.tmpl
View File

@@ -29,7 +29,6 @@
<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a> <a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a>
{{end}} {{end}}
{{end}} {{end}}
<div class="mobile-only"></div>
{{$.locale.Tr "repo.diff.commit"}} {{$.locale.Tr "repo.diff.commit"}}
<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a> <a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a>
</td> </td>

8
templates/status/500.tmpl
View File

@@ -15,14 +15,16 @@
</head> </head>
<body> <body>
<div class="full height"> <div class="full height">
<nav class="ui container secondary stackable main menu" id="navbar"> <nav class="ui secondary menu gt-border-secondary-bottom">
<div class="ui container gt-df"> <div class="ui container gt-df">
<div class="item brand gt-f1"> <div class="item gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}"> <a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true"> <img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
</a> </a>
</div> </div>
<button class="item ui icon button">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}} <div class="item">
<button class="ui icon button disabled">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
</div>
</div> </div>
</nav> </nav>
<div role="main" class="page-content status-page-500"> <div role="main" class="page-content status-page-500">

2
templates/user/dashboard/navbar.tmpl
View File

@@ -77,7 +77,7 @@
{{end}} {{end}}
{{if .ContextUser.IsOrganization}} {{if .ContextUser.IsOrganization}}
<div class="right stackable menu"> <div class="right menu">
<a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}"> <a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-rss"}}&nbsp;{{.locale.Tr "activities"}} {{svg "octicon-rss"}}&nbsp;{{.locale.Tr "activities"}}
</a> </a>

4
web_src/css/admin.css
View File

@@ -20,7 +20,7 @@
width: calc(100% - 245px); width: calc(100% - 245px);
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.admin dl.admin-dl-horizontal dd { .admin dl.admin-dl-horizontal dd {
width: calc(100% - 185px); width: calc(100% - 185px);
} }
@@ -40,7 +40,7 @@
white-space: nowrap; white-space: nowrap;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.admin dl.admin-dl-horizontal dt { .admin dl.admin-dl-horizontal dt {
width: 160px; width: 160px;
} }

188
web_src/css/base.css
View File

@@ -930,7 +930,7 @@ img.ui.avatar,
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.page-content .ui.ui.ui.container:not(.fluid) { .page-content .ui.ui.ui.container:not(.fluid) {
width: calc(100vw - 16px); width: calc(100vw - 16px);
max-width: calc(100vw - 16px); max-width: calc(100vw - 16px);
@@ -950,46 +950,91 @@ img.ui.avatar,
margin: 0 !important; margin: 0 !important;
} }
#navbar .column .menu {
margin-top: 0;
}
#navbar .fitted .svg {
margin-right: 0;
vertical-align: middle;
}
#navbar .searchbox {
background-color: var(--color-input-background) !important;
}
#navbar .text .svg {
width: 16px;
text-align: center;
}
#navbar a.item:hover { #navbar a.item:hover {
background: var(--color-nav-hover-bg); background: var(--color-nav-hover-bg);
} }
#navbar .dropdown .avatar { #navbar .navbar-mobile-right {
margin-right: 0 !important; margin-left: auto;
} }
@media (max-width: 767px) { #navbar .navbar-mobile-right a.item:hover {
#navbar:not(.shown) > *:not(:first-child) { background: transparent;
}
#navbar .secondary.menu > .item > .svg,
#navbar .right.menu > .item > .svg {
margin-right: 0;
}
@media (max-width: 767.98px) {
/* hide all items */
#navbar .item {
display: none; display: none;
} }
/* show the first navbar item (logo and its mobile right items) */
#navbar > .item:first-child {
display: flex;
padding-top: 5px;
padding-bottom: 5px;
}
#navbar .navbar-mobile-right > .item {
display: flex;
}
/* show items if the navbar is open */
#navbar.navbar-menu-open .item {
display: flex;
}
#navbar.navbar-menu-open > .item:first-child {
padding-bottom: 0;
}
} }
.right.stackable.menu { @media (min-width: 767.98px) {
/* responsive fix: this makes sure that the right menu when the page */ #navbar .navbar-mobile-right,
/* is on mobile view will have elements stacked on top of each other. */ #navbar .mobile-only {
/* no, stackable won't work on right menus. */ display: none;
margin-left: auto; }
#navbar .right.menu {
padding-right: 1em;
}
}
#navbar .navbar-mobile-right .item {
width: auto !important;
}
#navbar a.item .notification_count {
color: var(--color-nav-bg);
padding: 0 3.75px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
}
#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot {
border-color: var(--color-nav-hover-bg);
}
#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
background: var(--color-primary);
border: 2px solid var(--color-nav-bg);
position: absolute;
left: 6px;
top: -9px;
min-width: 17px;
min-height: 17px;
border-radius: 17px;
display: flex; display: flex;
align-items: inherit; align-items: center;
flex-direction: inherit; justify-content: center;
}
#navbar .right.menu {
width: 100%;
justify-content: flex-end;
} }
.ui.pagination.menu .active.item { .ui.pagination.menu .active.item {
@@ -1444,7 +1489,7 @@ img.ui.avatar,
line-height: 20px; line-height: 20px;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.ui.pagination.menu .item:not(.active,.navigation), .ui.pagination.menu .item:not(.active,.navigation),
.ui.pagination.menu .item.navigation span.navigation_label { .ui.pagination.menu .item.navigation span.navigation_label {
display: none; display: none;
@@ -1518,56 +1563,13 @@ img.ui.avatar,
text-align: center; text-align: center;
} }
/* Conditional display */ @media (max-width: 767.98px) {
@media (min-width: 768px) {
.mobile-only,
.ui.button.mobile-only {
display: none !important;
}
/* has the same behaviour of sr-only, hiding the content for */
/* non-screenreaders, but is shown on mobile devices. */
.sr-mobile-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
}
@media (max-width: 767px) {
/* double selector so it wins over .gt-df etc */ /* double selector so it wins over .gt-df etc */
.not-mobile.not-mobile { .not-mobile.not-mobile {
display: none !important; display: none !important;
} }
} }
/* Accessibility for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
.ui.menu.new-menu { .ui.menu.new-menu {
margin-bottom: 15px; margin-bottom: 15px;
background: var(--color-header-wrapper); background: var(--color-header-wrapper);
@@ -1602,7 +1604,7 @@ img.ui.avatar,
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */ margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.ui.menu.new-menu .item { .ui.menu.new-menu .item {
width: auto !important; width: auto !important;
} }
@@ -2117,40 +2119,6 @@ a.ui.basic.label:hover {
margin-top: 1rem; margin-top: 1rem;
} }
.header-stopwatch-dot {
position: absolute;
left: 8px;
top: -8px;
width: 13px;
height: 13px;
background: var(--color-primary);
border: 2px solid var(--color-nav-bg);
border-radius: 100%;
}
.notification_count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 6px;
top: -8px;
min-width: 17px;
min-height: 17px;
background: var(--color-primary);
border: 2px solid var(--color-nav-bg);
color: var(--color-nav-bg);
border-radius: 17px;
padding: 0 3.5px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
}
#navbar a.item:hover .notification_count {
border-color: var(--color-nav-hover-bg);
}
.rss-icon { .rss-icon {
display: inline-flex; display: inline-flex;
color: var(--color-text-light-1); color: var(--color-text-light-1);

6
web_src/css/dashboard.css
View File

@@ -35,7 +35,7 @@
width: 15%; width: 15%;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.dashboard.feeds .filter.menu .item .floating.label, .dashboard.feeds .filter.menu .item .floating.label,
.dashboard.issues .filter.menu .item .floating.label { .dashboard.issues .filter.menu .item .floating.label {
top: 10px; top: 10px;
@@ -60,7 +60,7 @@
left: auto !important; left: auto !important;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.dashboard.feeds .filter.menu, .dashboard.feeds .filter.menu,
.dashboard.issues .filter.menu { .dashboard.issues .filter.menu {
width: 100%; width: 100%;
@@ -90,7 +90,7 @@
max-width: 100%; max-width: 100%;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.dashboard .dashboard-navbar .ui.dropdown > .menu { .dashboard .dashboard-navbar .ui.dropdown > .menu {
position: static; position: static;
} }

14
web_src/css/form.css
View File

@@ -197,7 +197,7 @@ textarea:focus,
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
#create-page-form form .optional .title { #create-page-form form .optional .title {
margin-left: 15px; margin-left: 15px;
} }
@@ -315,7 +315,7 @@ textarea:focus,
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.user.activate form .optional .title, .user.activate form .optional .title,
.user.forgot.password form .optional .title, .user.forgot.password form .optional .title,
.user.reset.password form .optional .title, .user.reset.password form .optional .title,
@@ -353,7 +353,7 @@ textarea:focus,
width: 200px; width: 200px;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.user.activate form .inline.field > label, .user.activate form .inline.field > label,
.user.forgot.password form .inline.field > label, .user.forgot.password form .inline.field > label,
.user.reset.password form .inline.field > label, .user.reset.password form .inline.field > label,
@@ -449,7 +449,7 @@ textarea:focus,
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.new.repo form .optional .title, .repository.new.repo form .optional .title,
.repository.new.migrate form .optional .title, .repository.new.migrate form .optional .title,
.repository.new.fork form .optional .title { .repository.new.fork form .optional .title {
@@ -483,7 +483,7 @@ textarea:focus,
width: 50% !important; width: 50% !important;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.new.repo form label, .repository.new.repo form label,
.repository.new.migrate form label, .repository.new.migrate form label,
.repository.new.fork form label, .repository.new.fork form label,
@@ -516,7 +516,7 @@ textarea:focus,
width: 50% !important; width: 50% !important;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.new.repo .ui.form .selection.dropdown:not(.owner) { .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
width: 100% !important; width: 100% !important;
} }
@@ -534,7 +534,7 @@ textarea:focus,
font-family: var(--fonts-monospace); font-family: var(--fonts-monospace);
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.new.org .ui.form .field button, .new.org .ui.form .field button,
.new.org .ui.form .field a { .new.org .ui.form .field a {
margin-bottom: 1em; margin-bottom: 1em;

2
web_src/css/helpers.css
View File

@@ -269,7 +269,7 @@ Gitea's private styles use `g-` prefix.
.gt-font-17 { font-size: 17px !important } .gt-font-17 { font-size: 17px !important }
.gt-font-18 { font-size: 18px !important } .gt-font-18 { font-size: 18px !important }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.gt-db-small { display: block !important; } .gt-db-small { display: block !important; }
.gt-w-100-small { width: 100% !important; } .gt-w-100-small { width: 100% !important; }
.gt-js-small { justify-content: flex-start !important; } .gt-js-small { justify-content: flex-start !important; }

2
web_src/css/home.css
View File

@@ -2,7 +2,7 @@
max-width: 220px; max-width: 220px;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.home .hero h1 { .home .hero h1 {
font-size: 3.5em; font-size: 3.5em;
} }

4
web_src/css/modules/tippy.css
View File

@@ -25,8 +25,8 @@
} }
.tippy-box[data-theme="menu"] { .tippy-box[data-theme="menu"] {
background-color: transparent; background-color: var(--color-menu);
color: var(--color-tooltip-text); color: var(--color-text);
} }
.tippy-content { .tippy-content {

6
web_src/css/org.css
View File

@@ -31,7 +31,7 @@
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
#create-page-form form .optional .title { #create-page-form form .optional .title {
margin-left: 15px; margin-left: 15px;
} }
@@ -77,7 +77,7 @@
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.organization.new.org form .optional .title { .organization.new.org form .optional .title {
margin-left: 15px; margin-left: 15px;
} }
@@ -222,7 +222,7 @@
height: 60px; height: 60px;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.organization.teams #repo-top-segment { .organization.teams #repo-top-segment {
height: 100px; height: 100px;
} }

54
web_src/css/repo.css
View File

@@ -194,13 +194,13 @@
width: 320px; width: 320px;
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991.98px) {
.repository #clone-panel #repo-clone-url { .repository #clone-panel #repo-clone-url {
width: 200px; width: 200px;
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository #clone-panel #repo-clone-url { .repository #clone-panel #repo-clone-url {
width: 200px; width: 200px;
} }
@@ -298,7 +298,7 @@
} }
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991.98px) {
.repository.file.list #repo-files-table td.name { .repository.file.list #repo-files-table td.name {
max-width: 300px; max-width: 300px;
} }
@@ -321,7 +321,7 @@
} }
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991.98px) {
.repository.file.list #repo-files-table td.message { .repository.file.list #repo-files-table td.message {
max-width: 250px; max-width: 250px;
} }
@@ -643,7 +643,7 @@
display: flex; display: flex;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.view.issue .issue-title { .repository.view.issue .issue-title {
flex-direction: column; flex-direction: column;
} }
@@ -939,7 +939,7 @@
border: 1px solid var(--color-light-border); border: 1px solid var(--color-light-border);
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.view.issue .comment-list .timeline-item .ui.segments { .repository.view.issue .comment-list .timeline-item .ui.segments {
margin-left: -2rem; margin-left: -2rem;
} }
@@ -964,7 +964,7 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.view.issue .comment-list .comment .content .form .button { .repository.view.issue .comment-list .comment .content .form .button {
width: 100%; width: 100%;
margin: 0; margin: 0;
@@ -987,7 +987,7 @@
margin-bottom: -0.25rem; margin-bottom: -0.25rem;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.view.issue .comment-list .comment .merge-section .item-section { .repository.view.issue .comment-list .comment .merge-section .item-section {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
@@ -1133,7 +1133,7 @@
box-shadow: none; box-shadow: none;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.view.issue .comment-list { .repository.view.issue .comment-list {
padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */ padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
} }
@@ -1597,7 +1597,7 @@
line-height: 30px; line-height: 30px;
} }
@media (max-width: 991px) { @media (max-width: 991.98px) {
.repository .diff-detail-box { .repository .diff-detail-box {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@@ -1849,7 +1849,7 @@
} }
@media (max-width: 991px) { @media (max-width: 991.98px) {
.diff-file-box { .diff-file-box {
scroll-margin-top: 77px; /* match .repository .diff-detail-box */ scroll-margin-top: 77px; /* match .repository .diff-detail-box */
} }
@@ -1957,14 +1957,14 @@
display: inline-block; display: inline-block;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.wiki .dividing.header .stackable.grid .button { .repository.wiki .dividing.header .stackable.grid .button {
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.wiki #clone-panel #repo-clone-url { .repository.wiki #clone-panel #repo-clone-url {
width: 160px; width: 160px;
} }
@@ -2265,7 +2265,7 @@
border-radius: 0; border-radius: 0;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository .repository-summary .segment.language-stats { .repository .repository-summary .segment.language-stats {
display: none; display: none;
} }
@@ -2292,7 +2292,7 @@
width: 500px; width: 500px;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
#cite-repo-modal #citation-panel { #cite-repo-modal #citation-panel {
width: 100%; width: 100%;
} }
@@ -2753,7 +2753,7 @@ tbody.commit-list {
display: inline-block; display: inline-block;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
tr.commit-list { tr.commit-list {
width: 100%; width: 100%;
} }
@@ -2766,7 +2766,7 @@ tbody.commit-list {
} }
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991.98px) {
tr.commit-list { tr.commit-list {
width: 723px; width: 723px;
} }
@@ -2862,7 +2862,7 @@ tbody.commit-list {
word-break: break-word; word-break: break-word;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repo-header + .container { .repo-header + .container {
margin-top: 7px; margin-top: 7px;
} }
@@ -2876,7 +2876,7 @@ tbody.commit-list {
word-break: keep-all; word-break: keep-all;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repo-buttons { .repo-buttons {
margin-top: 1em; margin-top: 1em;
} }
@@ -2923,7 +2923,7 @@ tbody.commit-list {
pointer-events: none !important; pointer-events: none !important;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repo-buttons .ui.labeled.button .svg { .repo-buttons .ui.labeled.button .svg {
display: none; display: none;
} }
@@ -3021,7 +3021,7 @@ tbody.commit-list {
color: var(--color-primary); color: var(--color-primary);
} }
@media (max-width: 991px) { @media (max-width: 991.98px) {
#diff-file-tree { #diff-file-tree {
display: none !important; display: none !important;
} }
@@ -3098,7 +3098,7 @@ tbody.commit-list {
z-index: 7; z-index: 7;
} }
@media (max-width: 991px) { @media (max-width: 991.98px) {
.ui.attached.header.diff-file-header.sticky-2nd-row { .ui.attached.header.diff-file-header.sticky-2nd-row {
top: 77px; /* match .repository .diff-detail-box */ top: 77px; /* match .repository .diff-detail-box */
} }
@@ -3137,7 +3137,7 @@ tbody.commit-list {
overflow: hidden; overflow: hidden;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository-summary-language-stats { .repository-summary-language-stats {
height: auto; height: auto;
} }
@@ -3218,7 +3218,7 @@ tbody.commit-list {
box-shadow: 0 0.5rem 1rem var(--color-shadow) !important; box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.file.list #repo-files-table .entry, .repository.file.list #repo-files-table .entry,
.repository.file.list #repo-files-table .commit-list { .repository.file.list #repo-files-table .commit-list {
align-items: center; align-items: center;
@@ -3340,13 +3340,13 @@ tbody.commit-list {
vertical-align: bottom !important; vertical-align: bottom !important;
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991.98px) {
.branch-dropdown-button { .branch-dropdown-button {
max-width: 185px; max-width: 185px;
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.branch-dropdown-button { .branch-dropdown-button {
max-width: 165px; max-width: 165px;
} }
@@ -3380,7 +3380,7 @@ tbody.commit-list {
justify-content: flex-end; justify-content: flex-end;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.pr-status .status-details { .pr-status .status-details {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;

2
web_src/css/repo/linebutton.css
View File

@@ -16,7 +16,7 @@
position: absolute; position: absolute;
font-family: var(--fonts-regular); font-family: var(--fonts-regular);
left: 0; left: 0;
transform: translateX(-70%); transform: translateX(-50%);
cursor: pointer; cursor: pointer;
} }

2
web_src/css/repo/release-tag.css
View File

@@ -119,7 +119,7 @@
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.repository.new.release .field button { .repository.new.release .field button {
margin-bottom: 1em; margin-bottom: 1em;
} }

8
web_src/css/review.css
View File

@@ -67,7 +67,7 @@
max-width: 820px; max-width: 820px;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.comment-code-cloud { .comment-code-cloud {
max-width: none; max-width: none;
padding: 0.75rem !important; padding: 0.75rem !important;
@@ -91,7 +91,7 @@
padding: 0; padding: 0;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.comment-code-cloud .comments .comment { .comment-code-cloud .comments .comment {
display: flex; display: flex;
} }
@@ -182,7 +182,7 @@
display: block; display: block;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.comment-code-cloud .button { .comment-code-cloud .button {
width: 100%; width: 100%;
margin: 0 !important; margin: 0 !important;
@@ -252,7 +252,7 @@
scroll-margin-top: 99px; scroll-margin-top: 99px;
} }
@media (max-width: 991px) { @media (max-width: 991.98px) {
.pull.files.diff .comment { .pull.files.diff .comment {
scroll-margin-top: 130px; scroll-margin-top: 130px;
} }

4
web_src/css/user.css
View File

@@ -48,13 +48,13 @@
height: auto; height: auto;
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.user.profile .ui.card #profile-avatar img { .user.profile .ui.card #profile-avatar img {
width: 30vw; width: 30vw;
} }
} }
@media (max-width: 767px) { @media (max-width: 767.98px) {
.user.profile .ui.card { .user.profile .ui.card {
width: 100%; width: 100%;
} }

2
web_src/js/components/DashboardRepoList.vue
View File

@@ -12,7 +12,6 @@
</div> </div>
<a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo"> <a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
<svg-icon name="octicon-plus"/> <svg-icon name="octicon-plus"/>
<span class="sr-only">{{ textNewRepo }}</span>
</a> </a>
</h4> </h4>
<div class="ui attached segment repos-search"> <div class="ui attached segment repos-search">
@@ -121,7 +120,6 @@
</div> </div>
<a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg"> <a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
<svg-icon name="octicon-plus"/> <svg-icon name="octicon-plus"/>
<span class="sr-only">{{ textNewOrg }}</span>
</a> </a>
</h4> </h4>
<div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom"> <div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">

20
web_src/js/features/common-global.js
View File

@@ -20,18 +20,14 @@ export function initGlobalFormDirtyLeaveConfirm() {
} }
export function initHeadNavbarContentToggle() { export function initHeadNavbarContentToggle() {
const content = $('#navbar'); const navbar = document.getElementById('navbar');
const toggle = $('#navbar-expand-toggle'); const btn = document.getElementById('navbar-expand-toggle');
let isExpanded = false; if (!navbar || !btn) return;
toggle.on('click', () => {
isExpanded = !isExpanded; btn.addEventListener('click', () => {
if (isExpanded) { const isExpanded = btn.classList.contains('active');
content.addClass('shown'); navbar.classList.toggle('navbar-menu-open', !isExpanded);
toggle.addClass('active'); btn.classList.toggle('active', !isExpanded);
} else {
content.removeClass('shown');
toggle.removeClass('active');
}
}); });
} }

7
web_src/js/features/repo-code.js
View File

@@ -108,10 +108,15 @@ function showLineButton() {
createTippy(btn, { createTippy(btn, {
trigger: 'click', trigger: 'click',
hideOnClick: true,
content: menu, content: menu,
placement: 'right-start', placement: 'right-start',
role: 'menu',
interactive: 'true', interactive: 'true',
onShow: (tippy) => {
tippy.popper.addEventListener('click', () => {
tippy.hide();
}, {once: true});
}
}); });
} }

1
web_src/js/features/repo-issue.js
View File

@@ -469,7 +469,6 @@ export function initRepoPullRequestReview() {
content: $panel[0], content: $panel[0],
placement: 'bottom', placement: 'bottom',
trigger: 'click', trigger: 'click',
role: 'menu',
maxWidth: 'none', maxWidth: 'none',
interactive: true, interactive: true,
hideOnClick: true, hideOnClick: true,

4
web_src/js/modules/tippy.js
View File

@@ -27,7 +27,8 @@ export function createTippy(target, opts = {}) {
visibleInstances.add(instance); visibleInstances.add(instance);
}, },
arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`, arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
...(opts?.role && {theme: opts.role}), role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
theme: opts.role || 'menu', // CSS theme, we support either "tooltip" or "menu"
...opts, ...opts,
}); });
@@ -68,6 +69,7 @@ function attachTooltip(target, content = null) {
content, content,
delay: 100, delay: 100,
role: 'tooltip', role: 'tooltip',
theme: 'tooltip',
hideOnClick, hideOnClick,
placement: target.getAttribute('data-tooltip-placement') || 'top-start', placement: target.getAttribute('data-tooltip-placement') || 'top-start',
...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),