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

Ticket # 147 - About us page layout #166

Open
wants to merge 10 commits into
base: new_site_dev
Choose a base branch
from

Conversation

lakshman8664
Copy link

finished page structure using existing components.
About, Board Member Highlights, and Alumni Recollections sections filled with static data
Filled Upcoming Events and Past Events (dynamic data) with dummy values temporarily

Copy link

@accesslint accesslint bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are accessibility issues in these changes.

<div className="flex flex-col items-center mb-8">
{image && (
<div className="w-32 h-32 overflow-hidden rounded-full mb-4">
<img
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is missing a text alternative. This is a problem for people using screen readers.

@lakshman8664 lakshman8664 force-pushed the about_us_layout branch 2 times, most recently from dce0ee2 to 008cbee Compare November 6, 2024 22:47
Copy link
Member

@olliepai olliepai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pls make the images on the GenericCard be the same height as the text (see Figma).

Note: The home page also uses the GenericCard component so make sure any styling changes do not break the home page.

Everything else looks good!

@lakshman8664
Copy link
Author

image

Modified the image size in "upcoming events" section. Created a new card for this instead of modifying the GenericCard component.

Copy link

@accesslint accesslint bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are accessibility issues in these changes.

<div className="border-2 border-black rounded-2xl p-6 flex flex-col items-center text-center shadow-md w-full">
{/* Circular Profile Picture */}
<div className="w-24 h-24 overflow-hidden rounded-full mb-4 border-2 border-black">
<img className="object-cover w-full h-full" src={image} />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is missing a text alternative. This is a problem for people using screen readers.

@lakshman8664
Copy link
Author

new structure for "About Us" page added (since the latest Figma changes)

Copy link

@accesslint accesslint bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are accessibility issues in these changes.

return (
<div className={`border-2 border-black-300 rounded-lg p-6 flex flex-col h-full transition-transform duration-300 hover:scale-105 ${className}`}>
<div className="flex flex-col items-center w-full space-y-4 group flex-grow">
<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg group-hover:scale-110 transition ease-in-out duration-300" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is missing a text alternative. This is a problem for people using screen readers.

return (
<div className={`group p-4 border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
<div className={`flex justify-center items-center space-x-4 rounded-xl drop-shadow-lg ${bgClassName} ${reverse ? 'flex-row-reverse space-x-reverse' : ''}`}>
<img src={imgSrc} className="h-[100px] md:h-[100px] py-4 drop-shadow-xl" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is missing a text alternative. This is a problem for people using screen readers.

// return (
// <div className="border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105">
// <div className="flex flex-col items-center w-full space-y-4">
// <img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This image is missing a text alternative. This is a problem for people using screen readers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants