Add wrapper to author to avoid long name ui problem (#23030)
This PR is a possible solution for issue #22866. Main change is to add a `author-wrapper` class around author name, like the wrapper added to message. The `max-width` is set to 200px on PC, and 100px on mobile device for now.
This commit is contained in:
parent
659cf30b69
commit
8ed6096158
|
@ -8,14 +8,14 @@
|
||||||
{{if .LatestCommitUser}}
|
{{if .LatestCommitUser}}
|
||||||
{{avatar $.Context .LatestCommitUser 24}}
|
{{avatar $.Context .LatestCommitUser 24}}
|
||||||
{{if .LatestCommitUser.FullName}}
|
{{if .LatestCommitUser.FullName}}
|
||||||
<a class="muted" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
|
<a class="muted author-wrapper" title="{{.LatestCommitUser.FullName}}" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
|
||||||
{{else}}
|
{{else}}
|
||||||
<a class="muted" href="{{.LatestCommitUser.HomeLink}}"><strong>{{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}}</strong></a>
|
<a class="muted author-wrapper" title="{{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}}" href="{{.LatestCommitUser.HomeLink}}"><strong>{{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}}</strong></a>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{else}}
|
{{else}}
|
||||||
{{if .LatestCommit.Author}}
|
{{if .LatestCommit.Author}}
|
||||||
{{avatarByEmail $.Context .LatestCommit.Author.Email .LatestCommit.Author.Name 24}}
|
{{avatarByEmail $.Context .LatestCommit.Author.Email .LatestCommit.Author.Name 24}}
|
||||||
<strong>{{.LatestCommit.Author.Name}}</strong>
|
<span class="author-wrapper" title="{{.LatestCommit.Author.Name}}"><strong>{{.LatestCommit.Author.Name}}</strong></span>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
<a rel="nofollow" class="ui sha label {{if .LatestCommit.Signature}} isSigned {{if .LatestCommitVerification.Verified}} isVerified{{if eq .LatestCommitVerification.TrustStatus "trusted"}}{{else if eq .LatestCommitVerification.TrustStatus "untrusted"}}Untrusted{{else}}Unmatched{{end}}{{else if .LatestCommitVerification.Warning}} isWarning{{end}}{{end}}" href="{{.RepoLink}}/commit/{{PathEscape .LatestCommit.ID.String}}">
|
<a rel="nofollow" class="ui sha label {{if .LatestCommit.Signature}} isSigned {{if .LatestCommitVerification.Verified}} isVerified{{if eq .LatestCommitVerification.TrustStatus "trusted"}}{{else if eq .LatestCommitVerification.TrustStatus "untrusted"}}Untrusted{{else}}Unmatched{{end}}{{else if .LatestCommitVerification.Warning}} isWarning{{end}}{{end}}" href="{{.RepoLink}}/commit/{{PathEscape .LatestCommit.ID.String}}">
|
||||||
|
|
|
@ -237,6 +237,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#repo-files-table {
|
#repo-files-table {
|
||||||
|
table-layout: fixed;
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
th {
|
th {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
|
@ -2885,7 +2887,8 @@ tbody.commit-list {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-wrapper {
|
.message-wrapper,
|
||||||
|
.author-wrapper {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
max-width: calc(100% - 50px);
|
max-width: calc(100% - 50px);
|
||||||
|
@ -2893,6 +2896,10 @@ tbody.commit-list {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-wrapper {
|
||||||
|
max-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
// in the commit list, messages can wrap so we can use inline
|
// in the commit list, messages can wrap so we can use inline
|
||||||
.commit-list .message-wrapper {
|
.commit-list .message-wrapper {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
@ -2912,6 +2919,10 @@ tbody.commit-list {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: calc(100vw - 70px);
|
max-width: calc(100vw - 70px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-wrapper {
|
||||||
|
max-width: 80px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media @mediaMd {
|
@media @mediaMd {
|
||||||
|
@ -2920,7 +2931,7 @@ tbody.commit-list {
|
||||||
}
|
}
|
||||||
|
|
||||||
th .message-wrapper {
|
th .message-wrapper {
|
||||||
max-width: 280px;
|
max-width: 120px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2930,7 +2941,7 @@ tbody.commit-list {
|
||||||
}
|
}
|
||||||
|
|
||||||
th .message-wrapper {
|
th .message-wrapper {
|
||||||
max-width: 490px;
|
max-width: 350px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2940,7 +2951,7 @@ tbody.commit-list {
|
||||||
}
|
}
|
||||||
|
|
||||||
th .message-wrapper {
|
th .message-wrapper {
|
||||||
max-width: 680px;
|
max-width: 525px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue