Design Issues

[amazinernest]

Bottom Padding
The section showing the cards at the end needs a little breathing space on mobile. Since there was a padding at the top section on the first card, I feel a padding below at the end of the last card should be also there as well

[OWK50GA]

Hey, @amazinernest. I'll like to work on this issue

[ShantelPeters]

Hi @amazinernest can i please be assigned to this issue

[ooochoche]

@amazinernest I can take on this issue as I have experience with UI/UX design and I am also a frontend developer.

[vestor-dev]

hello @amazinernest i'm a proficient UI/UX designer and a frontend dev
Please I would love to work on this issue kindly assign

This will be my first time contributing on this repo :)

[mayasimi]

@amazinernes am a frontend end developer with experience in using frontend technologies.

kindly assign me this task I would like to make it my first contribution to the starknet quest project.

[petersdt]

@amazinernest kindly assign me this task if it is still open for contribution.

Am experienced in developing frontend application using React.

[thiagoulloa]

@amazinernest Can I work on this? I already have experience working on Starknet Quest frontend

[fricoben]

Thanks @amazinernest I'll add this issue for the next OD hack that will happen next week ! If you want to do it you'll have priority, wait for next week to do it pls

[ooochoche]

@fricoben Can I jump on this

[Villarley]

hi @amazinernest
I’m a Dojo Coding member and an active contributor to the OSS community. I’ve worked on several Web3 projects, including contributions to stellar projects, specifically building on StarkNet. I also have solid experience with React, and as a Web3 hackathon buildathon winner. I already contributed to this project!

For this bottom padding issue, I’ll add spacing below the last card on mobile to match the top padding on the first card. This small change will give users a bit more breathing room at the end of the section, creating a cleaner, more balanced view.

Once I’ve made the change, I’ll test it on different screen sizes to ensure it looks consistent across devices.

[JosueBrenes]

Hi, I'm Josué Brenes and I'll be working on issue.
I'm Dojo Coding member. ⛩️

I estimate this will take 1 day to complete.

Solution for Padding Issue on Mobile

To solve the issue of insufficient bottom padding for the last card in the "quests" section, the following approach can be implemented using React and TypeScript (TSX). The solution dynamically ensures that the last card gets extra padding to provide better visual spacing.

---

Steps to Solve

1. Use Conditional Padding

We will check if the card being rendered is the last in the list. If so, additional padding or margin is applied to the card.

2. Utilize Tailwind CSS (or Custom CSS)

The solution uses Tailwind CSS for spacing, but the same logic can be adapted to standard CSS.

---

Code Implementation

import React from "react";

const QuestCard = ({ title, description }: { title: string; description: string }) => {
  return (
    <div className="bg-gray-800 text-white p-4 rounded-lg shadow-md">
      <h3 className="text-lg font-bold">{title}</h3>
      <p className="text-sm">{description}</p>
    </div>
  );
};

const QuestList = () => {
  const quests = [
    { id: 1, title: "Nostra - LaFamiglia Rose", description: "Nostra" },
    { id: 2, title: "Another Quest", description: "Details" },
    // Add more quests here
  ];

  return (
    <div className="space-y-4 p-4">
      {quests.map((quest, index) => (
        <div
          key={quest.id}
          className={`${index === quests.length - 1 ? "mb-8" : ""}`} // Extra margin for the last card
        >
          <QuestCard title={quest.title} description={quest.description} />
        </div>
      ))}
    </div>
  );
};

export default QuestList;

---

Explanation

1. Dynamic Class Application:

   • The code uses the condition index === quests.length - 1 to check if the current card is the last one.
   • If the card is the last, an additional mb-8 (margin-bottom) class is applied to create more spacing.

2. Tailwind CSS Classes:

   • space-y-4: Adds vertical spacing between all cards.
   • mb-8: Adds a larger margin below the last card for better visual spacing.

3. Reusable Components:

   • The QuestCard component is reusable and can handle any card-related data or styles.

---

Alternate CSS Approach

If you are not using Tailwind CSS, you can add conditional CSS classes as shown below:

TSX Code:

<div
  key={quest.id}
  className={`quest-card ${index === quests.length - 1 ? "last-card" : ""}`}
>
  <QuestCard title={quest.title} description={quest.description} />
</div>

CSS Code:

.quest-card {
  margin-bottom: 1rem;
}

.quest-card.last-card {
  margin-bottom: 2rem; /* Additional spacing for the last card */
}

---

Result

This solution ensures sufficient bottom spacing for the last card in a dynamically rendered list, improving the user experience on mobile devices.

[emmz3230]

hi
I am a front-end developer specializing in responsive web design,
device-compatible email templates, 3D web integration,
and technical writing on programming topics. I also contribute
to open-source documentation and help build documentation sites.

steps on approaching this issue
i will gladly install the code in the codebase with the required version of the project node
check the the result in my browser and fix the responsiveness to fit different devices from the 320 px device to 2560px device so as to not have any issue with any device at all not only on mobile but different device using vanilla css or tailwind css or the default styling language

[AYo101o]

@fricoben can i be assigned to this?

[Yunusabdul38]

@fricoben I'd like to handle this task

[vestor-dev]

Hey @fricoben can I hop on this one when the OD hack starts