Improve representation of attachments in issues (#11141)

* Improves representation of attachments in issues to a list showing the file name and file size (see #6500 and #6089).

Signed-off-by: Matthias Schoettle <git@mattsch.com>

* Fixes indentation.

Co-authored-by: zeripath <art27@cantab.net>

templates/repo/issue/view_content.tmpl

@@ -55,6 +55,12 @@
 						</div>
 						<div id="comment-{{.Issue.ID}}" class="raw-content hide">{{.Issue.Content}}</div>
 						<div class="edit-content-zone hide" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div>
+					{{if .Issue.Attachments}}
+						<div class="ui clearing divider"></div>
+						<div class="ui middle aligned padded grid">
+							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
+						</div>
+					{{end}}
 					</div>
 					{{$reactions := .Issue.Reactions.GroupByType}}
 					{{if $reactions}}
@@ -62,13 +68,6 @@
 							{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
 						</div>
 					{{end}}
-					{{if .Issue.Attachments}}
-						<div class="ui bottom attached segment">
-							<div class="ui small images">
-								{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
-							</div>
-						</div>
-					{{end}}
 				</div>
 			</div>
 

templates/repo/issue/view_content/attachments.tmpl

@@ -1,9 +1,15 @@
 {{range .Attachments}}
-  <a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
+<div class="twelve wide column" style="padding: 6px;">
+	<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
 	{{if FilenameIsImage .Name}}
-      <img class="ui image" src="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
+		<span class="ui image">{{svg "octicon-file-media" 16}}</span>
 	{{else}}
-      <span class="ui image" title='{{$.ctx.i18n.Tr "repo.issues.attachment.download" .Name}}'>{{svg "octicon-desktop-download" 16}}</span>
+		<span class="ui image">{{svg "octicon-desktop-download" 16}}</span>
 	{{end}}
+		<span><strong>{{.Name}}</strong></span>
 	</a>
+</div>
+<div class="four wide column" style="padding: 0px;">
+	<span class="ui text grey right">{{.Size | FileSize}}</span>
+</div>
 {{end}}

templates/repo/issue/view_content/comments.tmpl

@@ -52,6 +52,12 @@
 					</div>
 					<div id="comment-{{.ID}}" class="raw-content hide">{{.Content}}</div>
 					<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
+				{{if .Issue.Attachments}}
+					<div class="ui clearing divider"></div>
+					<div class="ui middle aligned padded grid">
+						{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
+					</div>
+				{{end}}
 				</div>
 				{{$reactions := .Reactions.GroupByType}}
 				{{if $reactions}}
@@ -59,13 +65,6 @@
 						{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 					</div>
 				{{end}}
-				{{if .Attachments}}
-					<div class="ui bottom attached segment">
-						<div class="ui small images">
-							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments}}
-						</div>
-					</div>
-				{{end}}
 			</div>
 		</div>
 	{{else if eq .Type 1}}