GitHub like repo home page (#32213)

Move some components (description, license, release, language stats) to sidebar

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

5 files changed, 108 insertions, 57 deletions

diff --git a/web_src/css/index.css b/web_src/css/index.css
index 174a4a9cbc..158ae42d3e 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -65,6 +65,7 @@
 @import "./repo/linebutton.css";
 @import "./repo/wiki.css";
 @import "./repo/header.css";
+@import "./repo/home.css";
 @import "./repo/reactions.css";
 
 @import "./editor/fileeditor.css";
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index b40859975c..3eebc0c477 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -422,14 +422,6 @@ td .commit-summary {
   border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
-.repository.file.list .sidebar {
-  padding-left: 0;
-}
-
-.repository.file.list .sidebar .svg {
-  width: 16px;
-}
-
 .repo-editor-header {
   width: 100%;
 }
@@ -1822,16 +1814,6 @@ td .commit-summary {
   background: var(--color-secondary);
 }
 
-.repository .repository-summary .segment.language-stats {
-  display: flex;
-  gap: 2px;
-  padding: 0;
-  height: 10px;
-  white-space: nowrap;
-  border-radius: 0 0 3px 3px !important;
-  overflow: hidden;
-}
-
 #cite-repo-modal #citation-panel {
   display: flex;
   width: 100%;
@@ -2172,11 +2154,7 @@ td .commit-summary {
   justify-content: flex-end;
 }
 
-.repo-button-row[data-is-homepage="false"] .repo-button-row-right {
-  flex-grow: 0;
-}
-
-@media (max-width: 991px) {
+@media (max-width: 1200px) {
   .repository:not(.wiki) .repo-button-row {
     flex-direction: column;
     align-items: stretch;
@@ -2302,6 +2280,7 @@ tbody.commit-list {
   font-weight: var(--font-weight-normal);
   cursor: pointer;
   margin: 0;
+  display: inline-block !important;
 }
 
 #new-dependency-drop-list.ui.selection.dropdown {
@@ -2820,9 +2799,9 @@ tbody.commit-list {
 /* FIXME: These media selectors are not ideal (just keep them from old code).
     There are many different pages, some need the max-width while some others don't,
     they should be tested and improved in the future. */
-@media (min-width: 768px) and (max-width: 991.98px) {
+@media (min-width: 768px) and (max-width: 1235px) {
   .branch-selector-dropdown .branch-dropdown-button {
-    max-width: 185px;
+    max-width: 301px;
   }
 }
 
diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css
new file mode 100644
index 0000000000..fd8fac27e2
--- /dev/null
+++ b/web_src/css/repo/home.css
@@ -0,0 +1,77 @@
+.repo-grid-filelist-sidebar {
+  display: grid;
+  grid-template-columns: auto 300px;
+  grid-template-rows: auto auto 1fr;
+}
+
+.repo-grid-filelist-sidebar .repo-home-filelist {
+  min-width: 0;
+  grid-column: 1;
+  grid-row: 1 / 4;
+}
+
+.repo-grid-filelist-sidebar .repo-home-sidebar-top {
+  grid-column: 2;
+  grid-row: 1;
+  padding-left: 1em;
+}
+.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
+  grid-column: 2;
+  grid-row: 2;
+  padding-left: 1em;
+}
+.repo-home-sidebar-bottom > :first-child {
+  border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
+}
+
+@media (max-width: 767.98px) {
+  .repo-grid-filelist-sidebar {
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto auto;
+  }
+  .repo-grid-filelist-sidebar .repo-home-filelist {
+    grid-column: 1;
+    grid-row: 2;
+  }
+  .repo-grid-filelist-sidebar .repo-home-sidebar-top {
+    grid-column: 1;
+    grid-row: 1;
+    padding-left: 0;
+  }
+  .repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
+    grid-column: 1;
+    grid-row: 3;
+    padding-left: 0;
+  }
+  .repo-home-sidebar-bottom > :first-child {
+    border-top: 0;
+  }
+}
+
+.language-stats {
+  display: flex;
+  gap: 2px;
+  padding: 0;
+  height: 10px;
+  white-space: nowrap;
+  border-radius: 5px;
+  overflow: hidden;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 5px;
+}
+
+.language-stats-details {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.language-stats-details .item {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+  padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
+  text-decoration: none;
+}
diff --git a/web_src/js/features/citation.ts b/web_src/js/features/citation.ts
index 8fc6beabfb..fc5bb38f0a 100644
--- a/web_src/js/features/citation.ts
+++ b/web_src/js/features/citation.ts
@@ -41,35 +41,28 @@ export async function initCitationFileCopyContent() {
     citationCopyApa.classList.toggle('primary', !isBibtex);
   };
 
-  document.querySelector('#cite-repo-button')?.addEventListener('click', async (e: MouseEvent & {target: HTMLAnchorElement}) => {
-    const dropdownBtn = e.target.closest('.ui.dropdown.button');
-    dropdownBtn.classList.add('is-loading');
-
+  document.querySelector('#cite-repo-button')?.addEventListener('click', async () => {
     try {
-      try {
-        await initInputCitationValue(citationCopyApa, citationCopyBibtex);
-      } catch (e) {
-        console.error(`initCitationFileCopyContent error: ${e}`, e);
-        return;
-      }
-      updateUi();
+      await initInputCitationValue(citationCopyApa, citationCopyBibtex);
+    } catch (e) {
+      console.error(`initCitationFileCopyContent error: ${e}`, e);
+      return;
+    }
+    updateUi();
 
-      citationCopyApa.addEventListener('click', () => {
-        localStorage.setItem('citation-copy-format', 'apa');
-        updateUi();
-      });
+    citationCopyApa.addEventListener('click', () => {
+      localStorage.setItem('citation-copy-format', 'apa');
+      updateUi();
+    });
 
-      citationCopyBibtex.addEventListener('click', () => {
-        localStorage.setItem('citation-copy-format', 'bibtex');
-        updateUi();
-      });
+    citationCopyBibtex.addEventListener('click', () => {
+      localStorage.setItem('citation-copy-format', 'bibtex');
+      updateUi();
+    });
 
-      inputContent.addEventListener('click', () => {
-        inputContent.select();
-      });
-    } finally {
-      dropdownBtn.classList.remove('is-loading');
-    }
+    inputContent.addEventListener('click', () => {
+      inputContent.select();
+    });
 
     fomanticQuery('#cite-repo-modal').modal('show');
   });
diff --git a/web_src/js/features/repo-home.ts b/web_src/js/features/repo-home.ts
index a65a1815d2..df52b87f5a 100644
--- a/web_src/js/features/repo-home.ts
+++ b/web_src/js/features/repo-home.ts
@@ -7,7 +7,7 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
 const {appSubUrl} = window.config;
 
 export function initRepoTopicBar() {
-  const mgrBtn = document.querySelector('#manage_topic');
+  const mgrBtn = document.querySelector<HTMLButtonElement>('#manage_topic');
   if (!mgrBtn) return;
 
   const editDiv = document.querySelector('#topic_edit');
@@ -18,7 +18,7 @@ export function initRepoTopicBar() {
   mgrBtn.addEventListener('click', () => {
     hideElem(viewDiv);
     showElem(editDiv);
-    topicDropdown.querySelector('input.search').focus();
+    topicDropdown.querySelector<HTMLInputElement>('input.search').focus();
   });
 
   document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
@@ -28,9 +28,9 @@ export function initRepoTopicBar() {
     mgrBtn.focus();
   });
 
-  document.querySelector('#save_topic').addEventListener('click', async (e) => {
+  document.querySelector('#save_topic').addEventListener('click', async (e: MouseEvent & {target: HTMLButtonElement}) => {
     lastErrorToast?.hideToast();
-    const topics = editDiv.querySelector('input[name=topics]').value;
+    const topics = editDiv.querySelector<HTMLInputElement>('input[name=topics]').value;
 
     const data = new FormData();
     data.append('topics', topics);
@@ -45,12 +45,13 @@ export function initRepoTopicBar() {
           const topicArray = topics.split(',');
           topicArray.sort();
           for (const topic of topicArray) {
-            // it should match the code in repo/home.tmpl
+            // TODO: sort items in topicDropdown, or items in edit div will have different order to the items in view div
+            // !!!! it SHOULD and MUST match the code in "home_sidebar_top.tmpl" !!!!
             const link = document.createElement('a');
-            link.classList.add('repo-topic', 'ui', 'large', 'label');
+            link.classList.add('repo-topic', 'ui', 'large', 'label', 'gt-ellipsis');
             link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`;
             link.textContent = topic;
-            mgrBtn.parentNode.insertBefore(link, mgrBtn); // insert all new topics before manage button
+            viewDiv.append(link);
           }
         }
         hideElem(editDiv);