Commits & files UI: SUI fixed single line table
Instead using own ellipsis, uses Semantic UI fixed single line table which effectively applies ellipsis to all overflowing table cells. NOTE: File list cannot use colspan="2" for 1st "Last commit" elements, otherwise layout breaks with fixed table.
This commit is contained in:
Adam Strzelecki
parent
4813665d0a
commit
61fdd8c571
4 changed files with 32 additions and 129 deletions
|
|
@ -1857,40 +1857,16 @@ footer .container .links > *:first-child {
|
|||
.repository.file.list .head.meta li .ui.breadcrumb a {
|
||||
font-size: 16px;
|
||||
}
|
||||
.repository.file.list #repo-files-table .table.list {
|
||||
width: 80% !important;
|
||||
}
|
||||
.repository.file.list #repo-files-table thead th {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.repository.file.list #repo-files-table thead th #last-commit-message {
|
||||
margin-left: 5px;
|
||||
margin-bottom: -4px;
|
||||
width: 400px;
|
||||
}
|
||||
.repository.file.list #repo-files-table thead th .age {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.repository.file.list #repo-files-table thead .ui.avatar {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.repository.file.list #repo-files-table tbody .icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.repository.file.list #repo-files-table tbody .name {
|
||||
max-width: 120px;
|
||||
}
|
||||
.repository.file.list #repo-files-table tbody .message {
|
||||
max-width: 300px;
|
||||
}
|
||||
.repository.file.list #repo-files-table tbody .age {
|
||||
min-width: 150px;
|
||||
}
|
||||
.repository.file.list #repo-files-table tbody .text.truncate {
|
||||
margin-bottom: -5px;
|
||||
max-width: 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.repository.file.list #repo-files-table td {
|
||||
padding-top: 8px;
|
||||
|
|
@ -2255,25 +2231,6 @@ footer .container .links > *:first-child {
|
|||
font-weight: normal;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.repository .commits.table {
|
||||
font-size: 13px;
|
||||
}
|
||||
.repository .commits.table th:first-child,
|
||||
.repository .commits.table td:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.repository .commits.table td {
|
||||
line-height: 15px;
|
||||
}
|
||||
.repository .commits.table .author {
|
||||
min-width: 180px;
|
||||
}
|
||||
.repository .commits.table .message span {
|
||||
max-width: 500px;
|
||||
}
|
||||
.repository .commits.table .date {
|
||||
width: 120px;
|
||||
}
|
||||
.repository .diff-detail-box {
|
||||
margin: 15px 0;
|
||||
line-height: 30px;
|
||||
|
|
|
|||
|
|
@ -143,24 +143,11 @@
|
|||
}
|
||||
|
||||
#repo-files-table {
|
||||
.table.list {
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: normal;
|
||||
|
||||
#last-commit-message {
|
||||
margin-left: 5px;
|
||||
margin-bottom: -4px;
|
||||
width: 400px;
|
||||
}
|
||||
.age {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.ui.avatar {
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -168,21 +155,7 @@
|
|||
}
|
||||
tbody {
|
||||
.icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.name {
|
||||
max-width: 120px;
|
||||
}
|
||||
.message {
|
||||
max-width: 300px;
|
||||
}
|
||||
.age {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.text.truncate {
|
||||
margin-bottom: -5px;
|
||||
max-width: 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
td {
|
||||
|
|
@ -610,26 +583,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.commits.table {
|
||||
font-size: 13px;
|
||||
th, td {
|
||||
&:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
td {
|
||||
line-height: 15px;
|
||||
}
|
||||
.author {
|
||||
min-width: 180px;
|
||||
}
|
||||
.message span {
|
||||
max-width: 500px;
|
||||
}
|
||||
.date {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-detail-box {
|
||||
margin: 15px 0;
|
||||
|
|
|
|||
|
|
@ -16,13 +16,12 @@
|
|||
|
||||
{{if .Commits}}
|
||||
<div class="ui attached table segment">
|
||||
<table class="ui very basic striped commits table">
|
||||
<table class="ui very basic striped fixed single line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{.i18n.Tr "repo.commits.author"}}</th>
|
||||
<th>SHA1</th>
|
||||
<th>{{.i18n.Tr "repo.commits.message"}}</th>
|
||||
<th>{{.i18n.Tr "repo.commits.date"}}</th>
|
||||
<th class="four wide">{{.i18n.Tr "repo.commits.author"}}</th>
|
||||
<th class="nine wide message"><span class="ui sha label"> SHA1 </span> {{.i18n.Tr "repo.commits.message"}}</th>
|
||||
<th class="three wide right aligned">{{.i18n.Tr "repo.commits.date"}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -36,9 +35,11 @@
|
|||
<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/> {{.Author.Name}}
|
||||
{{end}}
|
||||
</td>
|
||||
<td class="sha"><a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.ID}} ">{{SubStr .ID.String 0 10}} </a></td>
|
||||
<td class="message"><span class="text truncate">{{RenderCommitMessage .Summary $.RepoLink}}</span></td>
|
||||
<td class="date">{{TimeSince .Author.When $.Lang}}</td>
|
||||
<td class="message">
|
||||
<a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.ID}}">{{ShortSha .ID.String}}</a>
|
||||
{{RenderCommitMessage .Summary $.RepoLink}}
|
||||
</td>
|
||||
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
<table id="repo-files-table" class="ui table">
|
||||
<table id="repo-files-table" class="ui fixed single line table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="5" class="clear">
|
||||
<span>
|
||||
{{if .LastCommitUser}}
|
||||
<img class="ui avatar image img-12" src="{{.LastCommitUser.AvatarLink}}" />
|
||||
<a href="{{AppSubUrl}}/{{.LastCommitUser.Name}}"><strong>{{.LastCommit.Author.Name}}</strong></a>:
|
||||
{{else}}
|
||||
<img class="ui avatar image img-12" src="{{AvatarLink .LastCommit.Author.Email}}" />
|
||||
<strong>{{.LastCommit.Author.Name}}</strong>:
|
||||
{{end}}
|
||||
</span>
|
||||
<a class="text black" href="{{.RepoLink}}/commit/{{.LastCommit.ID}}" rel="nofollow">
|
||||
<strong>{{ShortSha .LastCommit.ID.String}}</strong></a>
|
||||
<span class="text truncate grey" id="last-commit-message">{{RenderCommitMessage .LastCommit.Summary .RepoLink}}</span>
|
||||
<span class="ui right text grey age">{{TimeSince .LastCommit.Author.When $.Lang}}</span>
|
||||
<th class="four wide">
|
||||
{{if .LastCommitUser}}
|
||||
<img class="ui avatar image img-12" src="{{.LastCommitUser.AvatarLink}}" />
|
||||
<a href="{{AppSubUrl}}/{{.LastCommitUser.Name}}"><strong>{{.LastCommit.Author.Name}}</strong></a>
|
||||
{{else}}
|
||||
<img class="ui avatar image img-12" src="{{AvatarLink .LastCommit.Author.Email}}" />
|
||||
<strong>{{.LastCommit.Author.Name}}</strong>
|
||||
{{end}}
|
||||
</th>
|
||||
<th class="nine wide">
|
||||
<a rel="nofollow" class="ui green sha label" href="{{.RepoLink}}/commit/{{.LastCommit.ID}}" rel="nofollow">{{ShortSha .LastCommit.ID.String}}</a>
|
||||
<span class="grey">{{RenderCommitMessage .LastCommit.Summary .RepoLink}}</span>
|
||||
</th>
|
||||
<th class="three wide text grey right age">{{TimeSince .LastCommit.Author.When $.Lang}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{if .HasParentPath}}
|
||||
<tr class="has-parent">
|
||||
<td><span class="octicon octicon-mail-reply"></span></td>
|
||||
<td><a href="{{EscapePound .BranchLink}}{{.ParentPath}}">..</a></td>
|
||||
<td colspan="3"><i class="icon octicon octicon-mail-reply"></i><a href="{{EscapePound .BranchLink}}{{.ParentPath}}">..</a></td>
|
||||
</tr>
|
||||
{{end}}
|
||||
{{range $item := .Files}}
|
||||
|
|
@ -32,27 +30,21 @@
|
|||
{{if $entry.IsSubModule}}
|
||||
<td>
|
||||
<span class="icon octicon octicon-file-submodule"></span>
|
||||
</td>
|
||||
<td>
|
||||
{{if $commit.RefUrl}}
|
||||
<a href="{{$commit.RefUrl}}" class="text truncate">{{$entry.Name}}</a> @ <a href="{{$commit.RefUrl}}/commit/{{$commit.RefId}}">{{ShortSha $commit.RefId}}</a>
|
||||
<a href="{{$commit.RefUrl}}">{{$entry.Name}}</a> @ <a href="{{$commit.RefUrl}}/commit/{{$commit.RefId}}">{{ShortSha $commit.RefId}}</a>
|
||||
{{else}}
|
||||
{{$entry.Name}} @ {{ShortSha $commit.RefId}}
|
||||
{{end}}
|
||||
</td>
|
||||
{{else}}
|
||||
<td>
|
||||
<span class="icon octicon octicon-file-{{if or $entry.IsDir}}directory{{else}}text{{end}}"></span>
|
||||
</td>
|
||||
<td class="name">
|
||||
<a href="{{EscapePound $.BranchLink}}/{{EscapePound $.TreePath}}{{EscapePound $entry.Name}}" class="text truncate">{{$entry.Name}}</a>
|
||||
<span class="icon octicon octicon-file-{{if or $entry.IsDir}}directory{{else}}text{{end}}"></span>
|
||||
<a href="{{EscapePound $.BranchLink}}/{{EscapePound $.TreePath}}{{EscapePound $entry.Name}}">{{$entry.Name}}</a>
|
||||
</td>
|
||||
{{end}}
|
||||
<td class="sha">
|
||||
<a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.ID}} ">{{SubStr $commit.ID.String 0 10}} </a>
|
||||
</td>
|
||||
<td class="message">
|
||||
<span class="text truncate">{{RenderCommitMessage $commit.Summary $.RepoLink}}</span>
|
||||
<td class="message collapsing">
|
||||
<a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.ID}}">{{ShortSha $commit.ID.String}}</a>
|
||||
{{RenderCommitMessage $commit.Summary $.RepoLink}}
|
||||
</td>
|
||||
<td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Reference in a new issue