Improve "language stats" UI (#26968)

Before:

* The layout is quite complex 
* The UI flickers when switch the stats (https://try.gitea.io/)

After:

* Simplify the code
* The UI doesn't flicker

3 files changed, 6 insertions, 18 deletions

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 03169e6815..b30e21d0c0 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -388,9 +388,9 @@ export function initGlobalButtons() {
     e.preventDefault();
   });
 
-  $('.show-panel.button').on('click', function (e) {
-    // a '.show-panel.button' can show a panel, by `data-panel="selector"`
-    // if the button is a "toggle" button, it toggles the panel
+  $('.show-panel').on('click', function (e) {
+    // a '.show-panel' element can show a panel, by `data-panel="selector"`
+    // if it has "toggle" class, it toggles the panel
     e.preventDefault();
     const sel = $(this).attr('data-panel');
     if (this.classList.contains('toggle')) {
@@ -400,8 +400,8 @@ export function initGlobalButtons() {
     }
   });
 
-  $('.hide-panel.button').on('click', function (e) {
-    // a `.hide-panel.button` can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
+  $('.hide-panel').on('click', function (e) {
+    // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
     e.preventDefault();
     let sel = $(this).attr('data-panel');
     if (sel) {
diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js
index 755f2a0653..3573e4d50b 100644
--- a/web_src/js/features/repo-common.js
+++ b/web_src/js/features/repo-common.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import {hideElem, showElem, toggleElem} from '../utils/dom.js';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {csrfToken} = window.config;
 
@@ -91,13 +91,3 @@ export function initRepoCommonFilterSearchDropdown(selector) {
     message: {noResults: $dropdown.attr('data-no-results')},
   });
 }
-
-export function initRepoCommonLanguageStats() {
-  // Language stats
-  if ($('.language-stats').length > 0) {
-    $('.language-stats').on('click', (e) => {
-      e.preventDefault();
-      toggleElem($('.language-stats-details, .repository-menu'));
-    });
-  }
-}
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 51edf0bd12..0aacc6ee85 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -11,7 +11,6 @@ import {htmlEscape} from 'escape-goat';
 import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue';
 import {
   initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown,
-  initRepoCommonLanguageStats,
 } from './repo-common.js';
 import {initCitationFileCopyContent} from './citation.js';
 import {initCompLabelEdit} from './comp/LabelEdit.js';
@@ -525,7 +524,6 @@ export function initRepository() {
 
   initRepoCloneLink();
   initCitationFileCopyContent();
-  initRepoCommonLanguageStats();
   initRepoSettingBranches();
 
   // Issues