search

bsoc-bitbyte / GetIt

Streamlined college e-commerce: Simplifying merch buying and selling for students.
https://getit.iiitdmj.ac.in/
17 stars 51 forks source link

[Feature Request]: Add merch card component #186

Closed AkashPaloju closed 3 weeks ago

AkashPaloju commented 4 weeks ago

Is your feature request related to a problem? Please describe.

A new card component is required prior to implementing the merchandise section, as the event card and merch card have many differing details.

Describe the solution you'd like

Create a merch card component. Please refer to the 'Finalised' section in this Figma link: https://www.figma.com/design/5Hs4DlvyJJWjQB9K7Fh0CY/Getit?node-id=85-727&t=8HJ1iB0tvEkwQimf-0

General notes for Developers:

Once you have a good understanding of the issue, you can ask for it to be assigned to you by leaving a comment as follows: Explain clearly how you'd tackle the issue at a minimum, point to which file(s) (mention their links in the repo) you'd modify, and describe the changes you'd make. If creating new files is necessary, specify where you would place them and outline the content you would add to resolve the issue.

If your explanation makes sounds good, we'll assign the issue to you. Once assigned, feel free to submit a PR.

Om-Thorat commented 4 weeks ago

May I take up this issue? I'll use a mui card component, :hover directive and ensure the card remains responsive throughtout different screen sizes.

Kushdapush commented 3 weeks ago

Hey @Om-Thorat We would expect you to implement the replica of the Figma designs manually without the use of external Libraries in this project!

Om-Thorat commented 3 weeks ago

Hey @Om-Thorat We would expect you to implement the replica of the Figma designs manually without the use of external Libraries in this project!

Sure works!

Om-Thorat commented 3 weeks ago

To be more specific I'll create a new file called MerchCard.vue in the components directory. I'll style it with tailwind, make sure it is responsive use the :hover directive to create the intended effect of changing photos on hover. I'll ensure the data in this compoenent is dynamic and that the component takes in variables such as pricing, name and other details to be shown on the card, this will make the component very easily reusable. To make the dark fade at the bottom on hover i'll create a div placing it aboslutely over the image div and giving it a gradient background. If this approach sounds good to you i would like to work on this issue.

Kushdapush commented 3 weeks ago

Alright Go ahead with it :+1: