coolaj86
/
gitroast
1
0
Fork 0
Code Issues Pull Requests 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 {
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;

49
public/less/_repository.less
View File

@ -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;

17
templates/repo/commits_table.tmpl
View File

@ -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">&nbsp;&nbsp;&nbsp;SHA1&nbsp;&nbsp;&nbsp;</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=""/>&nbsp;&nbsp;{{.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>

40
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>
<tr>
<th colspan="5" class="clear">
<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>:
<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>:
<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>
<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>