Skip to content

Commit 51789ba

Browse files
GiteaBotwxiaoguang
GiteaBot
and
wxiaoguang
authored
Improve wiki sidebar and TOC (#25460) (#25477)
Backport #25460 by @wxiaoguang 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. ### for desktop ![image](https://github.com/go-gitea/gitea/assets/2114189/6c84201c-0648-465a-99e6-c53cdaee53c0) ### for mobile ![image](https://github.com/go-gitea/gitea/assets/2114189/9cb4fdfe-b6ab-4e6f-ae82-219ddb8fa27e) ### other changed pages <details> ![image](https://github.com/go-gitea/gitea/assets/2114189/ef077736-2c3e-4e3d-82fe-d9bf1ebcca98) ![image](https://github.com/go-gitea/gitea/assets/2114189/bb528429-ad5f-4258-a5c4-05f997c624ea) </details> Co-authored-by: wxiaoguang <[email protected]>
1 parent b0de3d0 commit 51789ba

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 .CanWriteUncyclo (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 .CanWriteUncyclo (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 .CanWriteUncyclo (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 .CanWriteUncyclo (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 .CanWriteUncyclo (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
@@ -86,6 +86,7 @@ Gitea's private styles use `g-` prefix.
8686

8787
.gt-float-left { float: left !important; }
8888
.gt-float-right { float: right !important; }
89+
.gt-clear-both { clear: both !important; }
8990

9091
.gt-font-light { font-weight: var(--font-weight-light) !important; }
9192
.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
@@ -44,6 +44,7 @@
4444
@import "./repo/issue-list.css";
4545
@import "./repo/list-header.css";
4646
@import "./repo/linebutton.css";
47+
@import "./repo/wiki.css";
4748

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

‎web_src/css/markup/content.css

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -517,20 +517,6 @@
517517
padding-left: 2em;
518518
}
519519

520-
.repository.wiki.revisions .ui.container > .ui.stackable.grid {
521-
-ms-flex-direction: row-reverse;
522-
flex-direction: row-reverse;
523-
}
524-
525-
.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header {
526-
margin-top: 0;
527-
}
528-
529-
.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header .sub.header {
530-
padding-left: 52px;
531-
word-break: break-word;
532-
}
533-
534520
.file-revisions-btn {
535521
display: block;
536522
float: left;

‎web_src/css/repo.css

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1891,50 +1891,9 @@
18911891
white-space: nowrap;
18921892
}
18931893

1894-
.repository.wiki.start .ui.segment {
1895-
padding-top: 70px;
1896-
padding-bottom: 100px;
1897-
}
1898-
1899-
.repository.wiki.start .ui.segment .svg {
1900-
height: 48px;
1901-
}
1902-
1903-
.repository.wiki.new .ui.attached.tabular.menu.previewtabs {
1904-
margin-bottom: 15px;
1905-
}
1906-
19071894
.file-view.markup {
19081895
padding: 1em 2em;
19091896
}
1910-
1911-
.wiki-content-main {
1912-
padding: 1em 2em !important;
1913-
margin-left: 1em !important;
1914-
}
1915-
1916-
.wiki-pages-list .wiki-git-entry {
1917-
margin-left: 10px;
1918-
display: none;
1919-
}
1920-
1921-
.wiki-pages-list td:hover .wiki-git-entry {
1922-
display: inline-block;
1923-
}
1924-
1925-
@media (max-width: 767.98px) {
1926-
.repository.wiki .dividing.header .stackable.grid .button {
1927-
margin-top: 2px;
1928-
margin-bottom: 2px;
1929-
}
1930-
}
1931-
1932-
@media (max-width: 767.98px) {
1933-
.repository.wiki #clone-panel #repo-clone-url {
1934-
width: 160px;
1935-
}
1936-
}
1937-
19381897
.repository .activity-header {
19391898
display: flex;
19401899
justify-content: space-between;
@@ -2992,22 +2951,6 @@ tbody.commit-list {
29922951
flex-direction: column;
29932952
}
29942953

2995-
.wiki-content-sidebar .ui.message.unicode-escape-prompt p,
2996-
.wiki-content-footer .ui.message.unicode-escape-prompt p {
2997-
display: none;
2998-
}
2999-
3000-
.wiki-content-toc ul {
3001-
margin: 0;
3002-
list-style: none;
3003-
padding: 5px 0 5px 1em;
3004-
}
3005-
3006-
.wiki-content-toc ul ul {
3007-
border-left: 1px var(--color-secondary);
3008-
border-left-style: dashed;
3009-
}
3010-
30112954
/* fomantic's last-child selector does not work with hidden last child */
30122955
.ui.buttons .unescape-button {
30132956
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 initRepoUncycloFormEditor() {
7071
});
7172
}
7273

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

‎web_src/js/modules/fomantic.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {initAriaCheckboxPatch} from './aria/checkbox.js';
33
import {initAriaDropdownPatch} from './aria/dropdown.js';
44
import {svg} from '../svg.js';
55

6+
export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
7+
68
export function initGiteaFomantic() {
79
// Silence fomantic's error logging when tabs are used without a target content element
810
$.fn.tab.settings.silent = true;

0 commit comments

Comments
 (0)