Rework blame template and styling (#11885)

* Rework blame template and styling

* cleanup template and add missing NumLines

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

routers/repo/blame.go

 
 	ctx.Data["IsBlame"] = true
 
-	if ctx.Repo.CanEnableEditor() {
-		// Check LFS Lock
-		lfsLock, err := ctx.Repo.Repository.GetTreePathLock(ctx.Repo.TreePath)
-		if err != nil {
-			ctx.ServerError("GetTreePathLock", err)
-			return
-		}
-		if lfsLock != nil && lfsLock.OwnerID != ctx.User.ID {
-			ctx.Data["CanDeleteFile"] = false
-			ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.this_file_locked")
-		} else {
-			ctx.Data["CanDeleteFile"] = true
-			ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.delete_this_file")
-		}
-	} else if !ctx.Repo.IsViewBranch {
-		ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.must_be_on_a_branch")
-	} else if !ctx.Repo.CanWrite(models.UnitTypeCode) {
-		ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.must_have_write_access")
-	}
-
 	ctx.Data["FileSize"] = blob.Size()
 	ctx.Data["FileName"] = blob.Name()
 
+	ctx.Data["NumLines"], err = blob.GetBlobLineCount()
+	if err != nil {
+		ctx.NotFound("GetBlobLineCount", err)
+		return
+	}
+
 	blameReader, err := git.CreateBlameReader(models.RepoPath(userName, repoName), commitID, fileName)
 	if err != nil {
 		ctx.NotFound("CreateBlameReader", err)
 
 			//Line number
 			if len(part.Lines)-1 == index && len(blameParts)-1 != pi {
-				lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d" class="bottom-line">%d</span>`, i, i))
+				lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d" data-line-number="%d" class="bottom-line"></span>`, i, i))
 			} else {
-				lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d">%d</span>`, i, i))
+				lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d" data-line-number="%d"></span>`, i, i))
 			}
 
 			//Code line

templates/repo/blame.tmpl

-<div class="tab-size-8 non-diff-file-content">
-
-	<h4 class="ui top attached header" id="repo-read-file">
-		<div class="ui stackable grid">
-			<div class="eight wide column">
-                <i class="file text outline icon ui left"></i>
-                <strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
+	<h4 class="file-header ui top attached header">
+		<div class="file-header-left">
+			<div class="file-info text grey normal mono">
+				<div class="file-info-entry">
+					{{.NumLines}} {{.i18n.Tr (TrN .i18n.Lang .NumLines "repo.line" "repo.lines") }}
+				</div>
+				<div class="file-info-entry">{{FileSize .FileSize}}</div>
 			</div>
-			<div class="eight wide right aligned column">
-                <div class="ui right file-actions">
-                    <div class="ui buttons">
-                        <a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
-                        {{if not .IsViewCommit}}
-                            <a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
-                        {{end}}
-                        <a class="ui button" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.normal_view"}}</a>
-                        <a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
-                    </div>
-                    {{if .Repository.CanEnableEditor}}
-                        {{if .CanEditFile}}
-                            <a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon poping up"  data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil" 16}}</span></a>
-                        {{else}}
-                            <span class="btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil" 16}}</span>
-                        {{end}}
-                        {{if .CanDeleteFile}}
-                            <a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon btn-octicon-danger poping up"  data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan" 16}}</span></a>
-                        {{else}}
-                            <span class="btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan" 16}}</span>
-                        {{end}}
-                    {{end}}
-                </div>
+		</div>
+		<div class="file-header-right">
+			<div class="ui right file-actions">
+				<div class="ui buttons">
+					<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
+					{{if not .IsViewCommit}}
+						<a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
+					{{end}}
+					<a class="ui button" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.normal_view"}}</a>
+					<a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
+				</div>
 			</div>
 		</div>
 	</h4>
-
     <div class="ui attached table unstackable segment">
-        <div class="file-view code-view">
-            <table>
-                <tbody>
-                    <tr>
-                        <td class="lines-commit">{{.BlameCommitInfo}}</td>
-                        <td class="lines-num">{{.BlameLineNums}}</td>
-                        <td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol class="linenums">{{.BlameContent}}</ol></code></pre></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+		<div class="file-view code-view">
+			<table>
+				<tbody>
+					<tr>
+						<td class="lines-commit">{{.BlameCommitInfo}}</td>
+						<td class="lines-num">{{.BlameLineNums}}</td>
+						<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol class="linenums">{{.BlameContent}}</ol></code></pre></td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
     </div>
-
-
 </div>

templates/repo/home.tmpl

 {{template "base/head" .}}
-<div class="repository file list">
+<div class="repository file list {{if .IsBlame}}blame{{end}}">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}

web_src/less/_base.less

 }
 
 .lines-num {
-    vertical-align: top;
     text-align: right !important;
     color: #999999;
     background: #f5f5f5;
     user-select: none;
 
     span {
-        &:before {
+        &.bottom-line {
+            &:after {
+                border-bottom: 1px solid #eaecef;
+            }
+        }
+
+        &:after {
             content: attr(data-line-number);
             line-height: 20px !important;
             padding: 0 10px;
 .lines-num,
 .lines-code {
     padding: 0 !important;
+    vertical-align: top;
 
     pre,
     ol,
         li {
             display: block;
             width: calc(100% - 1ch);
-            margin-left: 1ch;
+            padding-left: 1ch;
         }
     }
 }
     }
 }
 
-.lines-num,
 .lines-code,
 .lines-commit {
     .bottom-line {

web_src/less/_repository.less

 .repository {
-
     padding-top: 15px;
 
     .repo-header {
     }
 
     &.file.list {
+        &.blame {
+            .ui.container:not(.flex) {
+                width: 98%;
+            }
+        }
+
         .repo-description {
             display: flex;
             justify-content: space-between;
                 width: 1%;
                 min-width: 50px;
                 user-select: none;
-                vertical-align: top;
 
                 span.fold {
                     display: block;