playground
/
gogs
mirror of https://github.com/gogits/gogs.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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.
pull/2068/head
Adam Strzelecki 9 years ago
parent
4813665d0a
commit
61fdd8c571
4 changed files with 32 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      public/css/gogs.css
  2. 49
      public/less/_repository.less
  3. 17
      templates/repo/commits_table.tmpl
  4. 50
      templates/repo/view_list.tmpl

45
public/css/gogs.css
Unescape 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
Unescape 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
Unescape 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>

50
templates/repo/view_list.tmpl
Unescape 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>
{{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>

Write Preview
Loading…
Cancel
Save