lunarmarathon / graphtotable Goto Github PK

@LunarMarathon kindly assign me this issue under Hacktoberfest 2022.

The current UI of the website is basic. I would like to improve the UI of the website to make it attractive and more user-friendly.

Problem :Just noticed your site and saw that in case of large tables we have to scroll a lot to go to the top of the page again to perform any task.

Proposed Solution: I Can add an auto scroll to the top button on the bottom right corner of the site with its theme matching with that of the site.

Screenshot for Reference:

Describe the bug
When switching to dark mode, text inputs are not readable (because of the lack of color contrast).

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Graph to table'
2. Write any text inside any text input
3. Switch to dark mode (if you're not already)
4. The text inside the inputs isn't readable

Expected behavior
I expect to read clearly the text inside the text inputs even in dark mode.

Screenshots

Desktop (please complete the following information):

• Browser: Google Chrome (106.0.5249.119)

It can be improved and also please consider this under hacktoberfest

I would like to improve the UI of the page.
Can you assign me to this issue?

You have very simple buttons animations and basic design.
I can Edit the Buttons ,add more cool animations .

Currently only one - one node connections can be made -

Allow multiple nodes to be added -

When the input is more than one word, the autocomplete doesn't show the suggestion when words other than the first word is typed ex:

But myt- doesn't get Greek mythology suggestion

Confine it to the size of the input

The Color Scheme can be improved. I can try some of new color scheme on it.
Kindly assign me this issue

Sometimes the text goes underneath like this

make changes to avoid that

I had an idea that after two inputs fields are done then when user is at second field the user can click enter button on keyboard and automatically the generate table function will be called . Like for example when we enter our username and password on any website login so after user clicks the next btn is automatically called just like that.

Let me know if this feature is needed or not I would start working accordingly.

we can add login and sign in button for the users.
we can give in large font the button to create table
we can add navigation bar in this
we can add footer also which provide further information about the owner and the website
make website more interesting by adding background images, hovering effect to the buttons, good colour combinations,

Currently there's only download CSV option. Add an import option

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://graphtotable.netlify.app/'
2. Click on 'inspect and open the devtools'
3. shrink the screen
4. See error

Screenshots

it will be a pleasure for me to fix it and an opportunity to improve my CCS skills !

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

In the above Image I think there should be a condition given that when any one of the two input are kept empty then it should give a alert message. As we see in the above image the input field when are kept empty and we generate table then it puts empty columns. So I feel this needs to be fixed. Let me know what you think about it.

Kindly assign me this issue.

• heading -> center (thought it was already done sometime back)
• scroll down btn
• add btn (just adding nodes w/o display) instead of generate btn (functions like display)
• edit and del changes appear only on clicking generate btn after edit/del and gen requires i/p each time (alert for add, remove alert for generate)
• change the name from generate to display if needed after all changes
• preview of table to be imported (add a diff btn), option to append existing table/overwriting existing table(/add new rows only?)
• gen needs to be clicked to show changes after min, max nodes sort too

The check-boxes are present for the users to click when they have reviewed the respective nodes but that info isn't saved anywhere.

This would require to check and list which ones have been checked and set them as checked again when imported. I think this needs to be combined with the import and export options for the table but still seems too messy.

Suggestions to solve this in a different manner are welcome. Maybe a json file or mongodb could be used?

Not a major priority, but I think it could be nice to have a link/icon to the github repo on the site. In general I think the site could use more information as far as instructions.

Would love to contribute to this project in any way possible btw 👍

Your Website does not have a navbar ...
I can make a beautiful NavBar with the matching theme ....

Expected:

Describe the bug
The text content is taken to create the id for the row. And again the content is matched with id to scroll to that row. So when 'Climate change' is added (this is just one i/p), the id becomes Climate and then Climate change doesn't get matched with Climate so the click doesn't work or goes to the top of the screen.

It needs to be fixed such that the id is different when another word starting with climate is added (id can't be climate for both) as well. So it's better to use the whole word separated by underscore for id and the space b/w the words can be replaced with underscore and matched (The i/p remains the same, w/o underscore)

They are currently on the left

Your main/hero text is very basic with just text shadow....we can make it more eye catching element by animating it and using more colors and Design.

Even after a clear screen, the div is there we can remove it after clicking on the clear screen and I can improve the button styling
Please assign this issue to me @LunarMarathon

I'm assigning this to myself for now, if anyone would like to try it instead, let me know

This is how it is right now:

Please make the same alignment changes for the table that's generated by the search button as well

On scrolling left and right, the first column could be kept as it with only the other columns affected by scrolling.

This needs to be optional since it might sometimes not be required on phones(or desktop too) so a button can be used to freeze or unfreeze the first column

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

Once I click 'Arctic,' say, I wish to go back to 'Oceans' but the node is somewhere far in the row, it'll require some time to find it. A keyboard shortcut (left arrow) would make it a lot easier to navigate

Right now, the hyperlinks work to go to the position of the key row but if the back shortcut is able to go back to the 'Arctic,' node of 'Oceans' row (Going back to exact node and not just the row), that would be a bonus

Describe the solution you'd like
Described above

Describe alternatives you've considered
Search can't be used to click back to 'Oceans' row

Every site needs a dark mode today
@LunarMarathon Assign me tis

VIA SHORT VIDEO I WILL LINK THEM
HOPE IT IS A COOL IDEA

The content is too small for phones, could be made more responsive

Sort the rows by minimum number of nodes(cells) and maximum no. of nodes(cells)

Is your feature request related to a problem? Please describe.
improvement in css required and nav bar makes the site more interactive.

Describe the solution you'd like
navigation bar can add more optionsto the site.

@LunarMarathon Kindly assign me this under Hacktoberfest 2022.

Hello, I would like to update the readme, add the mock gives running application and text. If it makes sense, you can assign me this issue.

Alignment of the check noxes can be improved here

Hi @LunarMarathon

What about adding the project contributor's details in footer of readme file???
Please assign me for this issue . I want to work on it. Hope you will like it.🙂