Front-end improvements

[MutlaqAldhbuiub]

Problem

The problem is the website performance is so slow, and it's so hard to browse
and I think there's code that is not readable at all, for ex. in card.js there's a lot of code that no need for (I've deleted a little bit of it during reading and understanding the code)!

Solution

I've designed the front end and made it easier to browse check it out

Notes

• I don't know what's the point of updating MaxRowLength every single time someone enters a new data point in google sheets.
• Performance is so slow because of google sheets because of the google sheets request that takes more than 3s to load!
• A lot of external libraries, such as Axios and jquery, both of them slow the website because it's a client-based website(HTML, CSS, JS) and there's an alternative built-in same exact functionality.

---

Thanks to @sudomaze for helping me with the review of the design.

[zaidalyafeai]

@MutlaqAldhbuiub thanks for the comments, I really like your new design. You can go ahead with a PR. Do you have any suggestions for speeding up the google sheets request?

[MutlaqAldhbuiub]

Thanks, @zaidalyafeai for the kind answer.

I think if we change the source of the data or even if we could do something like Google Sheet Trigger every single time someone enters a new record in the sheet automatically push that to an SQL database or file.

[zaidalyafeai]

I prefer if we don't depend on any external databases or websites. I don't think 3 seconds is that bad?

[MagedSaeed]

Thanks @MutlaqAldhbuiub for your PR and enhancements. They really look elegant. Hopefully, I can find a time soon to review.

[MutlaqAldhbuiub]

The results of various studies show that nearly 50% of Internet users expect web page load times of less than 2 seconds. so 3 seconds is a long time to render a page.
I will try my best to solve that and find another way to render the table.

Thanks all @zaidalyafeai @MagedSaeed

[zaidalyafeai]

Thanks @MutlaqAldhbuiub, btw the UI is messed up in mobile view.

[alonemazin]

Hello @zaidalyafeai

• I refactord index.js and have did re-styleing some images & css, and make it full-responsive for mobile view.
• Currently no need to update MaxRowLength anymore.

[ma7dev]

Regarding #10

@zaidalyafeai

We were considering doing something similar to Huggingface's Datasets page. We might need to use a templating engine like jekyll or some other framework and change the DB option, but we want to change a bit of the design in that direction. I do agree it might be hard to read the text as it is a light-blue background and white text, so do you have any suggestions regarding which color you prefer for the task's style?

[zaidalyafeai]

For me, I like the current design more. If there is anything to change, maybe remove the bullets from the tasks.

[alonemazin]

Hello @zaidalyafeai

If i remove the bullet points will be hard to notice how many tasks for the row

So i suggest to keep it if you don't want the new task style

But how about the striped table do you like it with old task style? or should i also remove it and just update the card.js?

[alonemazin]

and there is another solution that all the bullets will remove except that has more than one task

for example:

let me know what you like

[zaidalyafeai]

I like this one, maybe also increase the width of the task column if possible.

[zaidalyafeai]

In mobile view, the toggle button doesn't work.