Improve flex-item overflow

This commit is contained in:
silverwind 2024-06-17 23:27:05 +02:00
parent 363c123598
commit 75172759b7
No known key found for this signature in database
GPG Key ID: 2E62B41C93869443
2 changed files with 34 additions and 11 deletions

View File

@ -13,17 +13,19 @@
<div class="flex-item-main">
<div class="flex-item-header">
<div class="flex-item-title">
<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
{{if .IsPull}}
{{if (index $.CommitStatuses .PullRequest.ID)}}
{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID)}}
<div class="flex-item-title-inline">
<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
{{if .IsPull}}
{{if (index $.CommitStatuses .PullRequest.ID)}}
{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID)}}
{{end}}
{{end}}
{{end}}
<span class="labels-list tw-ml-1">
{{range .Labels}}
<a href="?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">{{RenderLabel $.Context ctx.Locale .}}</a>
{{end}}
</span>
<span class="labels-list">
{{range .Labels}}
<a href="?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">{{RenderLabel $.Context ctx.Locale .}}</a>
{{end}}
</span>
</div>
</div>
{{if or .TotalTrackedTime .Assignees .NumComments}}
<div class="flex-item-trailing">

View File

@ -26,7 +26,12 @@
display: flex;
gap: .25rem;
justify-content: space-between;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.flex-item-header {
flex-direction: column;
}
}
.flex-item a:not(.label, .button):hover {
@ -46,10 +51,17 @@
gap: 0.5rem;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: end;
}
@media (max-width: 600px) {
.flex-item .flex-item-trailing {
justify-content: flex-start;
}
}
.flex-item .flex-item-title {
display: inline-flex;
flex-wrap: wrap;
@ -68,6 +80,15 @@
overflow-wrap: anywhere;
}
/* display:inline wrapper that makes labels overflow like text */
.flex-item-title-inline {
display: inline;
}
.flex-item-title-inline > * {
display: inline !important;
vertical-align: bottom;
}
.flex-item .flex-item-body {
display: flex;
align-items: center;