[UI] Mobile sticky action bar on shift/job details (native-app feel)
CI/CD / CI · dotnet build (push) Successful in 46s
CI/CD / Deploy · hamkadr (push) Successful in 1m6s

On mobile the action panel (CTA + map) stacked at the very bottom, so users had to scroll the whole page to act. Add a fixed bottom action bar (<=860px) with the primary «اعلام تمایل» button + a quick save, always reachable like a native app; when contact is revealed it becomes a «تماس با مرکز» tel: button. The in-aside primary CTA is hidden on mobile (.aside-apply) to avoid duplication, and pages get bottom padding (.has-action-bar) so the bar never covers content. Desktop layout unchanged (bar hidden, sidebar CTA shown).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-04 19:12:34 +03:30
parent 86809190e7
commit 2170ba250c
3 changed files with 82 additions and 11 deletions
+19
View File
@@ -256,6 +256,25 @@ label { font-size: 13px; }
.tour-count { font-size: 12px; color: var(--muted); }
.tour-btns { display: flex; gap: 6px; }
/* ---------- Mobile sticky action bar (detail pages feel like a native app) ---------- */
.mobile-action-bar { display: none; }
@media (max-width: 860px) {
.mobile-action-bar {
display: flex; gap: 8px; align-items: stretch;
position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--surface); border-top: 1px solid var(--line);
box-shadow: 0 -8px 24px rgba(0,0,0,.10);
}
.mobile-action-bar form { margin: 0; }
.mobile-action-bar .cta-main { flex: 1; }
.mobile-action-bar .btn { margin: 0; }
/* breathing room so the fixed bar never covers page content */
.has-action-bar { padding-bottom: 92px; }
/* the in-aside primary CTA is redundant on mobile — the sticky bar replaces it */
.aside-apply { display: none; }
}
/* ---------- Admin settings: sidebar tabs ---------- */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.settings-tabs {