Mahdi/CRM_Montzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lift mobile docks and FABs above the bottom tab bar.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mahdi
2026-09-17 17:36:21 +03:30
co-authored by Cursor
parent dfd35c45ef
commit 3b643d7bb9
16 changed files with 55 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/QuickCreate.vue
+12 -2
View File
@@ -78,8 +78,18 @@ let dragMoved = false;
let dragOffsetX = 0;
let dragOffsetY = 0;
function mobileTabbarPx(): number {
if (typeof window === 'undefined' || viewport.value.w > 900) return 0;
const bar = document.querySelector('.mobile-tabbar');
if (bar instanceof HTMLElement) {
const h = bar.getBoundingClientRect().height;
if (h > 0) return h;
}
return 64;
}
function defaultPos(): FabPos {
const extra = viewport.value.w <= 900 ? 64 : 0;
const extra = mobileTabbarPx();
return {
left: FAB_MARGIN_LEFT,
top: Math.max(8, viewport.value.h - FAB_MARGIN_BOTTOM - extra - FAB_SIZE),
@@ -88,7 +98,7 @@ function defaultPos(): FabPos {
function clampPos(pos: FabPos): FabPos {
const margin = 8;
const bottomGap = viewport.value.w <= 900 ? 64 : 0;
const bottomGap = mobileTabbarPx();
return {
left: Math.min(Math.max(margin, pos.left), viewport.value.w - FAB_SIZE - margin),
top: Math.min(
apps/web/src/styles/main.css
+6
View File
@@ -2,6 +2,8 @@
@import "./tokens.css";
:root {
--mobile-tabbar-h: 0px;
/* Surface & Background */
--bg: #f8fafc;
--surface: #ffffff;
@@ -251,6 +253,10 @@ textarea {
}
@media (max-width: 900px) {
:root {
--mobile-tabbar-h: calc(3.65rem + env(safe-area-inset-bottom, 0px));
}
h1 {
font-size: clamp(1.35rem, 5vw, 1.75rem);
}
apps/web/src/views/ActivityDetailView.vue
+6 -1
View File
@@ -319,6 +319,7 @@ onMounted(load);
margin: 0;
display: grid;
gap: 0.9rem;
padding-bottom: 5.5rem;
}
.nav {
@@ -572,7 +573,7 @@ dd {
.dock {
position: fixed;
inset-inline: 0.85rem;
bottom: calc(0.55rem + env(safe-area-inset-bottom));
bottom: calc(0.55rem + var(--mobile-tabbar-h));
display: grid;
grid-template-columns: 1.15fr 1fr 1fr;
gap: 0.5rem;
@@ -607,6 +608,10 @@ dd {
}
@media (min-width: 900px) {
.page {
padding-bottom: 0;
}
.dock {
position: sticky;
inset-inline: auto;
apps/web/src/views/ActivityFormView.vue
+6 -1
View File
@@ -661,6 +661,10 @@ watch([id, isNew], () => void load(), { immediate: true });
</template>
<style scoped>
.crm-page:not(.embedded) {
padding-bottom: 5rem;
}
.crm-page.embedded {
padding-bottom: 0;
}
@@ -1142,7 +1146,7 @@ watch([id, isNew], () => void load(), { immediate: true });
.mobile-save {
position: fixed;
inset-inline: 0.85rem;
bottom: calc(0.55rem + env(safe-area-inset-bottom));
bottom: calc(0.55rem + var(--mobile-tabbar-h));
z-index: 8;
}
@@ -1154,6 +1158,7 @@ watch([id, isNew], () => void load(), { immediate: true });
}
@media (min-width: 960px) {
.crm-page:not(.embedded),
.page {
padding-bottom: 1rem;
gap: 1rem;
apps/web/src/views/DealFormView.vue
+2 -1
View File
@@ -791,6 +791,7 @@ onMounted(load);
width: 100%;
max-width: 100%;
min-width: 0;
padding-bottom: 5rem;
}
.page.embedded {
@@ -1391,7 +1392,7 @@ h1 {
.mobile-save {
position: fixed;
inset-inline: 0.85rem;
bottom: calc(0.55rem + env(safe-area-inset-bottom));
bottom: calc(0.55rem + var(--mobile-tabbar-h));
z-index: 8;
display: grid;
grid-template-columns: 1fr 1.2fr;
apps/web/src/views/InvoiceFormView.vue
+1 -1
View File
@@ -2362,7 +2362,7 @@ h1 {
align-items: center;
gap: 0.65rem;
position: sticky;
bottom: 0.5rem;
bottom: calc(0.5rem + var(--mobile-tabbar-h));
padding: 0.35rem 0;
background: linear-gradient(to top, #f8fafc 70%, transparent);
}
apps/web/src/views/InvoicesView.vue
+1 -1
View File
@@ -857,7 +857,7 @@ tbody tr:nth-child(even) { background: #fcfdff; }
.page-btn.on { background: var(--teal); color: #fff; border-color: transparent; }
.fab {
display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40;
display: none; position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + var(--mobile-tabbar-h)); z-index: 40;
background: var(--teal); color: #fff; text-align: center; text-decoration: none;
border-radius: var(--radius); padding: 0.9rem; font-weight: 600;
box-shadow: 0 12px 28px rgba(13,148,136,.35);
apps/web/src/views/MessageAutomationsView.vue
+1 -1
View File
@@ -2482,7 +2482,7 @@ textarea {
.m-wiz-foot {
position: sticky;
bottom: 0;
bottom: var(--mobile-tabbar-h);
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 0.65rem;
apps/web/src/views/NotesView.vue
+5 -1
View File
@@ -1710,7 +1710,7 @@ onBeforeUnmount(() => {
.fab {
position: fixed;
inset-inline-end: 1.1rem;
bottom: 1.25rem;
bottom: calc(1.25rem + var(--mobile-tabbar-h));
z-index: 40;
width: 54px;
height: 54px;
@@ -2147,6 +2147,10 @@ onBeforeUnmount(() => {
}
@media (max-width: 860px) {
.notes-page {
padding-bottom: 5rem;
}
.desktop-only {
display: none !important;
}
apps/web/src/views/PersonProfileView.vue
+7 -1
View File
@@ -1658,7 +1658,7 @@ watch(() => route.query.tab, readTab, { immediate: true });
.dock {
position: fixed;
inset-inline: 1.1rem;
bottom: calc(0.7rem + env(safe-area-inset-bottom));
bottom: calc(0.7rem + var(--mobile-tabbar-h));
z-index: 12;
display: flex;
justify-content: space-between;
@@ -1709,6 +1709,12 @@ watch(() => route.query.tab, readTab, { immediate: true });
cursor: not-allowed;
}
@media (max-width: 959px) {
.page {
padding-bottom: 6.5rem;
}
}
@media (min-width: 960px) {
.page {
padding-bottom: 1.2rem;
apps/web/src/views/PipelineBoardView.vue
+1 -1
View File
@@ -658,7 +658,7 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
.menu-pop {
position: fixed;
inset-inline-start: 1rem;
bottom: 5.5rem;
bottom: calc(var(--mobile-tabbar-h) + 1.75rem);
z-index: 40;
background: #fff;
border: 1px solid var(--line);
apps/web/src/views/ProductsSettingsView.vue
+1 -1
View File
@@ -743,7 +743,7 @@ tr:last-child td {
display: none;
position: fixed;
left: 1.1rem;
bottom: 1.1rem;
bottom: calc(1.1rem + var(--mobile-tabbar-h));
width: 56px;
height: 56px;
border-radius: 999px;
apps/web/src/views/ProfileView.vue
+1 -1
View File
@@ -1420,7 +1420,7 @@ h1 {
.dock {
position: fixed;
inset-inline: 0.85rem;
bottom: calc(0.55rem + env(safe-area-inset-bottom));
bottom: calc(0.55rem + var(--mobile-tabbar-h));
width: auto;
}
apps/web/src/views/ProjectBoardView.vue
+1 -1
View File
@@ -671,7 +671,7 @@ onBeforeUnmount(() => {
.menu-pop {
position: fixed;
inset-inline-start: 1rem;
bottom: 5.5rem;
bottom: calc(var(--mobile-tabbar-h) + 1.75rem);
z-index: 40;
background: #fff;
border: 1px solid var(--line);
apps/web/src/views/SalesForecastView.vue
+3 -2
View File
@@ -921,9 +921,9 @@ th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap;
.sum-row.payable { color: var(--teal); font-weight: 600; border-bottom: 0; }
.forecast-summary { padding: 1rem; }
.mob-bottom {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
position: fixed; left: 0; right: 0; bottom: var(--mobile-tabbar-h); z-index: 40;
display: none; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center;
padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
padding: 0.65rem 0.85rem;
background: #fff; border-top: 1px solid #eef2f7; box-shadow: 0 -8px 24px rgba(15,23,42,.06);
}
.fab {
@@ -948,6 +948,7 @@ th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap;
.kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.page { padding-bottom: 5.5rem; }
.desk-only { display: none !important; }
.mob-only, .mob-tabs, .mob-goals, .mob-forecast, .mob-bottom { display: flex; }
.mob-goals, .mob-forecast, .mob-form-screen { display: grid; }
apps/web/src/views/TeamSettingsView.vue
+1 -1
View File
@@ -1745,7 +1745,7 @@ textarea {
min-height: 0;
max-height: min(78dvh, 640px);
border-radius: 22px 22px 0 0;
padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
padding-bottom: 0.85rem;
animation: sheet-up 0.22s ease;
}