Update profile icons to open in new tab on Wins page

[arghmatey]

Overview

As a user while on the wins page, clicking on a Linkedin or Github link on a modal should open that profile page in a new tab. Currently - when clicking on a submission's Linkedin or Github on a modal window, the link opens in the current tab.

The modal links are dynamically created, and the target attribute needs to be added to that function.

Action Items

• Locate the makeIcon function in our wins javascript
• Set a new target attribute to the icon being created with a value of _blank

Resources/Instructions

Wins Page
wins.html

[Johnnie007]

Hey, I believe that the target="_blank" has been set using the Jekyll Template in the _includes folder. Link to code: https://github.com/hackforla/website/blob/gh-pages/_includes/wins-page/wins-card-template.html#:~:text=%3Cspan%20class%3D%22wins%2Dcard%2Dicons,%3C/span%3E

In the win.js file, there is a comment to delete the makeIcon and makeElement function. Link to code: https://github.com/hackforla/website/blob/gh-pages/assets/js/wins.js#:~:text=makeElement%20and%20makeIcon-,function%20makeElement(elementType%2C%20parent%2C%20className)%20%7B,%7D,-function%20updateOverlay(i

[Johnnie007]

Are we able to confirm this? @macho-catt

[Johnnie007]

This task has been resolved when the Wins page was converted to use the Jekyll Template. The template includes the attribute and value for target="_blank" that would open up a new tab on the web browser when the icon is clicked. This code has already been merged to the main branch, and no additional work needs to be done on this issue.

LINK HERE: https://github.com/hackforla/website/blob/gh-pages/_includes/wins-page/wins-card-template.html#:~:text=%3Cspan%20class%3D%22wins%2Dcard%2Dicons,%3C/span%3E

The issue just needs to be closed.

[macho-catt]

So the linked code does open up a new tab, but I believe the problem is when you click on "see more" when on desktop view. This opens up a modal, and when you click on linkedin/github on the modal it should open a new tab (currently it opens on the same tab).

As to why the class "needs to be deleted" according to the comment, I don't really know why. I would say the previous developer who worked on this wanted to rework the class but didn't have the time to.... I would say to either ignore that comment or remove that comment for now.

I think the trick for this is to update the function below to have a new attribute for taret="_blank":

website/assets/js/wins.js

Lines 423 to 428 in de29138

	function makeIcon(href, parent, className, src) {
	let icon = makeElement('a', parent, 'wins-card-icon');
	icon.setAttribute("href", href);
	let iconImg = makeElement('img', icon, className);
	iconImg.setAttribute("src", src);
	}

[Johnnie007]

Availability for this week:
Thursday 9 pm - 10 pm EST
My estimated ETA for completing this issue:
15 mins

[SAUMILDHANKAR]

@Johnnie007: Just wanted to share a point from our Sunday team meeting. We are now requesting all developers to add eta and availability at the time of picking up an issue or when you are assigned to an issue. Just wanted to let you know. Thanks for your awesome work.