Infrastructure/forgejo
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-23 07:43:18 -05:00
Code Issues Activity

Prevent Commit Status and Message From Overflowing On Branch Page (#7800)

Browse source 
* Prevent Commit Status From Overflowing On Branch Page

It is possible for the commit ci status
on the branches page for a repository to
become an ellipsis due to overflowing.

This commit will fix that issue by
using flex.

Signed-off-by: Gary Kim <gary@garykim.dev>

* Fix multiple overflowing issues in commits table

It was possible that the commit message would
overflow hiding the expand commits button
and commit status. This change ensures that
the correct elements overflow without hiding
anything else.

This change also reverts using flex in the
commits list because it was causing issues
in Blink based browsers.

Signed-off-by: Gary Kim <gary@garykim.dev>

* Remove unnecessary html element and fix indentation issues
This commit is contained in:
Gary Kim 2019-08-09 12:57:29 +00:00 committed by Lunny Xiao
parent 2b6f45299d
commit 2ed21e7e09
3 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/css/index.css
View file

@ -632,6 +632,7 @@ footer .ui.left,footer .ui.right{line-height:40px}
.repository #commits-table thead .sha{width:140px} .repository #commits-table thead .sha{width:140px}
.repository #commits-table thead .shatd{text-align:center} .repository #commits-table thead .shatd{text-align:center}
.repository #commits-table td.sha .sha.label{margin:0} .repository #commits-table td.sha .sha.label{margin:0}
.repository #commits-table td.message{text-overflow:unset}
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.02)!important} .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.02)!important}
.repository #commits-table td.sha .sha.label,.repository #repo-files-table .sha.label{border:1px solid #bbb} .repository #commits-table td.sha .sha.label,.repository #repo-files-table .sha.label{border:1px solid #bbb}
.repository #commits-table td.sha .sha.label .detail.icon,.repository #repo-files-table .sha.label .detail.icon{background:#fafafa;margin:-6px -10px -4px 0;padding:5px 3px 5px 6px;border-left:1px solid #bbb;border-top-left-radius:0;border-bottom-left-radius:0} .repository #commits-table td.sha .sha.label .detail.icon,.repository #repo-files-table .sha.label .detail.icon{background:#fafafa;margin:-6px -10px -4px 0;padding:5px 3px 5px 6px;border-left:1px solid #bbb;border-top-left-radius:0;border-bottom-left-radius:0}
@ -825,8 +826,8 @@ footer .ui.left,footer .ui.right{line-height:40px}
.stats-table .table-cell{display:table-cell} .stats-table .table-cell{display:table-cell}
.stats-table .table-cell.tiny{height:.5em} .stats-table .table-cell.tiny{height:.5em}
tbody.commit-list{vertical-align:baseline} tbody.commit-list{vertical-align:baseline}
.commit-list .message-wrapper{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);display:inline-block;vertical-align:middle} .commit-list .message-wrapper{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 50px);display:inline-block;vertical-align:middle}
.commit-list .message-wrapper .commit-status-link{display:inline-block;vertical-align:middle} .commit-list .commit-status-link{display:inline-block;vertical-align:middle}
.commit-body{white-space:pre-wrap} .commit-body{white-space:pre-wrap}
.git-notes.top{text-align:left} .git-notes.top{text-align:left}
.git-notes .commit-body{margin:0} .git-notes .commit-body{margin:0}

8
public/less/_repository.less
View file

@ -1156,6 +1156,10 @@
margin: 0; margin: 0;
} }
td.message {
text-overflow: unset;
}
&.ui.basic.striped.table tbody tr:nth-child(2n) { &.ui.basic.striped.table tbody tr:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.02) !important; background-color: rgba(0, 0, 0, 0.02) !important;
} }
@ -2172,12 +2176,12 @@ tbody.commit-list {
.commit-list .message-wrapper { .commit-list .message-wrapper {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: calc(100% - 24px); max-width: calc(100% - 50px);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.commit-list .message-wrapper .commit-status-link { .commit-list .commit-status-link {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }

6
templates/repo/commits_table.tmpl
View file

@ -72,12 +72,14 @@
<td class="message"> <td class="message">
<span class="message-wrapper"> <span class="message-wrapper">
<span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span> <span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
</span>
{{if IsMultilineCommitMessage .Message}} {{if IsMultilineCommitMessage .Message}}
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button> <button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
{{end}}
{{template "repo/commit_status" .Status}}
{{if IsMultilineCommitMessage .Message}}
<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre> <pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}} {{end}}
</span>
{{template "repo/commit_status" .Status}}
</td> </td>
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td> <td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
</tr> </tr>