Develop Wins page

[alecg123]

Overview

Wins Page will document our project successes as well as individual team members 'growth+development+and achievements'; including new hires and skills.

One of our HackForLA Website Update Objectives is to “Present a clear and compelling value proposition for participants in projects.” Essentially what can a volunteer get out of volunteering for Hack for LA?

Action Items

• [x] Product
  • [x] Brainstorming what this Wins Page might look like.
• [x] UI
  • [x] create a page layout that has the following
    • [x] link to "Share your wins" form
    • [x] testimonial layout
      • [x] name
      • [x] linkedin image and link
      • [x] checkboxes
      • [x] quote
• [x] Product
  • [x] Create google form

    ---

• [ ] Redesign the cards to include badges on the bottom. And some way of searching through the cards
• [ ] Create a slack bot that informs the group when there is a new win.
• [ ] Change the order of the info on the card to have the one they type out first.
• [ ] Add more lines of text on each card.

Resources/Instructions

see this comment for details about the type of checkboxes https://github.com/hackforla/website/issues/162#issuecomment-636576691

Secrets issue https://github.com/hackforla/website/issues/98

Important links

• description of slack bot
• google sheet with all the wins
• figma

Mr/Hack-for-LA-Website?node-id=1284%3A102)

[alexandrastubbs]

@jbubar @rblaz001 @efrenmarin45 @ruben1s I am not sure who is actually handling this at this point, but we need an update ASAP, as we would like to get this out the door this week.

[jbubar]

Making an update comment here. I am hoping to hand this off because I am moving pretty slowly, but in the mean time I have made some progress. here is a repl to show my progress on the see more button functionality for mobile. https://repl.it/@jbubar/see-more-testing

I have been able to make a proof of concept for the see more functionality for mobile, now I just have to add it to the webpage and make it work with the modal functionality.

blocks: I do not know how to do a lot of this so I have to read and learn and watch videos as I go.

availability: little availability, but I have a few hours a week usually on the weekends.

ETA: after thanksgiving Nov. 30th

[jbubar]

@ExperimentsInHonesty @alexandrastubbs I made a pull request. It has the see more expandable feature. @drubgrubby looked over it and is waiting on your approval for one thing...

I added a see less button that was not on the figma. (pictures below)

For desktop there is no need for a see less button because you can click away from the modal, but in mobile, the user could use a way to shrink a card once it has expanded.

Let me know what you think. Happy to change it to anything and learn something new in the process.

figma

my branch

[ExperimentsInHonesty]

@alexandrastubbs @jbubar @drubgrubby seems like a good solution.

[efrenmarin45]

Posting a quick update on the progress I've made in regards to adding users Github photos onto the wins page. Still running into walls and trying to get the solution to run. I do not yet have a workable solution and will be working on this throughout the week to make sure we have this figured out.

My availability will be mornings M/W/TH/F. I will be reaching out to @jbubar to keep him updated on progress.

[ExperimentsInHonesty]

@jbubar confirming that you saw this: https://github.com/hackforla/website/pull/808#issuecomment-731847161

[efrenmarin45]

Progress: Throughout the week I was able to break into the first layer of the JSON file. I can show some data in the console so some progress was made. Blockers: So the JSON file is like an onion. It has several layers and multiples steps needed to iterate through it. I was able to get to through the first layer and can pull up the zero indexed item but no more than that. I have not been able to break through for the last couple of days due to the holidays. Availability: M/W/Th mornings. ETA: I am not sure if I can get this across the finish line without some help. I'll reach out to @jbubar @KianBadie for further insight.

[jbubar]

@ExperimentsInHonesty, I fixed the issue.

"See more" is not shown if it is not necessary.

you can see the photos on the pull request👍

[ExperimentsInHonesty]

1. the last column will have a display version which will be for the purposes of reviewing the content
2. please edit the win for sam. Currently displays as

   
   Sam Miyamoto

Team(s): 311 Data, HelloGov Role(s): QA, UI/UX, Accessibility testing (I think that falls under QA?) I improved my LinkedIn, I setup 2FA, I worked on a project that will help the people of Los Angeles, I worked on two or more projects, and Found a mentor and bec

[jbubar]

Olivia Chiong came up with the idea to have a slack bot send a message to the group when there is a new win submitted!

in this message:

• the content of the win
• a link to the wins sheet
• a description of how to approve a win

[ExperimentsInHonesty]

Hi @jbubar I added a column and created a formula so that all the details submitted would roll up to one cell that could be read easily. I then hid the other columns - See example:

[ExperimentsInHonesty]

There is a weird thing happening with the text alignment

[jbubar]

@ExperimentsInHonesty That google sheet thing is really cool. I will see if I could deliver on that over the weekend.

as for the strange text alignment thing, that happens when the teams or roles are more than one line. I have some ideas for how to fix this, but it is going to take some tinkering.

[munaz77]

@jbubar will change the font to standard, and add bullet points in the description.

[pawan92]

@jbubar Can we get an update on this?

1. Progress
2. Blocks
3. Availability
4. ETA

[ahdithebomb]

@jbubar has a solution for the quote being in the wrong place. Formatting the question mark, will talk to the development team this week.

[jbubar]

Progress: I have reorganized the structure of the card and css to fix the quote formatting problem, and I have implimented danielle's new design. I just need to add the finishing touches. Blocks: I did not want to break and rewrite everything, but I bit the bullet and did it. ETA: Tues Dev meeting Avaibility: limited, I am finishing up my coding boot camp and the next few weeks will be really busy

[jbubar]

Progress: I have not made much progress this week. I put in only an hour or so. Blocks: had to refactor the read more functionality ETA: next week's meeting January 17th. Availibility: only a few hours this week, but a whole day on the weekend

[jbubar]

No update.. going to merge @dmcneary's pull request then I will push my changes on the reformat of the quotes

[pawan92]

@jbubar Any new updates? Progress Blocks Availability ETA

[jbubar]

@dmcneary's pull request #943 was added. progress: fixed the quotations on one branch, and started the new design for the modal on another Blocks: ran into a problem w Jekyll, and need to some significant changes to the code for this. availability: limited ETA: in two weeks

[jbubar]

progress: made some progress on the new design with the badges blocks: time availability: limited ETA: by next meeting for sure Here is where its at:

still need to do some styling, and hook up the github contributor

[jbubar]

@akibrhast made a pr for the filtering. #1034!!!! 🥳 We will merge it in the dev meeting. I worked on the mobile badges.

[jbubar]

Progress: did the mobile view with icons, still need to fix the styling on the overlay blocks: a lot of my time has been allocated to more administrative things availability: limited ETA: tues

[jbubar]

Progress: I spent the week working on Oauth (#1130), and a wins refactor (#1132) blocks: I am a bit confused on the Oauth availability: limited ETA: next week

[jbubar]

This is a master issue. and all of the things that need to be done are in other issues

981

1166

1163

1155

1130

1104

1070

1061