More tweaks for alignment, scrolling and gradient

Author: CL-Jeremy

templates/repo/header.tmpl

@@ -12,16 +12,16 @@
 					{{else}}
 						{{template "repo/icon" .}}
 					{{end}}
-					<div class="df ac fw">
+					<div class="df fw">
 						<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
 						<div class="mx-2">/</div>
 					</div>
-					<div class="df ac fw">
+					<div class="di fw">
 						<a href="{{$.RepoLink}}">{{.Name}}</a>
-						{{if $.PageIsSettings}}
-							<div class="mx-2">/</div><span>{{$.i18n.Tr "repo.settings"}}</span>
-						{{else}}
-							<div class="labels df ac fw">
+						{{- if $.PageIsSettings -}}
+							<div class="di mx-2">/</div><span class="mr-2">{{$.i18n.Tr "repo.settings"}}</span>
+						{{- else -}}
+							<div class="labels dif ac fw vm">
 								{{if .IsTemplate}}
 									{{if .IsPrivate}}
 										<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>
@@ -115,7 +115,7 @@
 
 				{{if .Permission.CanRead $.UnitTypeExternalTracker}}
 					<a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoExternalIssuesLink}}" target="_blank" rel="noopener noreferrer">
-						{{svg "octicon-link-external"}} {{.i18n.Tr "repo.issues"}} </span>
+						{{svg "octicon-link-external"}} {{.i18n.Tr "repo.issues"}}
 					</a>
 				{{end}}
 
@@ -159,6 +159,8 @@
 				{{end}}
 
 				{{template "custom/extra_tabs" .}}
+
+				<div class="spacer"></div>
 			</div>
 		{{end}}
 	</div>

web_src/less/_base.less

@@ -1260,20 +1260,8 @@ footer {
   }
 }
 
-.ui.menu.new-menu::after {
-  position: absolute;
-  display: block;
-  background: linear-gradient(to right, transparent, var(--color-navbar) 100%);
-  content: '';
-  right: 0;
-  height: 39px;
-  width: 60px;
-  visibility: visible;
-  pointer-events: none;
-}
-
 .ui.menu.new-menu.shadow-body::after {
-  background: linear-gradient(to right, transparent, var(--color-body) 100%);
+  background: linear-gradient(to right, #ffffff00, var(--color-body) 100%);
 }
 
 .ui.menu.new-menu .item {
@@ -1290,21 +1278,73 @@ footer {
   padding-right: 30px !important;
 }
 
-.ui.menu.new-menu::-webkit-scrollbar {
-  height: 6px;
-  display: none;
-}
+.ui.tabs.container .ui.menu {
+  margin: auto -1em;
+  padding-left: 1em;
+  overflow-x: scroll;
+  overflow-y: hidden;
 
-.ui.menu.new-menu::-webkit-scrollbar-track {
-  background: none !important;
-}
+  .spacer:last-child {
+    min-width: 1em;
+  }
 
-.ui.menu.new-menu::-webkit-scrollbar-thumb {
-  box-shadow: none !important;
+  &::before,
+  &::after {
+    height: 40px !important;
+    margin-top: 1px;
+    border-bottom: 1px solid #d8d8d8;
+  }
+
+  &::before {
+    left: auto !important;
+    margin-left: -1em;
+  }
+
+  &::after {
+    position: sticky !important;
+  }
 }
 
-.ui.menu.new-menu:hover::-webkit-scrollbar {
-  display: block;
+.ui.tabs.container .ui.menu,
+.ui.menu.new-menu {
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    display: block;
+    min-width: 1em;
+    height: 38px;
+    visibility: visible;
+    pointer-events: none;
+  }
+
+  &::before {
+    background: linear-gradient(to left, #ffffff33, var(--color-navbar) 62.5%);
+    left: 0;
+    z-index: 1;
+  }
+
+  &::after {
+    background: linear-gradient(to right, #ffffff33, var(--color-navbar) 62.5%);
+    right: 0;
+  }
+
+  &::-webkit-scrollbar {
+    height: 6px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none !important;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    box-shadow: none !important;
+  }
+
+  &:hover::-webkit-scrollbar {
+    display: block;
+  }
 }
 
 [v-cloak] {
@@ -1326,7 +1366,7 @@ footer {
   display: flex;
   align-items: center;
   flex: 1;
-  word-break: break-all;
+  word-break: break-word;
   color: var(--color-text-light);
 
   .avatar {
@@ -1335,6 +1375,7 @@ footer {
   }
 
   .labels {
+    margin-top: -.25rem;
     margin-left: .5rem;
 
     > * + * {

web_src/less/_repository.less

@@ -31,8 +31,6 @@
   .tabs {
     .navbar {
       justify-content: initial;
-      overflow-x: scroll;
-      overflow-y: hidden;
     }
   }
 
@@ -44,10 +42,10 @@
       margin-left: 7px;
       padding: 3px 5px;
     }
+  }
 
-    .active.item {
-      margin-bottom: 0 !important;
-    }
+  .menu.new-menu.navbar {
+    margin-top: -8px !important;
   }
 
   .owner.dropdown {
@@ -2849,14 +2847,18 @@ tbody.commit-list {
   align-items: center;
   justify-content: space-between;
   word-break: break-word;
-  line-height: 32px;
+  line-height: 40px;
   margin: -7px 0;
 
   > * {
     margin: 7px 0;
   }
 }
 
+.repo-icon .svg {
+  margin-top: -4px;
+}
+
 .repo-buttons {
   display: flex;
   align-items: center;