refactor: change word on first button to "Thank", and center on button when it drops down

This commit is contained in:
2025-12-18 08:30:07 -07:00
parent 7aea818f01
commit 0697b14411
2 changed files with 41 additions and 3 deletions

View File

@@ -111,21 +111,24 @@ Raymer * @version 1.0.0 */
<!-- Record Quick-Action -->
<div class="mb-6">
<div class="flex gap-2 items-center mb-2">
<!-- eslint-disable prettier/prettier max-len -->
<button
type="button"
:class="[
'text-center text-base uppercase bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white flex items-center justify-center gap-2 transition-all duration-300 rounded-full',
isScrolled
? 'fixed bottom-10 left-6 p-4 w-14 h-14 z-50'
? 'fixed bottom-10 p-4 w-14 h-14 z-50'
: 'px-4 py-3',
]"
:style="isScrolled ? getButtonPosition() : {}"
@click="openPersonDialog()"
>
<font-awesome icon="plus" />
<span v-if="!isScrolled" class="transition-opacity duration-300"
>Thanks!</span
>Thank</span
>
</button>
<!-- eslint-enable prettier/prettier -->
<button
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
@click="openGiftedPrompts()"
@@ -1962,5 +1965,39 @@ export default class HomeView extends Vue {
get isUserRegistered() {
return this.isRegistered;
}
/**
* Calculates the horizontal position for the button to align with house button center
*/
getButtonPosition() {
const quickNav = document.getElementById("QuickNav");
if (!quickNav) {
return { left: "1.5rem" }; // Fallback to left-6
}
const navList = quickNav.querySelector("ul");
if (!navList) {
return { left: "1.5rem" };
}
// Get the first nav item (house button)
const firstItem = navList.querySelector("li:first-child");
if (!firstItem) {
return { left: "1.5rem" };
}
const itemRect = firstItem.getBoundingClientRect();
const buttonWidth = 56; // w-14 = 3.5rem = 56px
// Calculate center of house button
const houseButtonCenter = itemRect.left + itemRect.width / 2;
// Position button so its center aligns with house button center
const buttonLeft = houseButtonCenter - buttonWidth / 2;
return {
left: `${buttonLeft}px`,
};
}
}
</script>

View File

@@ -58,7 +58,8 @@
<div
v-if="
profile.issuerDid !== activeDid && // only show neighbors if they're not current user
profile.issuerDid !== neighbors?.[0]?.did // and they're not directly connected (since there's no in-between)
profile.issuerDid !== neighbors?.[0]?.did // and they're not directly connected
// (which we know because there is no neighbor in-between them)
"
class="mt-6"
>