mirror of
https://github.com/hansjone/netx.git
synced 2026-10-09 03:10:46 +08:00
Fix compare board kind labels being clipped to one character.
Lay out miss/extra/mismatch filters and stats as wrapping chips instead of a cramped 88px grid column. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
d232044750
commit
157188bd3e
2 changed files with 80 additions and 48 deletions
|
|
@ -10155,16 +10155,17 @@ html.login-page--paused .login-page__flare {
|
||||||
.bs-cmp-nav__item {
|
.bs-cmp-nav__item {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 8px minmax(0, 1fr) auto;
|
grid-template-columns: 8px minmax(0, 1fr);
|
||||||
gap: 8px;
|
grid-template-rows: auto auto;
|
||||||
align-items: center;
|
gap: 4px 8px;
|
||||||
|
align-items: start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--bs-cmp-ink);
|
color: var(--bs-cmp-ink);
|
||||||
padding: 7px 8px;
|
padding: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
@ -10184,6 +10185,8 @@ html.login-page--paused .login-page__flare {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #64748b;
|
background: #64748b;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
|
align-self: center;
|
||||||
|
grid-row: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-nav__item.is-clean .bs-cmp-nav__dot {
|
.bs-cmp-nav__item.is-clean .bs-cmp-nav__dot {
|
||||||
|
|
@ -10201,17 +10204,38 @@ html.login-page--paused .login-page__flare {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: #e2e8f0;
|
color: #e2e8f0;
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-nav__meta {
|
.bs-cmp-nav__meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 2px;
|
gap: 4px;
|
||||||
font-size: 10px;
|
font-size: 11px;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
color: var(--bs-cmp-muted);
|
color: var(--bs-cmp-muted);
|
||||||
line-height: 1.25;
|
line-height: 1.3;
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-cmp-nav__counts {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-cmp-nav__counts > span {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 1px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(148, 163, 184, 0.12);
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-nav__meta em {
|
.bs-cmp-nav__meta em {
|
||||||
|
|
@ -10239,21 +10263,30 @@ html.login-page--paused .login-page__flare {
|
||||||
/* Run-level overview: never changes when switching sheets */
|
/* Run-level overview: never changes when switching sheets */
|
||||||
.bs-cmp-overview {
|
.bs-cmp-overview {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px 14px;
|
gap: 8px 12px;
|
||||||
min-height: 34px;
|
min-height: 34px;
|
||||||
padding: 6px 12px;
|
padding: 8px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid var(--bs-cmp-border);
|
border: 1px solid var(--bs-cmp-border);
|
||||||
background: rgba(15, 23, 42, 0.45);
|
background: rgba(15, 23, 42, 0.45);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
color: #cbd5e1;
|
color: #cbd5e1;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bs-cmp-overview__stat {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(148, 163, 184, 0.1);
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
.bs-cmp-overview.is-ok {
|
.bs-cmp-overview.is-ok {
|
||||||
border-color: rgba(34, 197, 94, 0.28);
|
border-color: rgba(34, 197, 94, 0.28);
|
||||||
}
|
}
|
||||||
|
|
@ -10299,12 +10332,12 @@ html.login-page--paused .login-page__flare {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sheet strip: fixed geometry so only digits/name swap */
|
/* Sheet strip: sheet + kind filters laid out flat (full labels) */
|
||||||
.bs-cmp-strip {
|
.bs-cmp-strip {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: minmax(140px, 1.2fr) 88px minmax(240px, 1.4fr) auto;
|
flex-wrap: wrap;
|
||||||
gap: 10px 14px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 10px 12px;
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -10326,6 +10359,7 @@ html.login-page--paused .login-page__flare {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
flex: 1 1 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-strip__sheet-tag {
|
.bs-cmp-strip__sheet-tag {
|
||||||
|
|
@ -10383,30 +10417,32 @@ html.login-page--paused .login-page__flare {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-strip__kinds {
|
.bs-cmp-strip__kinds {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
flex: 2 1 360px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-strip__kind {
|
.bs-cmp-strip__kind {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
flex: 0 0 auto;
|
||||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: rgba(15, 23, 42, 0.55);
|
background: rgba(15, 23, 42, 0.55);
|
||||||
color: #cbd5e1;
|
color: #cbd5e1;
|
||||||
padding: 4px 6px;
|
padding: 5px 10px;
|
||||||
font-size: 11px;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1.3;
|
line-height: 1.35;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-strip__kind b {
|
.bs-cmp-strip__kind b {
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
margin-left: 2px;
|
margin-left: 4px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 1.5ch;
|
min-width: 1.5ch;
|
||||||
}
|
}
|
||||||
|
|
@ -10441,7 +10477,8 @@ html.login-page--paused .login-page__flare {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
justify-self: end;
|
flex: 0 0 auto;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-top-fields {
|
.bs-cmp-top-fields {
|
||||||
|
|
@ -10545,30 +10582,17 @@ html.login-page--paused .login-page__flare {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
@media (max-width: 1100px) {
|
||||||
.bs-cmp-strip {
|
|
||||||
grid-template-columns: minmax(0, 1fr) auto;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-strip__pass {
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-strip__kinds {
|
.bs-cmp-strip__kinds {
|
||||||
grid-column: 1 / -1;
|
flex: 1 1 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-strip__range {
|
.bs-cmp-strip__range {
|
||||||
display: none;
|
margin-left: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-overview {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
row-gap: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-overview__time {
|
.bs-cmp-overview__time {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -10643,12 +10667,14 @@ html.login-page--paused .login-page__flare {
|
||||||
color: #bbf7d0;
|
color: #bbf7d0;
|
||||||
}
|
}
|
||||||
.bs-cmp-col-kind {
|
.bs-cmp-col-kind {
|
||||||
width: 7.5rem;
|
width: auto;
|
||||||
white-space: normal;
|
min-width: 4.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.bs-cmp-col-kind .bs-cmp-badge {
|
.bs-cmp-col-kind .bs-cmp-badge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 4px 4px 0;
|
margin: 0;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.bs-cmp-col-fail,
|
.bs-cmp-col-fail,
|
||||||
.bs-cmp-fail-cell {
|
.bs-cmp-fail-cell {
|
||||||
|
|
|
||||||
|
|
@ -2074,10 +2074,16 @@ export function BizComparePage() {
|
||||||
{dirty > 0 ? (
|
{dirty > 0 ? (
|
||||||
<>
|
<>
|
||||||
<em className="bs-cmp-nav__fail">{t("bizCompare.kindFail")}</em>
|
<em className="bs-cmp-nav__fail">{t("bizCompare.kindFail")}</em>
|
||||||
<span>
|
<span className="bs-cmp-nav__counts">
|
||||||
{t("bizCompare.missCount")} {Number(c.removed || 0)} ·{" "}
|
<span>
|
||||||
{t("bizCompare.extraCount")} {Number(c.added || 0)} ·{" "}
|
{t("bizCompare.missCount")} {Number(c.removed || 0)}
|
||||||
{t("bizCompare.mismatchCount")} {Number(c.changed || 0)}
|
</span>
|
||||||
|
<span>
|
||||||
|
{t("bizCompare.extraCount")} {Number(c.added || 0)}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{t("bizCompare.mismatchCount")} {Number(c.changed || 0)}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue