Merge branch 'main' into lunny/issue_dev

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";

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%;
@@ -2079,17 +2061,6 @@ td .commit-summary {
   padding: 1em;
 }
 
-.edit-label.modal .form .column,
-.new-label.modal .form .column {
-  padding-right: 0;
-}
-
-.edit-label.modal .form .buttons,
-.new-label.modal .form .buttons {
-  margin-left: auto;
-  padding-top: 15px;
-}
-
 .stats-table {
   display: table;
   width: 100%;
@@ -2172,11 +2143,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 +2269,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 +2788,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;
   }
 }
 

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;
+}