move language bar to sidebar

Author: yp05327

templates/repo/home.tmpl

@@ -156,6 +156,39 @@
 						</div>
 					</div>
 					{{end}}
+
+					{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
+					<div class="flex-item">
+						<div class="flex-item-main">
+							<div class="flex-item-title">
+								{{ctx.Locale.Tr "repo.repo_lang"}}
+							</div>
+
+							<div class="flex-item-body">
+								<div class="language-stats">
+									{{range .LanguageStats}}
+									<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
+									{{end}}
+								</div>
+								<div class="language-stats-details">
+									{{range .LanguageStats}}
+									<div class="item">
+										<i class="color-icon" style="background-color: {{.Color}}"></i>
+										<span class="gt-font-semibold gt-dib">
+											{{if eq .Language "other"}}
+												{{ctx.Locale.Tr "repo.language_other"}}
+											{{else}}
+												{{.Language}}
+											{{end}}
+										</span>
+										{{.Percentage}}%
+									</div>
+									{{end}}
+								</div>
+							</div>
+						</div>
+					</div>
+					{{end}}
 				</div>
 			</div>
 		</div>

templates/repo/sub_menu.tmpl

@@ -20,27 +20,5 @@
 			</span>
 		{{end}}
 	</div>
-	{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
-	<div class="ui segment sub-menu language-stats-details gt-hidden">
-		{{range .LanguageStats}}
-		<div class="item">
-			<i class="color-icon" style="background-color: {{.Color}}"></i>
-			<span class="gt-font-semibold">
-				{{if eq .Language "other"}}
-					{{ctx.Locale.Tr "repo.language_other"}}
-				{{else}}
-					{{.Language}}
-				{{end}}
-			</span>
-			{{.Percentage}}%
-		</div>
-		{{end}}
-	</div>
-	<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
-		{{range .LanguageStats}}
-		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
-		{{end}}
-	</a>
-	{{end}}
 </div>
 {{end}}

web_src/css/repo.css

@@ -272,7 +272,8 @@
   justify-content: space-between;
   align-items: center;
   gap: 5px;
-  margin-bottom: 5px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 @media (max-width: 767.98px) {
@@ -2111,14 +2112,33 @@
   background: var(--color-secondary);
 }
 
-.repository .repository-summary .segment.language-stats {
+.language-stats {
   display: flex;
   gap: 2px;
   padding: 0;
   height: 10px;
   white-space: nowrap;
   border-radius: 0 0 3px 3px !important;
   overflow: hidden;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 5px;
+}
+
+.language-stats-details {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.language-stats-details .item {
+  height: 30px;
+  line-height: var(--line-height-default);
+  display: inline-block;
+  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;
 }
 
 #cite-repo-modal #citation-panel {