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
6 changed files with 9 additions and 9 deletions
|
@ -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 a new issue