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 <button
v-if="isScrolled" v-if="isScrolled"
type="button" 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()" :style="getButtonPosition()"
@click="openPersonDialog()" @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() { getButtonPosition() {
const quickNav = document.getElementById("QuickNav"); const quickNav = document.getElementById("QuickNav");
if (!quickNav) { if (!quickNav) {
return { left: "1.5rem" }; // Fallback to left-6 return { left: "1.5rem", bottom: "2.5rem" }; // Fallback
} }
const navList = quickNav.querySelector("ul"); const navList = quickNav.querySelector("ul");
if (!navList) { if (!navList) {
return { left: "1.5rem" }; return { left: "1.5rem", bottom: "2.5rem" };
} }
// Get the first nav item (house button) // Get the first nav item (house button)
const firstItem = navList.querySelector("li:first-child"); const firstItem = navList.querySelector("li:first-child");
if (!firstItem) { if (!firstItem) {
return { left: "1.5rem" }; return { left: "1.5rem", bottom: "2.5rem" };
} }
const itemRect = firstItem.getBoundingClientRect(); const itemRect = firstItem.getBoundingClientRect();
const buttonWidth = 56; // w-14 = 3.5rem = 56px const buttonWidth = 56; // w-14 = 3.5rem = 56px
const buttonHeight = 56; // h-14 = 3.5rem = 56px
// Calculate center of house button // Calculate horizontal center of house button
const houseButtonCenter = itemRect.left + itemRect.width / 2; const houseButtonCenterX = itemRect.left + itemRect.width / 2;
const buttonLeft = houseButtonCenterX - buttonWidth / 2;
// Position button so its center aligns with house button center // Calculate vertical center of house button
const buttonLeft = houseButtonCenter - buttonWidth / 2; 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 { return {
left: `${buttonLeft}px`, left: `${buttonLeft}px`,
bottom: `${buttonBottom}px`,
}; };
} }
} }