Put web editor into a segment (#30966) (#30993)

Backport #30966 by silverwind

Co-authored-by: silverwind <me@silverwind.io>

diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index ae3f12669c252c54655f52db1f6ce5acb41f0f2c..e990177d8a875f2346d0a69972bc1e77c098c16e 100644 (file)
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -26,26 +26,30 @@
                                </div>
                        </div>
                        <div class="field">
-                               <div class="ui compact small menu small-menu-items repo-editor-menu">
-                                       <a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
-                                       <a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
-                                       {{if not .IsNewFile}}
-                                       <a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
-                                       {{end}}
-                               </div>
-                               <div class="ui active tab segment tw-rounded" data-tab="write">
-                                       <textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
-                                               data-url="{{.Repository.Link}}/markup"
-                                               data-context="{{.RepoLink}}"
-                                               data-previewable-extensions="{{.PreviewableExtensions}}"
-                                               data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
-                                       <div class="editor-loading is-loading"></div>
-                               </div>
-                               <div class="ui tab segment markup tw-rounded" data-tab="preview">
-                                       {{ctx.Locale.Tr "loading"}}
+                               <div class="ui top attached header">
+                                       <div class="ui compact small menu small-menu-items repo-editor-menu">
+                                               <a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
+                                               <a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
+                                               {{if not .IsNewFile}}
+                                               <a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
+                                               {{end}}
+                                       </div>
                                </div>
-                               <div class="ui tab segment diff edit-diff" data-tab="diff">
-                                       <div class="tw-p-16"></div>
+                               <div class="ui bottom attached segment tw-p-0">
+                                       <div class="ui active tab tw-rounded" data-tab="write">
+                                               <textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
+                                                       data-url="{{.Repository.Link}}/markup"
+                                                       data-context="{{.RepoLink}}"
+                                                       data-previewable-extensions="{{.PreviewableExtensions}}"
+                                                       data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
+                                               <div class="editor-loading is-loading"></div>
+                                       </div>
+                                       <div class="ui tab markup tw-px-4 tw-py-3" data-tab="preview">
+                                               {{ctx.Locale.Tr "loading"}}
+                                       </div>
+                                       <div class="ui tab diff edit-diff" data-tab="diff">
+                                               <div class="tw-p-16"></div>
+                                       </div>
                                </div>
                        </div>
                        {{template "repo/editor/commit_form" .}}