core
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2015-12-01 00:04:13 +01:00
parent 4813665d0a
commit 61fdd8c571
4 changed files with 32 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public/css/gogs.css
View File

@ -1857,40 +1857,16 @@ footer .container .links > *:first-child {
.repository.file.list .head.meta li .ui.breadcrumb a { .repository.file.list .head.meta li .ui.breadcrumb a {
font-size: 16px; font-size: 16px;
} }
.repository.file.list #repo-files-table .table.list {
width: 80% !important;
}
.repository.file.list #repo-files-table thead th { .repository.file.list #repo-files-table thead th {
padding-top: 8px; padding-top: 8px;
padding-bottom: 5px; padding-bottom: 5px;
font-weight: normal; 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 { .repository.file.list #repo-files-table thead .ui.avatar {
margin-bottom: 5px; margin-bottom: 5px;
} }
.repository.file.list #repo-files-table tbody .icon { .repository.file.list #repo-files-table tbody .icon {
margin-left: 5px; margin-right: 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%;
} }
.repository.file.list #repo-files-table td { .repository.file.list #repo-files-table td {
padding-top: 8px; padding-top: 8px;
@ -2255,25 +2231,6 @@ footer .container .links > *:first-child {
font-weight: normal; font-weight: normal;
padding: 5px 10px; 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 { .repository .diff-detail-box {
margin: 15px 0; margin: 15px 0;
line-height: 30px; line-height: 30px;

49
public/less/_repository.less
View File

@ -143,24 +143,11 @@
} }
#repo-files-table { #repo-files-table {
.table.list {
width: 80% !important;
}
thead { thead {
th { th {
padding-top: 8px; padding-top: 8px;
padding-bottom: 5px; padding-bottom: 5px;
font-weight: normal; font-weight: normal;
#last-commit-message {
margin-left: 5px;
margin-bottom: -4px;
width: 400px;
}
.age {
margin-top: 2px;
}
} }
.ui.avatar { .ui.avatar {
margin-bottom: 5px; margin-bottom: 5px;
@ -168,21 +155,7 @@
} }
tbody { tbody {
.icon { .icon {
margin-left: 5px; margin-right: 5px;
}
.name {
max-width: 120px;
}
.message {
max-width: 300px;
}
.age {
min-width: 150px;
}
.text.truncate {
margin-bottom: -5px;
max-width: 100%;
} }
} }
td { 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 { .diff-detail-box {
margin: 15px 0; margin: 15px 0;

17
templates/repo/commits_table.tmpl
View File

@ -16,13 +16,12 @@
{{if .Commits}} {{if .Commits}}
<div class="ui attached table segment"> <div class="ui attached table segment">
<table class="ui very basic striped commits table"> <table class="ui very basic striped fixed single line">
<thead> <thead>
<tr> <tr>
<th>{{.i18n.Tr "repo.commits.author"}}</th> <th class="four wide">{{.i18n.Tr "repo.commits.author"}}</th>
<th>SHA1</th> <th class="nine wide message"><span class="ui sha label">&nbsp;&nbsp;&nbsp;SHA1&nbsp;&nbsp;&nbsp;</span> {{.i18n.Tr "repo.commits.message"}}</th>
<th>{{.i18n.Tr "repo.commits.message"}}</th> <th class="three wide right aligned">{{.i18n.Tr "repo.commits.date"}}</th>
<th>{{.i18n.Tr "repo.commits.date"}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -36,9 +35,11 @@
<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}} <img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
{{end}} {{end}}
</td> </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">
<td class="message"><span class="text truncate">{{RenderCommitMessage .Summary $.RepoLink}}</span></td> <a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.ID}}">{{ShortSha .ID.String}}</a>
<td class="date">{{TimeSince .Author.When $.Lang}}</td> {{RenderCommitMessage .Summary $.RepoLink}}
</td>
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
</tr> </tr>
{{end}} {{end}}
</tbody> </tbody>

50
templates/repo/view_list.tmpl
View File

@ -1,28 +1,26 @@
<table id="repo-files-table" class="ui table"> <table id="repo-files-table" class="ui fixed single line table">
<thead> <thead>
<tr> <tr>
<th colspan="5" class="clear"> <th class="four wide">
<span> {{if .LastCommitUser}}
{{if .LastCommitUser}} <img class="ui avatar image img-12" src="{{.LastCommitUser.AvatarLink}}" />
<img class="ui avatar image img-12" src="{{.LastCommitUser.AvatarLink}}" /> <a href="{{AppSubUrl}}/{{.LastCommitUser.Name}}"><strong>{{.LastCommit.Author.Name}}</strong></a>
<a href="{{AppSubUrl}}/{{.LastCommitUser.Name}}"><strong>{{.LastCommit.Author.Name}}</strong></a>: {{else}}
{{else}} <img class="ui avatar image img-12" src="{{AvatarLink .LastCommit.Author.Email}}" />
<img class="ui avatar image img-12" src="{{AvatarLink .LastCommit.Author.Email}}" /> <strong>{{.LastCommit.Author.Name}}</strong>
<strong>{{.LastCommit.Author.Name}}</strong>: {{end}}
{{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> </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> </tr>
</thead> </thead>
<tbody> <tbody>
{{if .HasParentPath}} {{if .HasParentPath}}
<tr class="has-parent"> <tr class="has-parent">
<td><span class="octicon octicon-mail-reply"></span></td> <td colspan="3"><i class="icon octicon octicon-mail-reply"></i><a href="{{EscapePound .BranchLink}}{{.ParentPath}}">..</a></td>
<td><a href="{{EscapePound .BranchLink}}{{.ParentPath}}">..</a></td>
</tr> </tr>
{{end}} {{end}}
{{range $item := .Files}} {{range $item := .Files}}
@ -32,27 +30,21 @@
{{if $entry.IsSubModule}} {{if $entry.IsSubModule}}
<td> <td>
<span class="icon octicon octicon-file-submodule"></span> <span class="icon octicon octicon-file-submodule"></span>
</td>
<td>
{{if $commit.RefUrl}} {{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}} {{else}}
{{$entry.Name}} @ {{ShortSha $commit.RefId}} {{$entry.Name}} @ {{ShortSha $commit.RefId}}
{{end}} {{end}}
</td> </td>
{{else}} {{else}}
<td>
<span class="icon octicon octicon-file-{{if or $entry.IsDir}}directory{{else}}text{{end}}"></span>
</td>
<td class="name"> <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> </td>
{{end}} {{end}}
<td class="sha"> <td class="message collapsing">
<a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.ID}} ">{{SubStr $commit.ID.String 0 10}} </a> <a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.ID}}">{{ShortSha $commit.ID.String}}</a>
</td> {{RenderCommitMessage $commit.Summary $.RepoLink}}
<td class="message">
<span class="text truncate">{{RenderCommitMessage $commit.Summary $.RepoLink}}</span>
</td> </td>
<td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td> <td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>
</tr> </tr>