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 <wxiaoguang@gmail.com>

1 files changed, 12 insertions, 0 deletions

diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js
index c37da45994..58036fde37 100644
--- a/web_src/js/features/repo-wiki.js
+++ b/web_src/js/features/repo-wiki.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import {initMarkupContent} from '../markup/content.js';
 import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {fomanticMobileScreen} from '../modules/fomantic.js';
 
 const {csrfToken} = window.config;
 
@@ -70,6 +71,17 @@ async function initRepoWikiFormEditor() {
   });
 }
 
+function collapseWikiTocForMobile(collapse) {
+  if (collapse) {
+    document.querySelector('.wiki-content-toc details')?.removeAttribute('open');
+  }
+}
+
 export function initRepoWikiForm() {
+  if (!document.querySelector('.page-content.repository.wiki')) return;
+
+  fomanticMobileScreen.addEventListener('change', (e) => collapseWikiTocForMobile(e.matches));
+  collapseWikiTocForMobile(fomanticMobileScreen.matches);
+
   initRepoWikiFormEditor();
 }