Skip to content

UI: Fix overflow issues in repo #7190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 14, 2019
Merged

UI: Fix overflow issues in repo #7190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
70172dc
UI: Fix overflow issues in repo
silverwind Jun 12, 2019
1fb0a1b
Merge branch 'master' into ui-overflows
techknowlogick Jun 12, 2019
b68d8c7
Merge branch 'master' into ui-overflows
techknowlogick Jun 12, 2019
62616c9
Merge branch 'master' into ui-overflows
zeripath Jun 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,7 @@ css:
npx postcss --use autoprefixer --no-map --replace public/css/*

@diff=$$(git diff public/css/*); \
if ([ ! -z "$CI" ] && [ -n "$$diff" ]); then \
if ([ -n "$$CI" ] && [ -n "$$diff" ]); then \
echo "Generated files in public/css have changed, please commit the result:"; \
echo "$${diff}"; \
exit 1; \
Expand Down
2 changes: 2 additions & 0 deletions public/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -803,6 +803,8 @@ footer .ui.left,footer .ui.right{line-height:40px}
.stats-table .table-cell{display:table-cell}
.stats-table .table-cell.tiny{height:.5em}
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 .commit-status-link{display:inline-block;vertical-align:middle}
.commit-body{white-space:pre-wrap}
.git-notes.top{text-align:left}
.git-notes .commit-body{margin:0}
Expand Down
13 changes: 13 additions & 0 deletions public/less/_repository.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2219,6 +2219,19 @@ 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 .commit-status-link {
display: inline-block;
vertical-align: middle;
}

.commit-body {
white-space: pre-wrap;
}
Expand Down
10 changes: 5 additions & 5 deletions templates/repo/commit_status.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{{if eq .State "pending"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
{{end}}
{{if eq .State "success"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
{{end}}
{{if eq .State "error"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
{{end}}
{{if eq .State "failure"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
{{end}}
{{if eq .State "warning"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
{{end}}
18 changes: 10 additions & 8 deletions templates/repo/commits_table.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@
<td class="author">
{{if .User}}
{{if .User.FullName}}
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
{{else}}
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
{{end}}
{{else}}
<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
Expand All @@ -69,12 +69,14 @@
{{end}}
</a>
</td>
<td class="message collapsing">
<span class="has-emoji{{if gt .ParentCount 1}} grey text{{end}}">{{.Summary}}</span>
{{if IsMultilineCommitMessage .Message}}
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}}
<td class="message">
<span class="message-wrapper">
<span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
{{if IsMultilineCommitMessage .Message}}
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}}
</span>
{{template "repo/commit_status" .Status}}
</td>
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
Expand Down
9 changes: 5 additions & 4 deletions templates/repo/view_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<table id="repo-files-table" class="ui single line table">
<table id="repo-files-table" class="ui single line table fixed">
<thead>
<tr class="commit-list">
<th colspan="2">
Expand Down Expand Up @@ -27,12 +27,13 @@
</div>
{{end}}
</a>
<span class="grey has-emoji">{{.LatestCommit.Summary}}
{{template "repo/commit_status" .LatestCommitStatus}}
<span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}">{{.LatestCommit.Summary}}
{{if IsMultilineCommitMessage .LatestCommit.Message}}
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}}
{{template "repo/commit_status" .LatestCommitStatus}}</span>
</span>
</th>
<th class="text grey right age">{{if .LatestCommit.Author}}{{TimeSince .LatestCommit.Author.When $.Lang}}{{end}}</th>
</tr>
Expand Down Expand Up @@ -82,7 +83,7 @@
{{end}}
<td class="message has-emoji">
<span class="truncate">
<a href="{{$.RepoLink}}/commit/{{$commit.ID}}">{{$commit.Summary}}</a>
<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary}}</a>
</span>
</td>
<td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>
Expand Down