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

Design activity card #1091

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Design activity card #1091

wants to merge 5 commits into from

Conversation

brrkrmn
Copy link
Collaborator

@brrkrmn brrkrmn commented Jan 29, 2024

Summary

The activity component is redesigned according to the new proposed design .

Closes #1090

Changes

  • If there are multiple creators of an activity, their avatars get stacked in the card. 3 creators get stacked at most, after which the number of remaining users are displayed in the last avatar. On desktop, overlapped avatars get separated on hover (see video in the section).
  • Category section is separated into its own component, using MUI Chip component. Each category has a unique background color that is accessed from the colors.js file.
  • The introduction of activity is displayed under the title.
  • User's tag is placed under the username.

Screenshots

Desktop

desktop

Mobile

Multiple Creators Demonstration

Screen.Recording.2024-01-29.at.1.06.51.PM.mov

@brrkrmn brrkrmn mentioned this pull request Feb 3, 2024
2 tasks
@NdibeRaymond
Copy link
Collaborator

@brrkrmn what happens if we have much more creators (maybe 10 or more)? can you attempt this and make a video so we see how the hover effect works in that case?
Wondering if it will overflow or wrap. This should also be addressed in the design, was it?

Copy link
Collaborator

Choose a reason for hiding this comment

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

in the future we might want to move all our colors into this file (you can create a task for this if you want)

@NdibeRaymond
Copy link
Collaborator

needs rebase

Copy link

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

@brrkrmn
Copy link
Collaborator Author

brrkrmn commented Feb 29, 2024

@brrkrmn what happens if we have much more creators (maybe 10 or more)? can you attempt this and make a video so we see how the hover effect works in that case? Wondering if it will overflow or wrap. This should also be addressed in the design, was it?

It'll look like what we have for +3 creators, showing 3 circles at most and indicating the number of the remaining creators. Like this:

Screen.Recording.2024-02-29.at.2.04.57.PM.mov

This will only be applicable when the 'team' feature is made available. I'm not sure how teams are going to look exactly but if they have their own avatars, we can use the name and avatar of the team instead of showing all the creators in the activity card. And then we can show all creators in detail in the team's page or activity details page. In that case, we should have a larger section for the creators to be able to show this many.

Copy link

github-actions bot commented Mar 1, 2024

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

Copy link

github-actions bot commented Mar 1, 2024

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

Copy link

github-actions bot commented Mar 5, 2024

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

Copy link

All pre-commit checks passed ✅✅✅

brrkrmn and others added 5 commits July 17, 2024 03:25
* fix creator profile margin
* fix projects section margin
* fix wider project css issues
* fix eslint issues

Closes #1005
Signed-off-by: Ndibe Raymond Olisaemeka <[email protected]>

Co-authored-by: Ndibe Raymond Olisaemeka <[email protected]>
* create views and utils methods to recommend projects
* create api function to receive recommended projects in the frontend
* modify project filtering
* refactor recommend projects function

Issue: #1013

Signed-off-by: Ndibe Raymond Olisaemeka <[email protected]>
Co-authored-by: Ndibe Raymond Olisaemeka <[email protected]>
* style page and add login card
* fix misaligned login form in search results
* change styles for creator search
* implement no results found design
* make results one row
* made some major refactors

Issue: #802

Signed-off-by: Ndibe Raymond Olisaemeka <[email protected]>
Co-authored-by: Ndibe Raymond Olisaemeka <[email protected]>
* minor modifications to the admin model
* add admin models management to admin.py
* implement effective signals to handle
  admin models instances, addition,
  modification and deletion with proper
  cleanup

Issue: #1094

Signed-off-by: Ndibe Raymond Olisaemeka <[email protected]>
Co-authored-by: Ndibe Raymond Olisaemeka <[email protected]>
refactor
add  multiple creators section
create categories component
refactor the use of category colors, translation file, and rendering of the tags
separate creators section into its own component
add unpublished icon to card
update imports
@NdibeRaymond
Copy link
Collaborator

@tuxology this has been rebased so we can focus on testing before merging to staging

Copy link

All pre-commit checks passed ✅✅✅

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.

(activity): Redesign activity card
4 participants