diff --git a/static/app.js b/static/app.js
index 53bab0a..86fac1d 100644
--- a/static/app.js
+++ b/static/app.js
@@ -60,7 +60,7 @@
}
function bindNavigation() {
- document.querySelectorAll(".bottom-nav button").forEach((button) => {
+ document.querySelectorAll(".nav-tabs button").forEach((button) => {
button.addEventListener("click", () => showView(button.dataset.view));
});
}
@@ -75,7 +75,7 @@
const nextIndex = viewOrder.indexOf(viewId);
const direction = nextIndex >= previousIndex ? "forward" : "backward";
- document.querySelectorAll(".bottom-nav button, .view").forEach((item) => item.classList.remove("active"));
+ document.querySelectorAll(".nav-tabs button, .view").forEach((item) => item.classList.remove("active"));
$(`#${viewId}`).classList.add("active");
document.querySelector(`.bottom-nav button[data-view="${viewId}"]`)?.classList.add("active");
state.currentView = viewId;
@@ -114,30 +114,24 @@
}
function setupNativeControls() {
- const isTelegramClient = Boolean(tg?.platform && tg.platform !== "unknown");
- if (!isTelegramClient || !tg?.MainButton) return;
- safeTelegram(() => tg.MainButton.onClick(() => {
+ $("#appActionButton").addEventListener("click", () => {
if (state.currentView === "addView") {
$("#transactionForm").requestSubmit();
} else {
openAddView();
}
- }));
- safeTelegram(() => tg.BackButton?.onClick(closeAddView));
+ });
+ if (tg) safeTelegram(() => tg.BackButton?.onClick(closeAddView));
updateNativeControls();
}
function updateNativeControls() {
- const isTelegramClient = Boolean(tg?.platform && tg.platform !== "unknown");
- if (!isTelegramClient || !tg?.MainButton) return;
const isForm = state.currentView === "addView";
- safeTelegram(() => tg.MainButton.setParams({
- text: isForm ? "Сохранить операцию" : "Добавить запись",
- color: "#f0d28a",
- text_color: "#17130b",
- is_active: true,
- is_visible: true,
- }));
+ const action = $("#appActionButton");
+ action.textContent = isForm ? "Сохранить" : "+";
+ action.setAttribute("aria-label", isForm ? "Сохранить операцию" : "Добавить запись");
+ if (!tg) return;
+ safeTelegram(() => tg.MainButton?.hide());
safeTelegram(() => isForm ? tg.BackButton?.show() : tg.BackButton?.hide());
}
@@ -220,13 +214,16 @@
return false;
}
if (!canSendViaTelegram()) return false;
+ const action = $("#appActionButton");
try {
- safeTelegram(() => tg.MainButton?.showProgress());
+ action.disabled = true;
+ action.textContent = "Сохраняем…";
tg.HapticFeedback?.notificationOccurred("success");
tg.sendData(encoded);
return true;
} catch (error) {
- safeTelegram(() => tg.MainButton?.hideProgress());
+ action.disabled = false;
+ updateNativeControls();
console.error("Telegram sendData failed", error);
showToast("Telegram не принял запись. Обновите приложение и попробуйте снова");
return false;
diff --git a/static/index.html b/static/index.html
index 6edebf1..8c74942 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,9 +6,9 @@
Пожитки
-
+
-
+
@@ -123,9 +123,12 @@
diff --git a/static/styles.css b/static/styles.css
index ba4357a..30dd101 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -95,8 +95,8 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
display: flex;
flex-direction: column;
justify-content: flex-end;
- min-height: 190px;
- padding: 27px;
+ min-height: 148px;
+ padding: 21px 23px;
border-radius: 29px;
border: 1px solid var(--line);
color: var(--text);
@@ -186,11 +186,15 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.leader-percent.negative { color: var(--danger); }
.friend-hint { margin: 13px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
-.bottom-nav { position: fixed; z-index: 10; right: max(12px, var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right)); bottom: max(12px, var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)); left: max(12px, var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: auto; max-width: 540px; margin: 0 auto; padding: 8px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
-.bottom-nav button { display: grid; place-items: center; gap: 2px; padding: 3px; border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; }
-.bottom-nav button > span { font-size: 22px; line-height: 30px; }
-.bottom-nav button.active { color: var(--accent); }
-.form-open .bottom-nav { display: none; }
+.bottom-nav { position: fixed; z-index: 10; right: max(12px, var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right)); bottom: max(12px, var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)); left: max(12px, var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left)); display: flex; align-items: stretch; gap: 10px; width: auto; max-width: 540px; height: 62px; margin: 0 auto; }
+.nav-tabs { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 4px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
+.nav-tabs button { display: grid; place-items: center; gap: 1px; min-width: 0; padding: 2px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; }
+.nav-tabs button > span { font-size: 20px; line-height: 26px; }
+.nav-tabs button.active { color: var(--accent); background: rgba(255, 255, 255, .07); }
+.app-action { display: grid; flex: 0 0 62px; place-items: center; width: 62px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 34px; font-weight: 500; line-height: 1; box-shadow: var(--shadow); transition: flex-basis .24s ease, width .24s ease, border-radius .24s ease; }
+.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; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(92px + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-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); }