trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

feat: make the new "+" appear centered on the home button

Browse Source
This commit is contained in:
Trent Larson
2025-12-18 08:51:21 -07:00
parent 7ef5889185
commit fe1df9a9fb
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/HomeView.vue
View File

@@ -132,7 +132,7 @@ Raymer * @version 1.0.0 */
<button
v-if="isScrolled"
type="button"
class="fixed bottom-10 p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
class="fixed p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
:style="getButtonPosition()"
@click="openPersonDialog()"
>
@@ -1977,36 +1977,43 @@ export default class HomeView extends Vue {
}
/**
* Calculates the horizontal position for the button to align with house button center
* Calculates the position for the button to align with house button center (horizontally and vertically)
*/
getButtonPosition() {
const quickNav = document.getElementById("QuickNav");
if (!quickNav) {
return { left: "1.5rem" }; // Fallback to left-6
return { left: "1.5rem", bottom: "2.5rem" }; // Fallback
}
const navList = quickNav.querySelector("ul");
if (!navList) {
return { left: "1.5rem" };
return { left: "1.5rem", bottom: "2.5rem" };
}
// Get the first nav item (house button)
const firstItem = navList.querySelector("li:first-child");
if (!firstItem) {
return { left: "1.5rem" };
return { left: "1.5rem", bottom: "2.5rem" };
}
const itemRect = firstItem.getBoundingClientRect();
const buttonWidth = 56; // w-14 = 3.5rem = 56px
const buttonHeight = 56; // h-14 = 3.5rem = 56px
// Calculate center of house button
const houseButtonCenter = itemRect.left + itemRect.width / 2;
// Calculate horizontal center of house button
const houseButtonCenterX = itemRect.left + itemRect.width / 2;
const buttonLeft = houseButtonCenterX - buttonWidth / 2;
// Position button so its center aligns with house button center
const buttonLeft = houseButtonCenter - buttonWidth / 2;
// Calculate vertical center of house button
const houseButtonCenterY = itemRect.top + itemRect.height / 2;
// Position button so its center aligns with house button center vertically
// bottom is measured from bottom of viewport, so: window.innerHeight - (centerY - buttonHeight/2)
const buttonBottom =
window.innerHeight - houseButtonCenterY - buttonHeight / 2;
return {
left: `${buttonLeft}px`,
bottom: `${buttonBottom}px`,
};
}
}