Create supportive labels when mouse is hover over icon

[kshitijrajsharma]

Looking at icon only it could be hard to know about what those buttons are for , Creating a supportive label when mouse is hovered over a button would be helpful

[srishtig2412]

Hello, I am an outreachy applicant, Can you assign this issue to me ?

[kshitijrajsharma]

Yes sure ! Thank you for your interest @srishtig2412 Welcome to fAIr !

[srishtig2412]

Hey, actually I have recently started with open source contributions, could you please help me with about what label needs to be displayed ?

[kshitijrajsharma]

Yes Sure ! @srishtig2412 , We need to find a label for eg : Icon on last is for Zoom To Layer , Similarly , you can figure out what those buttons do and provide a assistive label respectively

[srishtig2412]

So, do we have to take those buttons from hotosm's website and label them or there is some other page for that ?

[srishtig2412]

Actually, I know how to add a label but finding it difficult to locate as to which buttons are to be labelled ?

[kshitijrajsharma]

oh sorry ! May bad , I forgot to provide stage URL , This is in early development stage but will be good to go through ! http://fair-dev.hotosm.org/ , Frontend code is in here . https://github.com/hotosm/fAIr/tree/master/frontend
Let me know if you need more walkthrough !

[kshitijrajsharma]

difficult to locate as to which buttons are to be labelled

@srishtig2412 Once you go through the stage server you will notice several buttons / functions leading to different page and functionality. You can enhance any as you find fit and think more user-friendly !

[srishtig2412]

Do we have to connect react with Auth0 so that credentials for environment could be set and run the code ?

[srishtig2412]

Can we make requests for changing the display of the above site also?

[kshitijrajsharma]

@srishtig2412 Yes , Any contributions according with your expertise is welcome ! for oauth , You need backend running as well !

[srishtig2412]

Hello, i am not able to figure out those icons aren't visible on screen. Is there something else I can add on the webpage??

[srishtig2412]

I have made a link for login form/register can I make a PR for the same ?

[kshitijrajsharma]

Sure go ahead !

[srishtig2412]

I am unable to add the js for the login icon so I added a link I hope it works

[srishtig2412]

Hi, actually I wanted to update the documentation so, what all needs to be added there or is there any particular format for it or file for it??

[kshitijrajsharma]

@srishtig2412 Hi srishti Thank you for your interest , I plan to filter and explain issues better by first week of April , Will comeback and keep you in loop !

[kshitijrajsharma]

Hi @srishtig2412 , To Explain This issue , You can visit : http://fair-dev.hotosm.org/ to see what is current version of fair looks like , it is still in development to functions may be incomplete and not working , In order to explain users better what buttons do plan is to include tooltip for the buttons to explain what they do like this , This is example of fetch data icon on Training dataset edit page , I have added tooltip for that button , similarly plan is to add tooltip wherever possible to make navigation easy and user will be able to know what button does what ! If you find it confusing which buttons do what that is excellent point to start you can ask / raise the questions and fill the gap you faced with tooltip or any other way possible so that other people coming to fair will understand it !

[srishtig2412]

Hey, actually the problem was that I could only see the navigation bar on this page even if I ran the backend first

[kshitijrajsharma]

oh okay ! sorry @srishtig2412 , I will setup the installation documentation first then

[kshitijrajsharma]

I have created a issue to track this problem here -#86 to unblock you as well @srishtig2412

[kshitijrajsharma]

Just noticed documentation is there , Can you check and forward the error you are getting to here or on this ticket ? Please ! That will help me to create a documentation covering error you are encountering @srishtig2412
For Frontend : https://github.com/hotosm/fAIr/tree/master/frontend for Backend : https://github.com/hotosm/fAIr/tree/master/backend Check Github Actions Workflow for both backend Build and Frontend Build : https://github.com/hotosm/fAIr/blob/master/.github/workflows/backend_build.yml https://github.com/hotosm/fAIr/blob/master/.github/workflows/frontend_build.yml .env file is necessary for both backend and frontend , Oauth Setup will be required , You need to register your local to osm oauth , fAIR uses oauth2.0

[srishtig2412]

Hello , really sorry for checking the message late ,actually I was busy with my university exams. Can I update the error in a few days ?

[kshitijrajsharma]

Sure no worries !