Improvements to the overall look and feel

[minhnhatnoe]

Just going to be quick and dirty with this issue. Let me know if you have any questions.

On the submission page (for example, https://debug.codefun.vn/beta/submissions/1190)

1. The left panel can be better if split into a 6x2 board, with headers on the left side and information on the right.
2. Information for owner, problem and submission ID can be attached with hyperlinks.
3. The "Debug Score: xxx" line can also be split into a table row. In all seriousness, I despise colons (:) and unaligned (not tabled) information. Also limit the number of digits after the dot (it's something like 15 now).

On the main page (https://debug.codefun.vn/beta)

1. Be more generous with the "Top users" board. By that, I mean: Increase the border size, align left all columns, increase the number of users shown (unless you have other things to show). This applies to the rankings page also.
2. Have a line about this version being still in active development.

On the problems page (https://debug.codefun.vn/beta/problems/all/1)

1. Please show more information for each problem
2. Why is displaying this page fetching the site for every single problem on the page?
3. Instead of pressing arrow, present a way to more quickly scroll through pages. Maybe add a search box too.

[kbnopro]

The left panel can be better if split into a 6x2 board, with headers on the left side and information on the right.

Tables can look very complicated, but will find another way to split the info, possibly into two group

Information for owner, problem and submission ID can be attached with hyperlinks.

Hyper link for owner exist but I forgot : ) so pls wait for the #23 I will fix it

The "Debug Score: xxx" line can also be split into a table row.

As I said

In all seriousness, I despise colons (:) and unaligned (not tabled) information

Can u propose further detail of how u want it to be

Also limit the number of digits after the dot (it's something like 15 now)

Will fix, but not emergency.

Be more generous with the "Top users" board. By that, I mean: Increase the border size, align left all columns

Will give more size if u want, and will align left for text

increase the number of users shown

I guess no because that has to deal with responsive stuff, and the top 10 is fine just like many other websites

Have a line about this version being still in active development.

Agree

Please show more information for each problem

Also requested by Mr.HDP but waiting for API, u can detail the information and propose the API

Why is displaying this page fetching the site for every single problem on the page?

For better UX, and can be disabled (not recommended)
I will further optimize the behaviour (possibly use some client-side fetching with static rendering) but for now, it is what it is.
Hope the server is still fine

Instead of pressing the arrow, present a way to more quickly scroll through pages.

Agree, will do the new pagination. I find that annoying too.

@minhnhatnoe

[minhnhatnoe]

Tables can look very complicated, but will find another way to split the info, possibly into two group

I don't think that tables will be complicated. It's just adding another line. Actually, the trick is to not let the vertical line cross through the whole thing; just let it cross the small table down below. As for the score display, maybe you don't even need to split the box into two sides. A cooler (I hope) solution would be making it a giant green progress bar, or maybe make it a red-to-green-gradient progress bar.

Have fun with the frontend. Say the word if you need any additional help from me :D