Christophertorres/phs final tours spotlights styling #62

christophertorres1 · 2024-05-05T10:45:01Z

✨ New in this PR ✨

One liner: what did you do? 🛠

Finalizing designs

Coverage 🙆‍♀️

use this section to break up your task into submodules and track progress, copy from Linear and mark what was completed

Added/updated mobile and web designs for Hours & Location, Virtual Tours (all), and Wildlife Spotlights (all).
Updated fonts and added larger web sizes for each.
Made NavBar sticky.
Renamed all pages to latest names and switched from format <exampleNamePage> to <example-name>.
Added on click effects to regular buttons and text buttons.
Created new 'links' table on supabase and integrated with Related Links component
Added 'Exhibits' to the navigation bar
Addressed @cluurie's comment below (font weight being addressed)

How can the reviewer test your code? Where is this sprint located in the codebase? 👩‍💻

Go through the pages mentioned above (and look at the URLs :] )

REQUIRED: Link a short video demo of the feature you have added. 👩‍💻

Screen.Recording.2024-05-25.at.3.09.36.AM.mov

Any bugs you encountered or still having trouble with? 🐛

Resources 📔

REQUIREMENTS in this section: Link all relevant online resources and related PRs. Write down any new dependencies or packages and link to their documentation. If you ran into bugs, link any stack overflow or online resources that helped you unblock yourself

❗IF this sprint was marked as FRONTEND on linear, cc Claire Wang

REMEMBER: once PR is made, also request a PR review Sarah, CC'ing is NOT enough!
🏚 cc: @sarahhpeng @andreisito @cluurie

cluurie · 2024-05-06T01:10:11Z

HI CHRIS THIS IS AMAZINGGG just a few minor design notes
Virtual Tours Pages

