Improve "new-menu" (#24465)
I am not sure what "new-menu" means, but I think we need to fix these problems: 1. it shouldn't have "stackable", which makes the items stacked when width is small. the `new-menu` already has `overflow: auto` 2. `justify-content: center` doesn't work with `overflow: auto` (for small width), so use `margin: auto` * https://bhch.github.io/posts/2021/04/centring-flex-items-and-allowing-overflow-scroll/ 3. `runner-new-menu` is dead code (copying & pasting ?)
This commit is contained in:
		
							parent
							
								
									5adf32b48e
								
							
						
					
					
						commit
						3e7101dd64
					
				|  | @ -1,4 +1,4 @@ | ||||||
| <div class="ui secondary pointing tabular top attached borderless stackable menu new-menu navbar"> | <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> | ||||||
| 	<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> | 	<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> | ||||||
| 		{{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} | 		{{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} | ||||||
| 	</a> | 	</a> | ||||||
|  |  | ||||||
|  | @ -2,7 +2,7 @@ | ||||||
| <tr> | <tr> | ||||||
| 	<td colspan="2"> | 	<td colspan="2"> | ||||||
| 		<div class="image-diff" data-path-before="{{.root.BeforeRawPath}}/{{PathEscapeSegments .file.OldName}}" data-path-after="{{.root.RawPath}}/{{PathEscapeSegments .file.Name}}"> | 		<div class="image-diff" data-path-before="{{.root.BeforeRawPath}}/{{PathEscapeSegments .file.OldName}}" data-path-after="{{.root.RawPath}}/{{PathEscapeSegments .file.Name}}"> | ||||||
| 			<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu"> | 			<div class="ui secondary pointing tabular top attached borderless menu new-menu"> | ||||||
| 				<div class="new-menu-inner"> | 				<div class="new-menu-inner"> | ||||||
| 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{.root.locale.Tr "repo.diff.image.side_by_side"}}</a> | 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{.root.locale.Tr "repo.diff.image.side_by_side"}}</a> | ||||||
| 					{{if and .blobBase .blobHead}} | 					{{if and .blobBase .blobHead}} | ||||||
|  |  | ||||||
|  | @ -1,4 +1,4 @@ | ||||||
| <div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar"> | <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> | ||||||
| 	<div class="new-menu-inner"> | 	<div class="new-menu-inner"> | ||||||
| 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect"> | 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect"> | ||||||
| 			{{.locale.Tr "auth.openid_connect_title"}} | 			{{.locale.Tr "auth.openid_connect_title"}} | ||||||
|  |  | ||||||
|  | @ -1915,7 +1915,7 @@ img.ui.avatar, | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .ui.menu.new-menu .item { | .ui.menu.new-menu .item { | ||||||
|   margin: 0 !important; |   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */ | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @media (max-width: 767px) { | @media (max-width: 767px) { | ||||||
|  | @ -1924,8 +1924,13 @@ img.ui.avatar, | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | .ui.menu.new-menu .item:first-child { | ||||||
|  |   margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */ | ||||||
|  | } | ||||||
|  | 
 | ||||||
| .ui.menu.new-menu .item:last-child { | .ui.menu.new-menu .item:last-child { | ||||||
|   padding-right: 30px !important; |   padding-right: 30px !important; | ||||||
|  |   margin-right: auto; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .ui.menu.new-menu::-webkit-scrollbar { | .ui.menu.new-menu::-webkit-scrollbar { | ||||||
|  |  | ||||||
|  | @ -1,5 +1,4 @@ | ||||||
| .explore .navbar { | .explore .navbar { | ||||||
|   justify-content: center; |  | ||||||
|   margin-bottom: 15px !important; |   margin-bottom: 15px !important; | ||||||
|   background-color: var(--color-navbar) !important; |   background-color: var(--color-navbar) !important; | ||||||
|   border-width: 1px !important; |   border-width: 1px !important; | ||||||
|  |  | ||||||
|  | @ -32,10 +32,6 @@ | ||||||
|   color: var(--color-white) !important; |   color: var(--color-white) !important; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .runner-container .runner-new-menu { |  | ||||||
|   width: 300px; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| .runner-container .task-status-success { | .runner-container .task-status-success { | ||||||
|   background-color: var(--color-green); |   background-color: var(--color-green); | ||||||
|   color: var(--color-white); |   color: var(--color-white); | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue