From 3e27ee726341faf09d364d5dd41e6d3034b8cedd Mon Sep 17 00:00:00 2001 From: Codex Date: Mon, 7 Sep 2026 21:10:53 +0000 Subject: [PATCH] Compact balance card and float leaderboard switch --- static/app.js | 1 + static/index.html | 4 ++-- static/styles.css | 13 ++++++++----- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/static/app.js b/static/app.js index ef0acef..11433f3 100644 --- a/static/app.js +++ b/static/app.js @@ -99,6 +99,7 @@ document.querySelector(`.bottom-nav button[data-view="${viewId}"]`)?.classList.add("active"); state.currentView = viewId; document.body.classList.toggle("form-open", viewId === "addView"); + document.body.classList.toggle("leaderboard-open", viewId === "leaderboardView"); updateNativeControls(); window.scrollTo({ top: 0, behavior: "auto" }); animateViewStage(direction); diff --git a/static/index.html b/static/index.html index d3b105b..01a504e 100644 --- a/static/index.html +++ b/static/index.html @@ -6,9 +6,9 @@ Пожитки - + - +
diff --git a/static/styles.css b/static/styles.css index 616bde8..6e59e93 100644 --- a/static/styles.css +++ b/static/styles.css @@ -91,7 +91,7 @@ button:active { filter: brightness(.88); } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 30px; line-height: 1; letter-spacing: -.04em; } h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; } -.user-chip { position: fixed; z-index: 9; top: calc(var(--app-device-safe-top) + 10px); left: 50%; display: flex; align-items: center; gap: 8px; max-width: min(42vw, 190px); padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 999px; transform: translateX(-50%); background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } +.user-chip { position: fixed; z-index: 9; top: calc(var(--app-device-safe-top) + 10px); left: 50%; display: flex; align-items: center; gap: 8px; max-width: min(42vw, 190px); padding: 5px 11px 5px 5px; border: 0; border-radius: 999px; transform: translateX(-50%); background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } .mini-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(0, 0, 0, .28); color: var(--text); } .view-stage { display: flex; flex: 1; flex-direction: column; width: 100%; min-width: 0; } @@ -105,9 +105,9 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; } .hero-card { display: flex; flex-direction: column; - justify-content: flex-end; - min-height: 148px; - padding: 21px 23px; + justify-content: flex-start; + min-height: 122px; + padding: 15px 20px; border-radius: 29px; border: 1px solid var(--line); color: var(--text); @@ -179,7 +179,9 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; } .board-heading { align-items: center; margin-top: 5px; margin-bottom: 20px; } .icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--link); font-size: 21px; } -.board-switch { margin-bottom: 13px; } +.board-switch { position: fixed; z-index: 9; bottom: calc(max(12px, calc(var(--app-safe-bottom) + 8px)) + 64px); left: 50%; width: fit-content; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 999px; transform: translateX(-50%); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } +.board-switch button { min-width: 84px; padding: 8px 14px; border-radius: 999px; } +.board-switch button.active { color: var(--accent); background: transparent; box-shadow: none; } .leader-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 3px 13px; color: var(--muted); font-size: 11px; font-weight: 700; } .leader-filter select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--surface); } .leaderboard-list { overflow: hidden; min-height: 100px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); } @@ -206,6 +208,7 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; } .app-action:disabled { opacity: .72; cursor: default; } .form-open .nav-tabs { display: none; } .form-open .app-action { flex-basis: 100%; width: 100%; border-radius: 999px; font-size: 16px; font-weight: 800; } +.leaderboard-open { padding-bottom: calc(174px + var(--app-safe-bottom)); } .toast { position: fixed; z-index: 20; left: 50%; bottom: calc(100px + var(--app-safe-bottom)); max-width: calc(100% - 36px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; transform: translate(-50%, 20px); background: rgba(0, 0, 0, .62); color: var(--text); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } .toast.show { opacity: 1; transform: translate(-50%, 0); }