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

[ Feat : Truncating the title's and summary's when the Cards are side by side ] #1151

Closed
rohitPandey469 opened this issue Jan 27, 2024 · 14 comments
Labels

Comments

@rohitPandey469
Copy link

Is your feature request related to a problem? Please describe.
The current display of Tutorial Cards (i.e., cards containing the 'title' and 'description' of a tutorial) is visible in the following locations:

  1. Homepage => "/"
  2. Tutorials page => "/tutorials"
  3. Potentially on the Profile Page in later stages of development => "/profile"

However, there are UI challenges associated with the display of Tutorial Cards:

  • On the "/tutorials" page, where most cards are shown, longer titles or summaries can disrupt the UI layout. To address this, we propose truncating the title and summary to a fixed max width and max height (e.g., 250x290, similar to platforms like Udemy).
  • On the Homepage or Profile Page, where cards with and without pictures are used, varying heights which is already present is enhancing the visual appeal, as the cards are not side by side. So if want fixed height then can add a show more or expand btn.

Describe the solution you'd like

  1. For the "/tutorials" page, truncate the title and summary, fixing the max width and max height (e.g., 250x290).
  2. If fixing the height on Home Pages, consider adding a "Show More" or "Expand" button to handle longer content.

Describe alternatives you've considered
Truncating the summary on the Homepage as well and incorporating a "Show More" or "Expand" button for longer content.

Additional context

Codelabz.-.Google.Chrome.2024-01-27.10-27-46.1.mp4

Truncating the title's and summary when the cards are side by side in "/tutorials".

@rudrakushwaha
Copy link

Hey @rohitPandey469 I want to contribute to the to the scorelab, also I have setup the codelabz in my local system. I have signed up to the codelabz but cannot signin after sign up . What's the problem?

@DhairyaMajmudar
Copy link

Hi @rudrakushwaha for sign up you have to run the emulators again using the make commands.
Hope this help : )

@rudrakushwaha
Copy link

@DhairyaMajmudar I had run the emulators that's why the signup window worked and a success message was shown after my successful signup but after that when I am trying to sign in, it does not directing me to anywhere but only the signin page itself.

@rudrakushwaha
Copy link

image
image

Hey @rohitPandey469 , @DhairyaMajmudar I saw through this issue to truncate the strings but after I setup the envirnment and log in I do not see any such tutorials posts in the homepage neither I am able to create any tutorial as I see no option in the select section. What's the issue ?

@rudrakushwaha
Copy link

2024-01-30.19-12-39.mp4

@Sujal267
Copy link

Sujal267 commented Feb 6, 2024

Is the issue still open? Can I work on it?

@rohitPandey469
Copy link
Author

@rudrakushwaha

  1. Log In with dummy accounts that are provided already i.e. codelabz or Sarfraz or Mahendar Id, these Id will show up when you try to log in and if they don't show then run this command in cmd inside codelabz project fireabse emulators:start --import=testdata
  2. After logging in you will have a organization to select instead of No Options, while creating tutorial.
    Then go ahead and work on this issue. Happy coding :)

@rohitPandey469
Copy link
Author

@Sujal267, there's no PR corresponding to this issue, so it's still open.

@Sujal267
Copy link

@Sujal267, there's no PR corresponding to this issue, so it's still open.

I have already made a PR

@rohitPandey469
Copy link
Author

@Sujal267 Nice, link it here then.

@Sujal267
Copy link

PR

@rohitPandey469
Copy link
Author

In the body of the PR write somewhere Fixes #PR_NUMBER, bot will automatically link it with this issue

Copy link

github-actions bot commented Apr 4, 2024

This issue is stale because it has been open for 30 days with no activity.

@github-actions github-actions bot added the stale label Apr 4, 2024
Copy link

This issue was closed because it has been inactive for 14 days since being marked as stale.

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

No branches or pull requests

4 participants