Fix ellipsis in files table (#12617)
Turns out text ellispsis does not work in combination with flexbox and while wrapping in a display:block can help in some cases, I could not get this to work properly so this changes the truncate to inline-block again and reduces the clickable area to just vertical expansion from the links.
This commit is contained in:
		
							parent
							
								
									e25d4867be
								
							
						
					
					
						commit
						f8601f3f09
					
				
					 2 changed files with 7 additions and 6 deletions
				
			
		|  | @ -49,7 +49,7 @@ | |||
| 							{{svg "octicon-file-submodule" 16}} | ||||
| 							{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}} | ||||
| 							{{if $refURL}} | ||||
| 								<a class="flex-0" href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a class="flex-1" href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a> | ||||
| 								<a href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a> | ||||
| 							{{else}} | ||||
| 								{{$entry.Name}}<span class="at">@</span>{{ShortSha $commit.RefID}} | ||||
| 							{{end}} | ||||
|  | @ -58,7 +58,7 @@ | |||
| 								{{$subJumpablePathName := $entry.GetSubJumpablePathName}} | ||||
| 								{{$subJumpablePath := SubJumpablePath $subJumpablePathName}} | ||||
| 								{{svg "octicon-file-directory" 16}} | ||||
| 								<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}"> | ||||
| 								<a href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}"> | ||||
| 									{{if eq (len $subJumpablePath) 2}} | ||||
| 										<span class="jumpable-path">{{index  $subJumpablePath 0}}</span>{{index  $subJumpablePath 1}} | ||||
| 									{{else}} | ||||
|  | @ -67,14 +67,14 @@ | |||
| 								</a> | ||||
| 							{{else}} | ||||
| 								{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}} | ||||
| 								<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a> | ||||
| 								<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a> | ||||
| 							{{end}} | ||||
| 						{{end}} | ||||
| 					</span> | ||||
| 				</td> | ||||
| 				<td class="message nine wide"> | ||||
| 					<span class="truncate"> | ||||
| 						<a class="flex-1" href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a> | ||||
| 						<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a> | ||||
| 					</span> | ||||
| 				</td> | ||||
| 				<td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td> | ||||
|  |  | |||
|  | @ -362,12 +362,13 @@ | |||
|         } | ||||
| 
 | ||||
|         .truncate { | ||||
|           display: inline-flex; | ||||
|           align-items: center; | ||||
|           display: inline-block; | ||||
|           overflow: hidden; | ||||
|           text-overflow: ellipsis; | ||||
|           white-space: nowrap; | ||||
|           width: 100%; | ||||
|           padding-top: 8px; | ||||
|           padding-bottom: 8px; | ||||
|         } | ||||
| 
 | ||||
|         a { | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue