Fix file table overflows (#12603)
- Fix overflow regression from https://github.com/go-gitea/gitea/pull/12553. - Fix submodule columns stretching the table - Refactor template to share more HTML nodes - Introduce CSS helper classes Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
		
							parent
							
								
									69b3dd6362
								
							
						
					
					
						commit
						7d14d6c1c1
					
				
					 5 changed files with 52 additions and 34 deletions
				
			
		| 
						 | 
				
			
			@ -148,7 +148,7 @@ func TestViewRepoWithSymlinks(t *testing.T) {
 | 
			
		|||
	resp := session.MakeRequest(t, req, http.StatusOK)
 | 
			
		||||
 | 
			
		||||
	htmlDoc := NewHTMLParser(t, resp.Body)
 | 
			
		||||
	files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name")
 | 
			
		||||
	files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN.truncate")
 | 
			
		||||
	items := files.Map(func(i int, s *goquery.Selection) string {
 | 
			
		||||
		cls, _ := s.Find("SVG").Attr("class")
 | 
			
		||||
		file := strings.Trim(s.Find("A").Text(), " \t\n")
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -43,37 +43,39 @@
 | 
			
		|||
			{{$entry := index $item 0}}
 | 
			
		||||
			{{$commit := index $item 1}}
 | 
			
		||||
			<tr>
 | 
			
		||||
				{{if $entry.IsSubModule}}
 | 
			
		||||
					<td>
 | 
			
		||||
						{{svg "octicon-file-submodule" 16}}
 | 
			
		||||
						{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}}
 | 
			
		||||
						{{if $refURL}}
 | 
			
		||||
							<a href="{{$refURL}}">{{$entry.Name}}</a> @ <a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
 | 
			
		||||
				<td class="name four wide">
 | 
			
		||||
					<span class="truncate">
 | 
			
		||||
						{{if $entry.IsSubModule}}
 | 
			
		||||
							{{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>
 | 
			
		||||
							{{else}}
 | 
			
		||||
								{{$entry.Name}}<span class="at">@</span>{{ShortSha $commit.RefID}}
 | 
			
		||||
							{{end}}
 | 
			
		||||
						{{else}}
 | 
			
		||||
							{{$entry.Name}} @ {{ShortSha $commit.RefID}}
 | 
			
		||||
							{{if $entry.IsDir}}
 | 
			
		||||
								{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
 | 
			
		||||
								{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
 | 
			
		||||
								{{svg "octicon-file-directory" 16}}
 | 
			
		||||
								<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
 | 
			
		||||
									{{if eq (len $subJumpablePath) 2}}
 | 
			
		||||
										<span class="jumpable-path">{{index  $subJumpablePath 0}}</span>{{index  $subJumpablePath 1}}
 | 
			
		||||
									{{else}}
 | 
			
		||||
										{{index $subJumpablePath 0}}
 | 
			
		||||
									{{end}}
 | 
			
		||||
								</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>
 | 
			
		||||
							{{end}}
 | 
			
		||||
						{{end}}
 | 
			
		||||
					</td>
 | 
			
		||||
				{{else}}
 | 
			
		||||
					<td class="name four wide">
 | 
			
		||||
						{{if $entry.IsDir}}
 | 
			
		||||
							{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
 | 
			
		||||
							{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
 | 
			
		||||
							{{svg "octicon-file-directory" 16}}
 | 
			
		||||
							<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}}
 | 
			
		||||
									{{index $subJumpablePath 0}}
 | 
			
		||||
								{{end}}
 | 
			
		||||
							</a>
 | 
			
		||||
						{{else}}
 | 
			
		||||
							{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
 | 
			
		||||
							<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
 | 
			
		||||
						{{end}}
 | 
			
		||||
					</td>
 | 
			
		||||
				{{end}}
 | 
			
		||||
					</span>
 | 
			
		||||
				</td>
 | 
			
		||||
				<td class="message nine wide">
 | 
			
		||||
					<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
 | 
			
		||||
					<span class="truncate">
 | 
			
		||||
						<a class="flex-1" 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>
 | 
			
		||||
			</tr>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -361,14 +361,23 @@
 | 
			
		|||
          width: 120px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        > a {
 | 
			
		||||
          width: calc(100% - 8px); /* prevent overflow into adjacant cell */
 | 
			
		||||
          display: inline-block;
 | 
			
		||||
          padding-top: 8px;
 | 
			
		||||
          padding-bottom: 8px;
 | 
			
		||||
        .truncate {
 | 
			
		||||
          display: inline-flex;
 | 
			
		||||
          align-items: center;
 | 
			
		||||
          overflow: hidden;
 | 
			
		||||
          text-overflow: ellipsis;
 | 
			
		||||
          white-space: nowrap;
 | 
			
		||||
          width: 100%;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        a {
 | 
			
		||||
          padding-top: 8px;
 | 
			
		||||
          padding-bottom: 8px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .at {
 | 
			
		||||
          margin-left: 3px;
 | 
			
		||||
          margin-right: 3px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        > * {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										6
									
								
								web_src/less/helpers.less
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										6
									
								
								web_src/less/helpers.less
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,6 @@
 | 
			
		|||
.flex-0 {
 | 
			
		||||
  flex: 0;
 | 
			
		||||
}
 | 
			
		||||
.flex-1 {
 | 
			
		||||
  flex: 1;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -1,5 +1,6 @@
 | 
			
		|||
@import "~font-awesome/css/font-awesome.css";
 | 
			
		||||
 | 
			
		||||
@import "./helpers.less";
 | 
			
		||||
@import "./features/gitgraph.less";
 | 
			
		||||
@import "./features/animations.less";
 | 
			
		||||
@import "./markdown/mermaid.less";
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue