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 -->
|
<!-- Record Quick-Action -->
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<div class="flex gap-2 items-center mb-2">
|
<div class="flex gap-2 items-center mb-2">
|
||||||
|
<!-- eslint-disable prettier/prettier max-len -->
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
:class="[
|
: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',
|
'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
|
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',
|
: 'px-4 py-3',
|
||||||
]"
|
]"
|
||||||
|
:style="isScrolled ? getButtonPosition() : {}"
|
||||||
@click="openPersonDialog()"
|
@click="openPersonDialog()"
|
||||||
>
|
>
|
||||||
<font-awesome icon="plus" />
|
<font-awesome icon="plus" />
|
||||||
<span v-if="!isScrolled" class="transition-opacity duration-300"
|
<span v-if="!isScrolled" class="transition-opacity duration-300"
|
||||||
>Thanks!</span
|
>Thank</span
|
||||||
>
|
>
|
||||||
</button>
|
</button>
|
||||||
|
<!-- eslint-enable prettier/prettier -->
|
||||||
<button
|
<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"
|
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()"
|
@click="openGiftedPrompts()"
|
||||||
@@ -1962,5 +1965,39 @@ export default class HomeView extends Vue {
|
|||||||
get isUserRegistered() {
|
get isUserRegistered() {
|
||||||
return this.isRegistered;
|
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>
|
</script>
|
||||||
|
|||||||
@@ -58,7 +58,8 @@
|
|||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
profile.issuerDid !== activeDid && // only show neighbors if they're not current user
|
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"
|
class="mt-6"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user