[Feature Request]: Revamp the UI of the leaderboard / dashboard

[Priyansh61]

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

Currently the UI of the leaderboard is very simple and not attractive, so we need to make the leaderboard a bit attractive for the users.

Describe the solution you'd like

We can take some inspirations from the GSSoC leaderboard and make it that way, this will make it attractive and also rejuvinating.

Describe alternatives you've considered

No response

Developer Help

No response

[abansal15]

@Priyansh61 i would like to work on this issue please assign this this issue to me

[Priyansh61]

@abansal15 Please get your previous PR merged first, then you can work on this

[abansal15]

@Priyansh61 my previous pr has been merged now please assign this issue to me

[abansal15]

@Priyansh61 can you please guide me how to proceed ...

[Priyansh61]

@abansal15 see the issue description

[abansal15]

@Priyansh61 can you please provide me some resources for making leaderboard attractive as i am facing problem in fetching the details of the people..

[Priyansh61]

@abansal15 Let me know your approach how do you think you are going to handle it?

[abansal15]

@Priyansh61 I will change the CSS of the file. But I am facing an issue that in my local host why leaderboard status or data is not coming?

[Priyansh61]

@abansal15 Could you please show the console logs becuase the leaderboard data is visible in the local dev setup also ?

[abansal15]

[Priyansh61]

@abansal15 Please pull from the upstream git pull upstream main

[abansal15]

@Priyansh61 can we change the theme for this page ?

[abansal15]

A theme like this ?

[Priyansh61]

NO keep it the same since that is global, just change the layout as given in the desciption

[abansal15]

@Priyansh61 ok

[abansal15]

BSOC.-.Google.Chrome.2023-07-11.17-38-53.mp4

[abansal15]

@Priyansh61 is it ok ?

[Priyansh61]

@abansal15 I would honestly like to know your own review regarding the changes you made?

[abansal15]

@Priyansh61 I am somewhat confused about the animation I have put into the website and rest i think it is fine and I would be very happy about your reviews and the changes.

[Priyansh61]

@tushitshukla03 @prernadabi23 @thejaysharma Could you please review the designs and provide the feedback?

[prernadabi23]

@abansal15
These are the changes I can see as of right now:

1. Remove animation.
2. Space between the three top participant boxes. Create some distance and give higher priority to the first one by positioning it
   slightly higher than the others. That would be good.
3. Make the medals in the top three sufficiently big so they look good at least.
4. Don't change the theme. Keep it as it is for the header and even the PR lists.

Will these changes be okay, @Priyansh61?

[abansal15]

@prernadabi23 ok i will make the changes

[abansal15]

@prernadabi23 now is it ok ?
i have removed the animation and done the required changes.

[Priyansh61]

@abansal15 Dont you think the medals look a bit odd? Can we use something else in its place?

[abansal15]

@Priyansh61 can you please suggest me something ?

[pred695]

How about this?

[pred695]

Also, just a suggestion, it can be good if the names can be linked to the github links of the accounts?, or just create a new column for the github user-id as suggested in the suggested-layout of the issue.

[abansal15]

@Priyansh61 what is your opinion ?

[abansal15]

Also, just a suggestion, it can be good if the names can be linked to the github links of the accounts?, or just create a new column for the github user-id as suggested in the suggested-layout of the issue.

what is the use of this ?

[pred695]

Also, just a suggestion, it can be good if the names can be linked to the github links of the accounts?, or just create a new column for the github user-id as suggested in the suggested-layout of the issue.

what is the use of this ?

It is conveyed in the suggested design, also, it would be more intuitive if everyone can see the github accounts of the users in the leaderboard.

[abansal15]

@Priyansh61 I will do what you will guide me ? please guide me on what should i do.

[abansal15]

@Priyansh61 is this image ok ?

[Priyansh61]

or one more suggestion instead of fancy labels we can just use the images linked with the google account only, if there is no image then google shows the name icon use that.

This way it looks elegant and pretty, and then we can just position the images depending on the ranking.

[abansal15]

@Priyansh61 from where I can get the API end point which returns information about the authenticated user, including the profile picture URL.

i want to put that here

[Priyansh61]

In the app we are using google oauth using the function signInWithPopup inside src>composables>useSignInGoogle.js
from there we can get the image of the user like below

  try {
    const result = await firebase.auth().signInWithPopup(provider);
    const user = result.user;
    const profilePicUrl = user.photoURL;

Buut like currently we dont have this image saved anywhere in the database so this needs to be saved somewhere to be displayed in the database.

NOTE : Please dont play with this and let us know your approach before moving forward.

I am looping in @prajjwalkapoor @arminpatel @Tusharjain123 @JawHawk to see if there's a better way to do this.

[abansal15]

Ok @Priyansh61
Can you please provide me some resources to achieve this task?

[abansal15]

@Priyansh61 if you are ok may I raise the pr of only showing the top performers and other ui changes I will currently show the names only and can we create another issue for fetching the profile photo ?

[Priyansh61]

No this needs to be done in this issue, that's why it is a difficult one

[abansal15]

@Priyansh61 why this is coming in console proxy type when i write console.log(profileImageUrls.value);

[Priyansh61]

But you didnt extract profile from the google login, so the steps would be like on google login get profile image, save it and then use it.

[abansal15]

@Priyansh61 but i am fetching it from firestore and it stores the url ?

[Priyansh61]

I couldn't understand. Could you elaborate?

[abansal15]

@Priyansh61 now i am getting only my image url in consoling not others ?

what to do ?

[abansal15]

@Priyansh61 i think i will i not be able to fetch the profile images i have treid my best therefore please create a new issue for fetching the image so that if anyone else can do it . may i only raise the pr of the ui i have made ?

[abansal15]

@Priyansh61 ?

[JawHawk]

@abansal15 Will inform in few hours

[JawHawk]

@abansal15 @Priyansh61 we have the GitHub username ? Will this work for now then ?
https://github.com/<github_username>.png , This will display the GitHub profile image

[abansal15]

@JawHawk users are logging from their Google account. I think we don't have their GitHub usernames.

[JawHawk]

Then we have to store the google photo when google login

Something like this, then we can get the user profile photo link in getCollection

I am unfamiliar with the correct way for collections. @Priyansh61 Check if this is okay ?
@abansal15 Can you do it ?