User Portal Redesign: Update post ui in user portal

[noman2002]

Describe the solution you'd like
Update post ui in user portal.
https://www.figma.com/file/WksD4uIa5sQJMIk3pR4l0c/Talawa-Design-System-(Official)?type=design&node-id=307-212&mode=design&t=H7b4fN3TuT0jTicu-0

Approach to be followed (optional)

Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359

[disha1202]

Hi
I would like to work on this.

[palisadoes]

@Ayush-sss, @disha1202

Please collaborate on these issues so that we reduce the duplication of code

• Admin Redesign: Update the post ui in admin portal #1953
• User Portal Redesign: Update post ui in user portal #1954

[palisadoes]

@disha1202

I merged this PR and issue, not realizing it was a duplicate.

• USER REDESIGN: redesign the Posts screen for the talawa user portal #1514
• Redesign of Posts screen for talawa user portal. #1896

Are you still working on this?

There needs to be an update to the design. Though there is a horizontal scroll bar for the pinned posts it's not obvious that the feature exists.

1. A person using a computer without a touch screen will find this difficult to use.

2. There needs to be an intuitive way to click next / prev arrows, or dots like this:

   1. The website shown here also has the pinned posts automatically scrolling which may be the better approach.

   

@aashimawadhwa @rishav-jha-mech Do you have any suggestions to add?

[disha1202]

@disha1202

I merged this PR and issue, not realizing it was a duplicate.

• USER REDESIGN: redesign the Posts screen for the talawa user portal #1514
• Redesign of Posts screen for talawa user portal. #1896

Are you still working on this?

There needs to be an update to the design. Though there is a horizontal scroll bar for the pinned posts it's not obvious that the feature exists.

1. A person using a computer without a touch screen will find this difficult to use.

2. There needs to be an intuitive way to click next / prev arrows, or dots like this:

   1. The website shown here also has the pinned posts automatically scrolling which may be the better approach.

   

@aashimawadhwa @rishav-jha-mech Do you have any suggestions to add?

Yes, I'll add this feature for better user experience.

[palisadoes]

Thanks

[disha1202]

Hi @palisadoes

Is this okay?

test.mov

[palisadoes]

1. Yes, it does. @aashimawadhwa @rishav-jha-mech @DMills27 @Kevoniat What do you think?
2. Do we have a mechanism for removing pinned posts? Is there an archive option, a convert to regular posts or do we have to delete it? It's out of scope for this issue, but it wouldn't be good to have 100 pinned posts to scroll through

[disha1202]

2. Do we have a mechanism for removing pinned posts? Is there an archive option, a convert to regular posts or do we have to delete it? It's out of scope for this issue, but it wouldn't be good to have 100 pinned posts to scroll through

Yes, the admins and super admin can unpin posts from admin portal.

[disha1202]

@palisadoes

What about promoted posts (advertisements)

1. Should we display advertisements similar to pinned posts in a horizontal scrollable section?
2. Or like normal posts?

This is how it looks right now.

[disha1202]

@palisadoes
This is not in the scope of this issue but right now the number of posts fetched from the server is hardcoded. It only fetches 10 posts. Ideally we should implement infinite scroll or pagination.

And if we implement pagination/infinite scroll, then this will not work as expected. We'll need two different queries, one for fetching only pinned posts and other for fetching normal posts.

I'll create a separate issue for it after I am done with this.

[palisadoes]

Thanks. The desire is to have infinite scroll for unpinned posts. Check @aashimawadhwa and @rishav-jha-mech on slack for details

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[disha1202]

Working on it.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Cioppolo14]

@disha1202 Are you still working on this?

[disha1202]

Working on it.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[palisadoes]

@disha1202 Are you working on this?

[disha1202]

Working on it.