Skip to content

Commit 62ab55b

Browse files
wxiaoguangwxiaoguang
authored
Improve wiki sidebar and TOC (#25460)
Close #20976 Close #20975 1. Fix the bug: the TOC in footer was incorrectly rendered as main content's TOC 2. Fix the layout: on mobile, the TOC is put above the main content, while the sidebar is put below the main content 3. Auto collapse the TOC on mobile ps: many styles of "wiki.css" are moved from old css files, so leave nits to following PRs.
1 parent 3c7f5ed commit 62ab55b

File tree

11 files changed

+129
-117
lines changed

11 files changed

+129
-117
lines changed

‎routers/web/repo/wiki.go‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,16 @@ func renderViewPage(ctx *context.Context) (*git.Repository, *git.TreeEntry) {
273273
return nil, nil
274274
}
275275

276+
if rctx.SidebarTocNode != nil {
277+
sb := &strings.Builder{}
278+
err = markdown.SpecializedMarkdown().Renderer().Render(sb, nil, rctx.SidebarTocNode)
279+
if err != nil {
280+
log.Error("Failed to render wiki sidebar TOC: %v", err)
281+
} else {
282+
ctx.Data["sidebarTocContent"] = sb.String()
283+
}
284+
}
285+
276286
if !isSideBar {
277287
buf.Reset()
278288
ctx.Data["sidebarEscapeStatus"], ctx.Data["sidebarContent"], err = renderFn(sidebarContent)
@@ -303,16 +313,6 @@ func renderViewPage(ctx *context.Context) (*git.Repository, *git.TreeEntry) {
303313
ctx.Data["footerPresent"] = false
304314
}
305315

306-
if rctx.SidebarTocNode != nil {
307-
sb := &strings.Builder{}
308-
err = markdown.SpecializedMarkdown().Renderer().Render(sb, nil, rctx.SidebarTocNode)
309-
if err != nil {
310-
log.Error("Failed to render wiki sidebar TOC: %v", err)
311-
} else {
312-
ctx.Data["sidebarTocContent"] = sb.String()
313-
}
314-
}
315-
316316
// get commit count - wiki revisions
317317
commitsCount, _ := wikiRepo.FileCommitsCount(wiki_service.DefaultBranch, pageFilename)
318318
ctx.Data["CommitCount"] = commitsCount

‎templates/repo/wiki/revision.tmpl‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,22 @@
44
{{$title := .title}}
55
<div class="ui container">
66
<div class="ui stackable grid">
7-
<div class="ui eight wide column text right gt-df gt-ac gt-je">
7+
<div class="ui eight wide column">
8+
<div class="ui header">
9+
<a class="file-revisions-btn ui basic button" title="{{.locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}"><span>{{.revision}}</span> {{svg "octicon-home"}}</a>
10+
{{$title}}
11+
<div class="ui sub header gt-word-break">
12+
{{$timeSince := TimeSince .Author.When $.locale}}
13+
{{.locale.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
14+
</div>
15+
</div>
16+
</div>
17+
<div class="ui eight wide column text right">
818
<div class="ui action small input" id="clone-panel">
919
{{template "repo/clone_buttons" .}}
1020
{{template "repo/clone_script" .}}
1121
</div>
1222
</div>
13-
<div class="ui header eight wide column">
14-
<a class="file-revisions-btn ui basic button" title="{{.locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}" ><span>{{.revision}}</span> {{svg "octicon-home"}}</a>
15-
{{$title}}
16-
<div class="ui sub header gt-word-break">
17-
{{$timeSince := TimeSince .Author.When $.locale}}
18-
{{.locale.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
19-
</div>
20-
</div>
2123
</div>
2224
<h2 class="ui top header">{{.locale.Tr "repo.wiki.wiki_page_revisions"}}</h2>
2325
<div class="gt-mt-4">

‎templates/repo/wiki/start.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<div role="main" aria-label="{{.Title}}" class="page-content repository wiki start">
33
{{template "repo/header" .}}
44
<div class="ui container">
5-
<div class="ui center segment">
6-
{{svg "octicon-book" 32}}
5+
<div class="ui center segment gt-py-5">
6+
{{svg "octicon-book" 48}}
77
<h2>{{.locale.Tr "repo.wiki.welcome"}}</h2>
88
<p>{{.locale.Tr "repo.wiki.welcome_desc"}}</p>
99
{{if and .CanWriteWiki (not .Repository.IsMirror)}}

‎templates/repo/wiki/view.tmpl‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -63,39 +63,41 @@
6363
<p>{{.FormatWarning}}</p>
6464
</div>
6565
{{end}}
66-
<div class="ui gt-mt-0 {{if or .sidebarPresent .sidebarTocContent}}grid equal width{{end}}">
67-
<div class="ui {{if or .sidebarPresent .sidebarTocContent}}eleven wide column{{else}}gt-ml-0{{end}} segment markup wiki-content-main">
66+
67+
<div class="wiki-content-parts">
68+
{{if .sidebarTocContent}}
69+
<div class="markup wiki-content-sidebar wiki-content-toc">
70+
{{.sidebarTocContent | Safe}}
71+
</div>
72+
{{end}}
73+
74+
<div class="markup wiki-content-main {{if or .sidebarTocContent .sidebarPresent}}with-sidebar{{end}}">
6875
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
6976
{{.content | Safe}}
7077
</div>
71-
{{if or .sidebarPresent .sidebarTocContent}}
72-
<div class="column gt-pt-0">
73-
{{if .sidebarTocContent}}
74-
<div class="ui segment wiki-content-toc">
75-
{{.sidebarTocContent | Safe}}
76-
</div>
77-
{{end}}
78-
{{if .sidebarPresent}}
79-
<div class="ui segment wiki-content-sidebar">
80-
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
81-
<a class="ui right floated muted" href="{{.RepoLink}}/wiki/_Sidebar?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
82-
{{end}}
83-
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .sidebarEscapeStatus "root" $}}
84-
{{.sidebarContent | Safe}}
85-
</div>
78+
79+
{{if .sidebarPresent}}
80+
<div class="markup wiki-content-sidebar">
81+
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
82+
<a class="ui right floated muted" href="{{.RepoLink}}/wiki/_Sidebar?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
8683
{{end}}
84+
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .sidebarEscapeStatus "root" $}}
85+
{{.sidebarContent | Safe}}
8786
</div>
8887
{{end}}
89-
</div>
90-
{{if .footerPresent}}
91-
<div class="ui segment wiki-content-footer">
92-
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
93-
<a class="ui right floated muted" href="{{.RepoLink}}/wiki/_Footer?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
88+
89+
<div class="gt-clear-both"></div>
90+
91+
{{if .footerPresent}}
92+
<div class="markup wiki-content-footer">
93+
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
94+
<a class="ui right floated muted" href="{{.RepoLink}}/wiki/_Footer?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
95+
{{end}}
96+
{{template "repo/unicode_escape_prompt" dict "footerEscapeStatus" .sidebarEscapeStatus "root" $}}
97+
{{.footerContent | Safe}}
98+
</div>
9499
{{end}}
95-
{{template "repo/unicode_escape_prompt" dict "footerEscapeStatus" .sidebarEscapeStatus "root" $}}
96-
{{.footerContent | Safe}}
97100
</div>
98-
{{end}}
99101
</div>
100102
</div>
101103

‎web_src/css/helpers.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ Gitea's private styles use `g-` prefix.
8585

8686
.gt-float-left { float: left !important; }
8787
.gt-float-right { float: right !important; }
88+
.gt-clear-both { clear: both !important; }
8889

8990
.gt-font-light { font-weight: var(--font-weight-light) !important; }
9091
.gt-font-normal { font-weight: var(--font-weight-normal) !important; }

‎web_src/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
@import "./repo/issue-list.css";
4646
@import "./repo/list-header.css";
4747
@import "./repo/linebutton.css";
48+
@import "./repo/wiki.css";
4849

4950
@import "./editor/fileeditor.css";
5051
@import "./editor/combomarkdowneditor.css";

‎web_src/css/markup/content.css‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -514,20 +514,6 @@
514514
padding-left: 2em;
515515
}
516516

517-
.repository.wiki.revisions .ui.container > .ui.stackable.grid {
518-
-ms-flex-direction: row-reverse;
519-
flex-direction: row-reverse;
520-
}
521-
522-
.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header {
523-
margin-top: 0;
524-
}
525-
526-
.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header .sub.header {
527-
padding-left: 52px;
528-
word-break: break-word;
529-
}
530-
531517
.file-revisions-btn {
532518
display: block;
533519
float: left;

‎web_src/css/repo.css‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1887,50 +1887,9 @@
18871887
white-space: nowrap;
18881888
}
18891889

1890-
.repository.wiki.start .ui.segment {
1891-
padding-top: 70px;
1892-
padding-bottom: 100px;
1893-
}
1894-
1895-
.repository.wiki.start .ui.segment .svg {
1896-
height: 48px;
1897-
}
1898-
1899-
.repository.wiki.new .ui.attached.tabular.menu.previewtabs {
1900-
margin-bottom: 15px;
1901-
}
1902-
19031890
.file-view.markup {
19041891
padding: 1em 2em;
19051892
}
1906-
1907-
.wiki-content-main {
1908-
padding: 1em 2em !important;
1909-
margin-left: 1em !important;
1910-
}
1911-
1912-
.wiki-pages-list .wiki-git-entry {
1913-
margin-left: 10px;
1914-
display: none;
1915-
}
1916-
1917-
.wiki-pages-list td:hover .wiki-git-entry {
1918-
display: inline-block;
1919-
}
1920-
1921-
@media (max-width: 767.98px) {
1922-
.repository.wiki .dividing.header .stackable.grid .button {
1923-
margin-top: 2px;
1924-
margin-bottom: 2px;
1925-
}
1926-
}
1927-
1928-
@media (max-width: 767.98px) {
1929-
.repository.wiki #clone-panel #repo-clone-url {
1930-
width: 160px;
1931-
}
1932-
}
1933-
19341893
.repository .activity-header {
19351894
display: flex;
19361895
justify-content: space-between;
@@ -2988,22 +2947,6 @@ tbody.commit-list {
29882947
flex-direction: column;
29892948
}
29902949

2991-
.wiki-content-sidebar .ui.message.unicode-escape-prompt p,
2992-
.wiki-content-footer .ui.message.unicode-escape-prompt p {
2993-
display: none;
2994-
}
2995-
2996-
.wiki-content-toc ul {
2997-
margin: 0;
2998-
list-style: none;
2999-
padding: 5px 0 5px 1em;
3000-
}
3001-
3002-
.wiki-content-toc ul ul {
3003-
border-left: 1px var(--color-secondary);
3004-
border-left-style: dashed;
3005-
}
3006-
30072950
/* fomantic's last-child selector does not work with hidden last child */
30082951
.ui.buttons .unescape-button {
30092952
border-top-right-radius: 0.28571429rem;

‎web_src/css/repo/wiki.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.repository.wiki .wiki-pages-list .wiki-git-entry {
2+
margin-left: 10px;
3+
display: none;
4+
}
5+
6+
.repository.wiki .wiki-pages-list td:hover .wiki-git-entry {
7+
display: inline-block;
8+
}
9+
10+
.repository.wiki .markup {
11+
overflow: visible;
12+
}
13+
14+
.repository.wiki .wiki-content-parts .markup {
15+
border: 1px solid var(--color-secondary);
16+
padding: 1em;
17+
margin-top: 1em;
18+
font-size: 1em;
19+
}
20+
21+
.repository.wiki .wiki-content-main.with-sidebar {
22+
float: left;
23+
width: 80%;
24+
max-width: calc(100% - 150px - 1em); /* match the min-width of .wiki-content-sidebar */
25+
}
26+
27+
.repository.wiki .wiki-content-sidebar {
28+
float: right;
29+
width: calc(20% - 1em);
30+
min-width: 150px;
31+
}
32+
33+
.repository.wiki .wiki-content-sidebar .ui.message.unicode-escape-prompt p {
34+
display: none;
35+
}
36+
37+
.repository.wiki .wiki-content-footer {
38+
margin-top: 1em;
39+
}
40+
41+
.repository.wiki .wiki-content-toc ul {
42+
margin: 0;
43+
list-style: none;
44+
padding: 5px 0 5px 1em;
45+
}
46+
47+
.repository.wiki .wiki-content-toc ul ul {
48+
border-left: 1px var(--color-secondary);
49+
border-left-style: dashed;
50+
}
51+
52+
@media (max-width: 767.98px) {
53+
.repository.wiki #clone-panel #repo-clone-url {
54+
width: 160px;
55+
}
56+
.repository.wiki .wiki-content-main.with-sidebar,
57+
.repository.wiki .wiki-content-sidebar {
58+
float: none;
59+
width: 100%;
60+
min-width: unset;
61+
max-width: unset;
62+
}
63+
}

‎web_src/js/features/repo-wiki.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import $ from 'jquery';
22
import {initMarkupContent} from '../markup/content.js';
33
import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
4+
import {fomanticMobileScreen} from '../modules/fomantic.js';
45

56
const {csrfToken} = window.config;
67

@@ -70,6 +71,17 @@ async function initRepoWikiFormEditor() {
7071
});
7172
}
7273

74+
function collapseWikiTocForMobile(collapse) {
75+
if (collapse) {
76+
document.querySelector('.wiki-content-toc details')?.removeAttribute('open');
77+
}
78+
}
79+
7380
export function initRepoWikiForm() {
81+
if (!document.querySelector('.page-content.repository.wiki')) return;
82+
83+
fomanticMobileScreen.addEventListener('change', (e) => collapseWikiTocForMobile(e.matches));
84+
collapseWikiTocForMobile(fomanticMobileScreen.matches);
85+
7486
initRepoWikiFormEditor();
7587
}

0 commit comments

Comments
 (0)