Skip to content

Commit

Permalink
Misc UI updates and tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
chadokruse committed Nov 17, 2024
1 parent 04c49e6 commit 300b8ff
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 18 deletions.
4 changes: 3 additions & 1 deletion apps/web/src/lib/components/profiles/Profile.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { Toaster } from 'svelte-french-toast';
import People from './people/People.svelte';
import SummaryBoxHeader from './SummaryBoxHeader.svelte';
import Banner from './Banner.svelte';
Expand Down Expand Up @@ -30,7 +31,7 @@
let {
organization_name,
filings,
grants,
// grants,
people,
has_website: hasWebsite,
grants_facets: grantsFacets,
Expand All @@ -43,6 +44,7 @@
let formattedTaxPeriodEnd: string = $derived(formatTaxPeriodDate(filings[0].tax_period) || 'N/A');
</script>

<Toaster />
<Banner />
<div class="relative">
<!-- Left Navigation -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
Expand Down Expand Up @@ -166,7 +167,7 @@
</div>
<Divider />
{#if orgFinancialStats && orgFinancialStats.length > 1}
<div class="min-h-full w-full">
<div class="min-h-60 w-full">
<canvas bind:this={chartCanvas}></canvas>
</div>
<Divider />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,7 @@
</dl>

{#if grantsReferenceAttachment && grantCount === 1}
<Tip
title="Grantmaking reported as a single grant"
message="Further grant details may be available in the tax filing itself."
includeLogo
/>
<Tip title="Grantmaking reported as a single grant" message="See the Grants table below for details." includeLogo />
{/if}

<!-- Grant Clusters Section -->
Expand Down
14 changes: 7 additions & 7 deletions apps/web/src/lib/components/profiles/grants/GrantsTable.svelte
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<script lang="ts">
import GrantRow from './GrantRow.svelte';
import { ExclamationCircle } from 'svelte-heros-v2';
import type { GrantsArray } from '@shared/typings/grantmakers/all';
import type { GrantsArray, GrantmakersExtractedDataObj } from '@shared/typings/grantmakers/all';
import { humanizeNumber } from '@shared/functions/formatters/numbers';
import Tip from '../alerts/Tip.svelte';
interface Props {
grantsAllYears?: GrantsArray | null;
grantsCurrent?: GrantsArray | null;
grantCount?: number | null;
grantCountAllYears?: number | null;
grantCount?: GrantmakersExtractedDataObj['grant_count'];
grantCountAllYears?: GrantmakersExtractedDataObj['grant_count_all_years'];
filingsAvailable?: number | null;
grantsReferenceAttachment: boolean;
grantsReferenceAttachment: GrantmakersExtractedDataObj['grants_reference_attachment'];
}
let {
grantsAllYears = null,
grantsCurrent = null,
grantCount = null,
grantCountAllYears = null,
grantCount,
grantCountAllYears,
filingsAvailable = null,
grantsReferenceAttachment = false,
}: Props = $props();
Expand Down Expand Up @@ -104,7 +104,7 @@
<div class="mx-auto mt-4 flex">
<Tip
title="Grants reference an attachment"
message="The use of attachments and statements to provide grant details is a holdover from before foundation tax returns were filed electronically. Though unlikely, further grant details may be available in the tax filing itself. "
message="The use of attachments and statements to provide grant details is a holdover from before foundation tax returns were filed electronically. Unfortunately, these attachments are often not available. "
includeLogo
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script lang="ts">
import Approachability from './Approachability.svelte';
import { copy } from 'svelte-copy';
import toast from 'svelte-french-toast';
import Dot from '$lib/components/shared/icons/Dot.svelte';
import LetterAvatar from '$lib/components/shared/avatars/LetterAvatar.svelte';
import { formatEin } from '@shared/functions/formatters/ein';
Expand Down Expand Up @@ -46,9 +48,9 @@
</div>
</div>
<!-- Name -->
<div class="relative my-auto w-auto max-w-full flex-none md:px-3">
<div class="relative my-auto w-auto md:flex-none md:px-3 lg:max-w-full">
<div class="h-full">
<h5 class="mb-1 w-full max-w-md whitespace-normal text-wrap">{organization_name}</h5>
<h5 class="mb-1 w-full whitespace-normal text-wrap text-lg font-semibold md:max-w-md">{organization_name}</h5>
<div class="mb-0 text-sm font-normal leading-normal">
<strong class="text-slate-700">
{profile.city},
Expand All @@ -71,7 +73,13 @@
<div class="ml-4 grid w-full grid-cols-2 gap-x-2 gap-y-1 text-right md:ml-2 md:mt-0 md:w-auto md:gap-x-4">
<span class="inline-flex items-center justify-start text-sm md:justify-end">EIN</span>
<span
class="inline-flex items-center justify-center rounded-md bg-slate-50 px-2 py-1 text-sm font-medium text-slate-700 ring-1 ring-inset ring-slate-700/10"
use:copy={{
text: profile.ein,
onCopy() {
toast.success('Copied EIN');
},
}}
class="inline-flex cursor-copy items-center justify-center rounded-md px-2 py-1 text-sm font-medium text-slate-700"
>{formatEin(profile.ein)}</span
>
<span class="inline-flex items-center justify-start text-sm md:justify-end">IRS Status</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/lib/components/search/Nav.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
></path>
</svg>
</div>
<span class="text-sm text-slate-500">Search</span>
<span class="text-sm text-slate-500">Quick search...</span>
</div>
</button>
</div>
Expand Down
60 changes: 60 additions & 0 deletions apps/web/src/lib/utils/tooltip.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// tooltip.ts
import tippy, { type Props, type Content } from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import { browser } from '$app/environment';

interface TooltipParams extends Partial<Props> {
content?: Content; // Using tippy's Content type instead of just string
}

let tippyInstance: typeof tippy | undefined;

if (browser) {
tippyInstance = tippy;
}

export function tooltip(node: HTMLElement, params: TooltipParams = {}) {
if (!browser || !tippyInstance) {
return {
update: () => {},
destroy: () => {},
};
}

// Determine the title to show. Prefer custom content, then title, then aria-label
const custom = params.content;
const title = node.title;
const label = node.getAttribute('aria-label');

// Ensure content is properly typed
const content: Content = (custom ?? title ?? label ?? '') as Content;

// Ensure the "aria-label" attribute is set for accessibility
if (!label && content) {
node.setAttribute('aria-label', typeof content === 'string' ? content : '');
}

// Clear the HTML title attribute to prevent default browser behavior
node.title = '';

// Create a Tippy instance with the provided content and parameters
const tip = tippyInstance(node as Element, {
content,
...params,
animation: true,
arrow: true,
});

return {
update(newParams: TooltipParams) {
const newContent = newParams.content ?? content;
tip.setProps({
content: newContent,
...newParams,
});
},
destroy() {
tip.destroy();
},
};
}

0 comments on commit 300b8ff

Please sign in to comment.