CSS for Mobile Responsiveness - Coding Competitions Page

[NayakPenguin]

The problem we are trying to address is the poor mobile responsiveness of the table on https://algolisted.com/coding-competitions. The table appears as intended when viewed on a laptop or display with a width of 1100 pixels or more. However, when the display width is smaller, the table becomes distorted and difficult to use. Our goal is to improve the appearance and usability of the table for users on mobile devices.

Laptop screenshot:

Phone Screenshot :

Design I want on mobile responsiveness : Sorry for the bad drawing, coz I don't know how to use figma :)

[JordanAdair]

Feel free to assign me to this!

So you want the table to turn into individual cards?

How many cards do you want to fit in the screen?

Is there any specific interactivity you need? i.e. What happens when someone clicks the card?

[NayakPenguin]

Thank you for your interest, @JordanAdair. I will send you a clearer drawing in a few minutes to help you better understand the concept. I will also answer these questions.

[NayakPenguin]

• So you want the table to turn into individual cards? Yes, it is exactly like that.
• How many cards do you want to fit on the screen? All the cards can be seen, the data is actually less than 20 so it would not be an issue.
• Is there any specific interactivity you need? i.e. What happens when someone clicks the card? The competition name is clickable and is blue in color, and when you click you get directly to the respective link.

[JordanAdair]

Should we have the card itself re-direct the user instead of a link? Sometimes it's difficult for some people to click links on mobile devices, especially if the cards are on the smaller side.

[NayakPenguin]

I agree that your recommendation is a good one. Let's move forward with it. Additionally, feel free to make small decisions on your own to improve the page.

[JordanAdair]

Sounds good. I'll start working on this later tonight.

[JordanAdair]

When I try to access the "Coding Competitions" tab I get an infinitely loading screen alongside these error messages:

I tried it on a few different branches and IDEs but I still get the same result.

Looks like a CORS issue.

According to Google, to fix this error, you can try the following steps:

1. Check if the server is configured to allow CORS requests: Make sure that the server at the URL https://script.google.com/macros/s/AKfycbzXyVH1o6CzzJUfLN0qC-EscTKQeKouAUlU3oBs_S85WvB13wPHuawZLK43QJrqBua3Ng/exec is configured to allow cross-origin requests. If the server is not configured to allow CORS requests, you will need to contact the server administrator and ask them to enable CORS.

2. Use a CORS proxy: If the server is not configured to allow CORS requests, you can try using a CORS proxy to make the request. A CORS proxy is a server that acts as an intermediary between your client and the server, adding the necessary CORS headers to the response.

3. Use the no-cors mode: If you are making a request using the fetch() function, you can try using the no-cors mode by setting the mode option to 'no-cors'. This will prevent the browser from blocking the request, but it will also prevent you from reading the response from the server.

[NayakPenguin]

Is this in localhost? Does this https://algolisted.com/coding-competitions open on your system? This is the first time any of the users encountered this issue, this might be a potential issue.
If the issue persists after restarting the localhost, I might have to consider adding the "no-cors" option to the fetch function to troubleshoot the problem.

[NayakPenguin]

If the issue persists, you can try testing the responsiveness using a dummy data set. On my end, I can then use the real API to fetch the data.

[JordanAdair]

It might be an interaction with my Privacy Badger and/or uBlock Origin plugins. I'm in bed right now so I'll have to check tomorrow.

Is this in localhost? Does this https://algolisted.com/coding-competitions open on your system? This is the first time any of the users encountered this issue, this might be a potential issue.

The issue happens on both local-host and the live website. Same CORS error.

[NayakPenguin]

Ok no issues, do it tomorrow :)
Yes, I think it might be a Privacy Badger and/or uBlock Origin plugins thing, still, I will ask my friends to check it just to ensure that the code is fine.
So, you can try using the dummy data when you work on it.

[JordanAdair]

Okay I disabled Privacy Badger and it fixed the issue.
We might want to look into addressing this, though. Privacy Badger is an extremely commonly used extension.

[JordanAdair]

Please let me know if there is anything else you want me to do for this issue.

[NayakPenguin]

There is a challenging task that may require some thought to complete - it is the coding sheets that you were previously working on. It should be an exciting task for you.

If you visit the https://algolisted.com/coding-sheets/two-pointers-lc page, you will see that we have tags on each. One of these tags is the main tag - (they have a slightly darker border). I want all the questions to be listed under this main tag.

The main tag can be something like "Day 1" or "2 Sum problem similar," as seen above, etc.

Check the example given below. Of course, the UI would be similar to ours and we would have the main tag on the top left. All "Day 1" / main-tags questions would have a single tag on the top left.

This is just for the desktop version.

I hope that I have clearly conveyed the task.

[JordanAdair]

I'm a bit confused. Is this a new issue, or does this have to do with the Competitions page? Is this desired mobile-specific behaviour or are we doing a re-design in general?

[NayakPenguin]

This issue pertains to the design on desktop mode for the coding sheets page and is not connected to the Competitions page.

Here is a picture that may provide further insight.

I will create a new issue, on the main issues page for this as well :)

[JordanAdair]

Alright, is there anything else that needs to be done for this issue or can we close it?