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"> | ||||
| 		{{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}} | ||||
| 	</a> | ||||
|  |  | |||
|  | @ -2,7 +2,7 @@ | |||
| <tr> | ||||
| 	<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="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"> | ||||
| 					<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}} | ||||
|  |  | |||
|  | @ -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"> | ||||
| 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect"> | ||||
| 			{{.locale.Tr "auth.openid_connect_title"}} | ||||
|  |  | |||
|  | @ -1915,7 +1915,7 @@ img.ui.avatar, | |||
| } | ||||
| 
 | ||||
| .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) { | ||||
|  | @ -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 { | ||||
|   padding-right: 30px !important; | ||||
|   margin-right: auto; | ||||
| } | ||||
| 
 | ||||
| .ui.menu.new-menu::-webkit-scrollbar { | ||||
|  |  | |||
|  | @ -1,5 +1,4 @@ | |||
| .explore .navbar { | ||||
|   justify-content: center; | ||||
|   margin-bottom: 15px !important; | ||||
|   background-color: var(--color-navbar) !important; | ||||
|   border-width: 1px !important; | ||||
|  |  | |||
|  | @ -32,10 +32,6 @@ | |||
|   color: var(--color-white) !important; | ||||
| } | ||||
| 
 | ||||
| .runner-container .runner-new-menu { | ||||
|   width: 300px; | ||||
| } | ||||
| 
 | ||||
| .runner-container .task-status-success { | ||||
|   background-color: var(--color-green); | ||||
|   color: var(--color-white); | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue