Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task: There Can Only Be One PhotoHeader #94

Open
5 of 6 tasks
sgilfeather opened this issue May 4, 2023 · 0 comments
Open
5 of 6 tasks

Task: There Can Only Be One PhotoHeader #94

sgilfeather opened this issue May 4, 2023 · 0 comments
Labels
help wanted Extra help would be great!

Comments

@sgilfeather
Copy link
Contributor

sgilfeather commented May 4, 2023

🎯 due Monday, April 8th

Currently, we have two components that represent the visual header for the home pages: photoHeader.tsx and adminPhotoHeader.tsx. They should look the same; so, in this ticket, we're going to use the adminPhotoHeader in both places.

  • First, move the contents of adminPhotoHeader.tsx to photoHeader.tsx, and delete the old adminPhotoHeader.tsx file. Go into student-home.tsx and admin-home.tsx and use this new component in both places.
  • Then, update the sizing on the photo header. Right now, the photo header has a "fixed height" of "200px", but stretches and resizes on resize of the page (while the translucent white overlay stays the same height). We'd like to change it so that the photo header is always 150px; and, so that the translucent white overlay is always half the height of the overall header (75px).

Then, we'd like to fix a few of the visual details in the photo header's profile section.

  • Currently, the profile image stretches to fit its square frame. Change this so that the image isn't stretched, but simply cropped on overflow.
  • Make the "Name" and "email" text a little bit bigger! Name as text-lg and email as text-md should be good.

Finally, hooking up the photoHeader's profile section! Right now, photoHeader takes name, email, and image props to represent a given Student or Admin's account information. This information is pulled from the session user, validated in a getServerSideProps() function in admin-home.tsx. We'd like to copy this work into student-home.tsx.

  • Copy the full definition of function getServerSideProps in admin-home.tsx into student-home.tsx: starting at line 300 (export const getServerSideProps = async (...) to line 366 (return { props: { ... }, }; };). Remove the check for the user's admin status, so that non-admin users aren't rerouted to the home page on accessing student-home.
  • Then, reference admin-home.tsx for guidance on how to pass values name, email, and image into your photoHeader component on the student page!
@sgilfeather sgilfeather added ticket Weekly developer ticket help wanted Extra help would be great! and removed ticket Weekly developer ticket labels May 4, 2023
@bell-oh bell-oh linked a pull request May 16, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra help would be great!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant