We want to highlight collaboration features on the right column of the grant details pages. As we work to implement and improve follow, notes, and share features, we want to move the grants.gov, copy link, and print buttons to the left column so they are easily accessible but also not competing for attention with the new collaboration features.
Current State
On the grant details page, there are three buttons at the top of the right column - Apply on Grants.gov, Print, and Copy Link.
Change the "Copy Link" and "Print" from buttons to links.
The links will display below the Grant Title in the following order on the right-hand side above the Grant Details with the icons that show in the designs to the left of the text.
Copy Link
Print
Move the View on Grants.gov button to the left-hand side above the Grant Details.
(Note: This is a text update from the previous "Apply on Grants.gov".)
These are currently implemented as <b-button> elements, which should be converted to <a> elements.
Per the Figma designs (linked above), icons should be updated as well:
Print: Bootstrap printer-fill icon should be updated to printer
Copy: Bootstrap files icon should be updated to paperclip. Note that the existing check2 icon usage (which is displayed when the button/link has been clicked) should remain unchanged.
The position of the entire <div> container (which is currently prefixed by <!-- Right page column: main print/copy/grants.gov buttons --> in GrantDetailsView.vue) should be moved beneath the headline rather than next to it, and should be adjusted accordingly within the view's grid template.
Why is this issue important?
We want to highlight collaboration features on the right column of the grant details pages. As we work to implement and improve follow, notes, and share features, we want to move the grants.gov, copy link, and print buttons to the left column so they are easily accessible but also not competing for attention with the new collaboration features.
Current State
On the grant details page, there are three buttons at the top of the right column - Apply on Grants.gov, Print, and Copy Link.
Expected State
See designs here
Implementation Plan
packages/client/src/views/GrantDetailsView.vue
.<b-button>
elements, which should be converted to<a>
elements.printer-fill
icon should be updated toprinter
files
icon should be updated topaperclip
. Note that the existingcheck2
icon usage (which is displayed when the button/link has been clicked) should remain unchanged.<div>
container (which is currently prefixed by<!-- Right page column: main print/copy/grants.gov buttons -->
inGrantDetailsView.vue
) should be moved beneath the headline rather than next to it, and should be adjusted accordingly within the view's grid template.