- Show popover on hover/focus (tippy default) instead of click - If there is only one status, add href to trigger element - Increase tippy [interactiveBorder](https://atomiks.github.io/tippyjs/v6/all-props/#interactiveborder), making it easier to keep interactive tooltips open with sloppy mouse movement - Fix a overflow issue in the commit list Commit list before: <img width="459" alt="Screen Shot 2022-09-09 at 19 00 01" src="https://user-images.githubusercontent.com/115237/189405517-68de5a69-e312-4ea2-ab81-87629db6064b.png"> Commit List after: <img width="475" alt="Screen Shot 2022-09-09 at 19 01 43" src="https://user-images.githubusercontent.com/115237/189405574-13e84885-9073-4f86-9eeb-d008c1639647.png"> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: techknowlogick <techknowlogick@gitea.io>tags/v1.18.0-rc0
@@ -1,4 +1,4 @@ | |||
<a class="ui link commit-statuses-trigger vm">{{template "repo/commit_status" .Status}}</a> | |||
<a class="ui link commit-statuses-trigger vm"{{if eq (len .Statuses) 1}}{{$status := index .Statuses 0}}{{if $status.TargetURL}} href="{{$status.TargetURL}}"{{end}}{{end}}>{{template "repo/commit_status" .Status}}</a> | |||
<div class="ui commit-statuses-popup commit-statuses tippy-target"> | |||
<div class="ui relaxed list divided"> | |||
{{range .Statuses}} |
@@ -61,7 +61,6 @@ export function initCommitStatuses() { | |||
const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0; | |||
createTippy(this, { | |||
trigger: 'click', | |||
content: this.nextElementSibling, | |||
placement: top ? 'top-start' : 'bottom-start', | |||
interactive: true, |
@@ -6,6 +6,8 @@ export function createTippy(target, opts = {}) { | |||
placement: target.getAttribute('data-placement') || 'top-start', | |||
animation: false, | |||
allowHTML: false, | |||
interactiveBorder: 30, | |||
ignoreAttributes: true, | |||
maxWidth: 500, // increase over default 350px | |||
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}), |
@@ -2827,6 +2827,11 @@ tbody.commit-list { | |||
vertical-align: middle; | |||
} | |||
// in the commit list, messages can wrap so we can use inline | |||
.commit-list .message-wrapper { | |||
display: inline; | |||
} | |||
@media @mediaSm { | |||
tr.commit-list { | |||
width: 100%; |