check that the border radius for all button is 8px (all buttons on mobile should have 8px border radius)
it looks like some text is still wonky --> make sure all the font styling and its default class thingy is correct (specifically i see that the line spacing for B3 body text is much larger, and font weights overall look thicker than it should
check that end of tour page has more padding all around - ideally enough padding so that the footer doesnt show until u scroll
also check the spacing between texts and buttons on the end of tour page
"back to virtual tours" button has a smaller height

Spotlights Pages

check spacing between title and subtitle for the spotlight buttons
line height of the subtext for spotlight buttons should be smaller (maybe a default text styling problem)
for the related spotlights buttons, the subtext should be truncated at 2 lines (rn its at 1)
the border radius for the "more in this spotlight" section under "bird attacks" + all the other spotlight pages look bigger than the main spotlight pages' (should be 8px!)

overall super incredibly dope ✨

sarahhpeng

CHRIS THIS IS AMAZING!!!
couple of quick things for spotlights:

for the "Found a Wild Animal" page, the text overflows on a web screen. would u be able to make it align with the image.

- would you be able to add the "Related Spotlights" section to all the spotlights. im looking at the figma file, and ik not all of the pages have that, and maybe that is a design choice. but tbh, none of the spotlights are really that related, so it seems sort of confusing to only have Related Spotlights for 1, and not all

* . * refinements * . * style: make navbar sticky * style: rename pages * feat: hours and location web layout * style: make image carousel fit to parent container * style: update mobile and web designs * style: fix virtual tours button radius * style: tour end page fills screen height * style: back to tours button height adjustment * style: adjust button-text spacing * style: update space between title and subtitle for spotlight buttons * style * style: fix button radius under more in this spotlight * style: add back button click effect * style: tour button with text click effect * style: add last and next stop button click effects * style: add spotlight display button click effect * style: text on click effect * style: add line clamp 2 to related spotlights * style: specifically define each font feature * feat: add links table to supabase * style: related links component uses new links table * style: fix eslint and prettier errors * style: rename navBar.tsx to NavBar.tsx * style: update page path names * feat: add exhibits to navigation bar * style: fix eslint and prettier issues * style: fix text overflow in spotlight page

* feat: web screens met, testing on iPhone SE screens + switch to web: instead of md: needed * feat: iPhone SE debugged, window containers required * chore: sync * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * fix: padding on title header and sizing of exhibit button styling, Galaxy Fold 5 boundary issues + button icon gap fixes incoming * fix: Galaxy Fold 5 + Iphone SE boundary error fixed. Note: aim to use max prefix on measurements for parent tags to avoid this in the future * fix: fixed bounding issues again + visitor resources button styling fixes * feat: transition to using React Context for window resize checks, should look into using other React Contexts in the future * Claire fixes (#63) * done with popup styling * updated package lock for npm install * Revert "fix: remove formatting changes to media/queries.tsx" This reverts commit f6e1d69. * cont. rebase * cont. rebase * rebase 3 * rebase 4 * refactor: add formatting changes * refactor: add jsdoc, imports, change queries.tsx -> .ts * edited to accomodate database changes for categories and exhibits * claire's approval * figma dev changes resolved * updated desktop version * finished all desktop feedback - delted display component (not using) changed navbar component to huntergreen * done with claire's mobile edits --------- Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> * Revert "Claire fixes (#63)" (#64) This reverts commit 8faac52. * package changed * change useWebScreenDetection to useWebDeviceDetection (#68) * fixed some linting errors, mostly jsdocs (#69) * news feed web (#61) * news feed web * small change * added web screen, fixed styling when screen between certain sizes, fixed coloring using h-full (?), changed margins to padding, changed to rem * just used gradient for now for epic styling lol.. * changed bg to mint cream for now :( * changed web detection * removed text from web --------- Co-authored-by: sarahhpeng <[email protected]> * Justin exhibit redo (#67) * added database and page * fixed lint errors lol... * style changes * prettier * added database and page * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * feat: disabling github actions until MPH / post-MPH * chore: prettier * chore: disabled only the tsc compiler for now * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * added database and page * fixed lint errors lol... * style changes * prettier * added database and page * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * feat: disabling github actions until MPH / post-MPH * chore: prettier * chore: disabled only the tsc compiler for now * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * design changes + adding active state to buttons * big database edits to make fun facts possible on map * supabase function change * documentation changes + tailwind changes * small styling changes * some wbe changes * maybe will make components equal heightsl ater if have time i cant figure it out lol fml * web resize changes * edit nav bar * added database and page * fixed lint errors lol... * style changes * prettier * added database and page * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * feat: disabling github actions until MPH / post-MPH * chore: prettier * chore: disabled only the tsc compiler for now * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * added database and page * fixed lint errors lol... * style changes * prettier * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * design changes + adding active state to buttons * big database edits to make fun facts possible on map * supabase function change * documentation changes + tailwind changes * small styling changes * some wbe changes * maybe will make components equal heightsl ater if have time i cant figure it out lol fml * web resize changes * edit nav bar * small post rebase fixes --------- Co-authored-by: Andrei Tan <[email protected]> Co-authored-by: sarahhpeng <[email protected]> * fixed all eslint errors, still some warnings, introduced some ignores (#70) Co-authored-by: sarahhpeng <[email protected]> * fixed remaining errors (#71) * Phs sitemap fix (#66) * done with popup styling * updated package lock for npm install * Revert "fix: remove formatting changes to media/queries.tsx" This reverts commit f6e1d69. * cont. rebase * cont. rebase * rebase 3 * rebase 4 * refactor: add formatting changes * refactor: add jsdoc, imports, change queries.tsx -> .ts * edited to accomodate database changes for categories and exhibits * claire's approval * figma dev changes resolved * updated desktop version * finished all desktop feedback - delted display component (not using) changed navbar component to huntergreen * done with claire's mobile edits * added working nav bar to mihas pr * fixed bracket issue in the siteMapPage * filter button duplicated import statement * changed hunterGreen to hunter-green for filter button * testing w-auto * minor change * fixed alignment issues and used andrei's resizing * fixed popup alignment * resolved justin's comments * fixed fonts * fixing lag from tours to exhibit * combined use affects * trying to push with eslint fixes * fixed eslint errors - ready to push --------- Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> * Christophertorres/phs final tours spotlights styling (#62) * . * refinements * . * style: make navbar sticky * style: rename pages * feat: hours and location web layout * style: make image carousel fit to parent container * style: update mobile and web designs * style: fix virtual tours button radius * style: tour end page fills screen height * style: back to tours button height adjustment * style: adjust button-text spacing * style: update space between title and subtitle for spotlight buttons * style * style: fix button radius under more in this spotlight * style: add back button click effect * style: tour button with text click effect * style: add last and next stop button click effects * style: add spotlight display button click effect * style: text on click effect * style: add line clamp 2 to related spotlights * style: specifically define each font feature * feat: add links table to supabase * style: related links component uses new links table * style: fix eslint and prettier errors * style: rename navBar.tsx to NavBar.tsx * style: update page path names * feat: add exhibits to navigation bar * style: fix eslint and prettier issues * style: fix text overflow in spotlight page * deleted outdated images from public folder and updated navBar folder to NavBar (#72) * renamed navBar to NavBar (#73) * Phs site map eslint (#74) * fixed colors and deleted the ts file for category queries * supabase fix * supabase types added * fixed eslint and prettier things for all pages pertaining to site maps * Justin footer redo (#75) * added footer file * added footer component to all pages, plus small edits to footer * made links open new tab instead of change exisitng --------- Co-authored-by: sarahhpeng <[email protected]> * Noah/fix window reference (#77) * fix: move window into useEffect * fix: remove news state dependency from useEffect * added correct links to site map (#76) * added correct links to site map * made images fit to exhibit component * merge resolved * style * nothing * feat: iPhone SE debugged, window containers required * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * fix: misc changes to styling and fixing some console log errors * feat + fix: web design system set up, fixed lato font * fix: resolving old merge conflicts * feat: web screens met, testing on iPhone SE screens + switch to web: instead of md: needed * feat: iPhone SE debugged, window containers required * chore: sync * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * Claire fixes (#63) * done with popup styling * updated package lock for npm install * Revert "fix: remove formatting changes to media/queries.tsx" This reverts commit f6e1d69. * cont. rebase * cont. rebase * rebase 3 * rebase 4 * refactor: add formatting changes * refactor: add jsdoc, imports, change queries.tsx -> .ts * edited to accomodate database changes for categories and exhibits * claire's approval * figma dev changes resolved * updated desktop version * finished all desktop feedback - delted display component (not using) changed navbar component to huntergreen * done with claire's mobile edits --------- Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> * Revert "Claire fixes (#63)" (#64) This reverts commit 8faac52. * merge resolved * style * nothing * feat: iPhone SE debugged, window containers required * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * fix: misc changes to styling and fixing some console log errors * feat + fix: web design system set up, fixed lato font * fix: resolving old merge conflicts * sync with origin --------- Co-authored-by: miha-bhaskaran <[email protected]> Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: David Qing <[email protected]> Co-authored-by: Justin Xue <[email protected]> Co-authored-by: Chris Torres <[email protected]>

christophertorres1 added 26 commits May 25, 2024 00:28

.

0ab7ae5

refinements

21ac4e2

.

dbb0812

style: make navbar sticky

15b0f69

style: rename pages

4959e3d

feat: hours and location web layout

87a54fc

style: make image carousel fit to parent container

a3dd352

style: update mobile and web designs

9cf4655

style: fix virtual tours button radius

3117a79

style: tour end page fills screen height

bd65f03

style: back to tours button height adjustment

98e8512

style: adjust button-text spacing

21b7b75

style: update space between title and subtitle for spotlight buttons

8355ee7

style

16320a2

style: fix button radius under more in this spotlight

e3c74dd

style: add back button click effect

6e83993

style: tour button with text click effect

3a4cd73

style: add last and next stop button click effects

89afcd6

style: add spotlight display button click effect

97317f6

style: text on click effect

c43d2fa

style: add line clamp 2 to related spotlights

1d89997

style: specifically define each font feature

7b39b21

feat: add links table to supabase

0771fcb

style: related links component uses new links table

6cdc27e

style: fix eslint and prettier errors

03e6aaa

style: rename navBar.tsx to NavBar.tsx

b591c36

christophertorres1 force-pushed the christophertorres/phs-final-tours-spotlights-styling branch from 2d7f921 to b591c36 Compare May 25, 2024 09:28

christophertorres1 added 2 commits May 25, 2024 02:40

style: update page path names

0b699e3

feat: add exhibits to navigation bar

90884d2

style: fix eslint and prettier issues

fbc64a5

christophertorres1 marked this pull request as ready for review May 25, 2024 10:18

sarahhpeng approved these changes May 25, 2024

View reviewed changes

sarahhpeng requested changes May 25, 2024

View reviewed changes

style: fix text overflow in spotlight page

65489b4

sarahhpeng approved these changes May 25, 2024

View reviewed changes

sarahhpeng merged commit 37e8286 into main May 25, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Christophertorres/phs final tours spotlights styling #62

Christophertorres/phs final tours spotlights styling #62

christophertorres1 commented May 5, 2024 •

edited

Loading

cluurie commented May 6, 2024

sarahhpeng left a comment

Christophertorres/phs final tours spotlights styling #62

Christophertorres/phs final tours spotlights styling #62

Conversation

christophertorres1 commented May 5, 2024 • edited Loading

✨ New in this PR ✨

One liner: what did you do? 🛠

Coverage 🙆‍♀️

How can the reviewer test your code? Where is this sprint located in the codebase? 👩‍💻

REQUIRED: Link a short video demo of the feature you have added. 👩‍💻

Any bugs you encountered or still having trouble with? 🐛

Resources 📔

❗IF this sprint was marked as FRONTEND on linear, cc Claire Wang

cluurie commented May 6, 2024

sarahhpeng left a comment

Choose a reason for hiding this comment

christophertorres1 commented May 5, 2024 •

edited

Loading