Website Redesign: "Learn" Page 4- Call Catalog Section- UI - Githubissues

orcasound / orcahome

Website redesign for Orcasound homepage static content http://orcasound.net

http://orcasound.net

MIT License

18 stars 29 forks source link

Website Redesign: "Learn" Page 4- Call Catalog Section- UI #44

Open hgordon6634 opened 2 years ago

hgordon6634 commented 2 years ago

User Story AS a New Orcahome user I WANT to see an easy to read webpage when I navigate to the Orcasound "Learn" page SO THAT I can easily learn about Orcas.

Description The intent of this story is to implement the UI finalized design from the Orcasound UX/UI team for the website redesign of the "Learn" Page. This Issue covers ONLY the Call Catalog portion of the page (see image below).

NOTES:

This is the UI only, the sounds can be linked in a later iteration.
Header/Footer already completed on different pull request #14
Use Material UI for the styling
Call catalog source files: https://orcasound.net/data/product/SRKW/call-catalog/no-narration_flac+mp3+ogg+spectrograms/mp3/
- There are some calls with multiple versions- please review and choose the best call to use using your best judgement

Acceptance Criteria GIVEN I open the Orcasound Learn page WHEN I look at the page THEN I see a UI that matches the attached UX/UI design.

https://www.figma.com/file/YdvbAjHETokV2x1LBHaElj/Orcasound-Website-Redesign-2021?node-id=298%3A290

UXBrendan commented 1 year ago

@NayoBaez

Just checking in with you- how is dev work going for this issue? Anything you need from me?

NayoBaez commented 1 year ago

@UXBrendan UI is done!

UXBrendan commented 1 year ago

Awesome!

UXBrendan commented 1 year ago

@NayoBaez

I've updated the notes above, but here is the link for the call catalog source files: https://orcasound.net/data/product/SRKW/call-catalog/no-narration_flac+mp3+ogg+spectrograms/mp3/. There are some calls with multiple versions- please review and choose the best call to use using your best judgement.

UXBrendan commented 1 year ago

@NayoBaez

I would like to discuss how to best write issues and assign to Orcasound devs to do some clean up production work for Orcahome. We're in the home stretch!

Orcasound: Dev discussion for Orcahome Thursday, September 14 · 10:00 – 11:00am Time zone: America/Los_Angeles Google Meet joining info Video call link: https://meet.google.com/vxp-aeto-zev

UXBrendan commented 1 year ago

@NayoBaez @Zekrom-7780

[ ] When the call ends, the pause button should automatically change back to the play button
[ ] Each spectrogram should be customized to the labeled call- assets can be found here: https://github.com/orcasound/orcadata/tree/master/Spectrogram/Plots

Overall, nice work! It's coming together, and looks great!

NayoBaez commented 1 year ago

@UXBrendan I replaced the image with the spectrograms for each corresponding call @Zekrom-7780 will take care of the playbutton function