refactor: change word on first button to "Thank", and center on button when it drops down
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user