修复资产卡片底部对齐

This commit is contained in:
kate522 committed 2026-09-15 22:24:49 +08:00
1 parent 7efbbeed3f
commit 27f54c8e35
2 files changed
+17 -7

No files matched your search

+11 -6
View File
@@ -2,7 +2,6 @@
* User Center — assets (wallet + points) legacy parity * User Center — assets (wallet + points) legacy parity
*/ */
/* The asset cards and the records card are sibling surfaces, not one nested card. */ /* The asset cards and the records card are sibling surfaces, not one nested card. */
.uc-content #panel-credits.dashboard-panel { .uc-content #panel-credits.dashboard-panel {
margin: 0; margin: 0;
@@ -18,14 +17,15 @@
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 12px; gap: 12px;
margin-bottom: 16px; margin-bottom: 10px;
background: transparent; background: transparent;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
} }
.uc-assets-row--dual { .uc-assets-row--dual {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto; grid-template-rows: auto;
gap: 10px;
} }
.uc-assets-row--dual > .uc-assets-col { .uc-assets-row--dual > .uc-assets-col {
display: contents; display: contents;
@@ -69,6 +69,8 @@
/* One surface per asset (wallet / points) — never nest inside another card shell */ /* One surface per asset (wallet / points) — never nest inside another card shell */
.uc-asset-card { .uc-asset-card {
display: flex;
flex-direction: column;
background: var(--main-bg-color, var(--surface-1, #fff)); background: var(--main-bg-color, var(--surface-1, #fff));
border-radius: var(--main-radius, 8px); border-radius: var(--main-radius, 8px);
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
@@ -106,10 +108,13 @@
.uc-asset-card__link { .uc-asset-card__link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-top: 8px; margin-top: auto;
padding-top: 8px;
background: none; background: none;
border: 0; border: 0;
padding: 0; padding-right: 0;
padding-bottom: 0;
padding-left: 0;
cursor: pointer; cursor: pointer;
} }
.uc-asset-card__link:hover { .uc-asset-card__link:hover {
@@ -872,7 +877,7 @@ body.uc-modal-open {
/* Withdraw history + pending foot */ /* Withdraw history + pending foot */
.uc-asset-card__foot { .uc-asset-card__foot {
margin-top: 8px; margin-top: auto;
padding-top: 8px; padding-top: 8px;
border-top: 1px dashed var(--muted-border-color, rgba(0,0,0,.08)); border-top: 1px dashed var(--muted-border-color, rgba(0,0,0,.08));
} }
@@ -13,12 +13,17 @@ test('dual asset cards use an independent equal-height grid row', () => {
const css = read('assets/css/routes/user-center/credits.css') const css = read('assets/css/routes/user-center/credits.css')
const profile = read('inc/helpers/user-center-renderers/profile-credits.php') const profile = read('inc/helpers/user-center-renderers/profile-credits.php')
assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\);[\s\S]*?grid-template-rows:\s*auto auto;/) assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\);[\s\S]*?grid-template-rows:\s*auto;/)
assert.match(css, /\.uc-assets-row\s*\{[\s\S]*?margin-bottom:\s*10px;/)
assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?gap:\s*10px;/)
assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*\{[\s\S]*?display:\s*contents;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*\{[\s\S]*?display:\s*contents;/)
assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:first-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*1;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:first-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*1;/)
assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:last-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*2;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:last-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*2;/)
assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-asset-card\s*\{[\s\S]*?grid-row:\s*1;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-asset-card\s*\{[\s\S]*?grid-row:\s*1;/)
assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-card-pass\s*\{[\s\S]*?grid-row:\s*2;/) assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-card-pass\s*\{[\s\S]*?grid-row:\s*2;/)
assert.match(css, /\.uc-asset-card\s*\{[\s\S]*?display:\s*flex;[\s\S]*?flex-direction:\s*column;/)
assert.match(css, /\.uc-asset-card__link\s*\{[\s\S]*?margin-top:\s*auto;/)
assert.match(css, /\.uc-asset-card__foot\s*\{[\s\S]*?margin-top:\s*auto;/)
assert.match(profile, /<div class="uc-assets-col">[\s\S]*?credits-wallet\.php[\s\S]*?<\/div>/) assert.match(profile, /<div class="uc-assets-col">[\s\S]*?credits-wallet\.php[\s\S]*?<\/div>/)
assert.match(profile, /<div class="uc-assets-col">[\s\S]*?credits-balance\.php[\s\S]*?<\/div>/) assert.match(profile, /<div class="uc-assets-col">[\s\S]*?credits-balance\.php[\s\S]*?<\/div>/)
}) })