nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add wrapper to author to avoid long name ui problem (#23030) (#23098)

Browse source 
Backport #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. Which will work like below:

<img width="1183" alt="2023-02-21 11 57 53"
src="https://user-images.githubusercontent.com/17645053/220244146-3d47c512-33b6-4ed8-938e-de0a8bc26ffb.png">

<img width="417" alt="2023-02-21 11 58 43"
src="https://user-images.githubusercontent.com/17645053/220244154-1ea0476b-9d1c-473a-9917-d3216860f9a9.png">

And `title` is added to the wrapper like it did in message wrapper. So
the full author name will show on hover.

Co-authored-by: HesterG <hestergong@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
Yarden Shoham 2023-02-24 04:45:18 +02:00 • committed by GitHub
parent b4ed3f07e4
commit ddf61373f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web_src/less/_repository.less
View file

@ -237,6 +237,8 @@
}
#repo-files-table {
table-layout: fixed;
thead {
th {
padding-top: 8px;
@ -2885,7 +2887,8 @@ tbody.commit-list {
vertical-align: baseline;
}
.message-wrapper {
.message-wrapper,
.author-wrapper {
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 50px);
@ -2893,6 +2896,10 @@ tbody.commit-list {
vertical-align: middle;
}
.author-wrapper {
max-width: 180px;
}
// in the commit list, messages can wrap so we can use inline
.commit-list .message-wrapper {
display: inline;
@ -2912,6 +2919,10 @@ tbody.commit-list {
display: block;
max-width: calc(100vw - 70px);
}
.author-wrapper {
max-width: 80px;
}
}
@media @mediaMd {
@ -2920,7 +2931,7 @@ tbody.commit-list {
}
th .message-wrapper {
max-width: 280px;
max-width: 120px;
}
}
@ -2930,7 +2941,7 @@ tbody.commit-list {
}
th .message-wrapper {
max-width: 490px;
max-width: 350px;
}
}
@ -2940,7 +2951,7 @@ tbody.commit-list {
}
th .message-wrapper {
max-width: 680px;
max-width: 525px;
}
}