Adjust the layout of the radar page

[jacksono]

The radar should be as in the same height as the information car. If we consider the page is divided into two and the left side of the divided part allocates 60% of the page while the right side allocates 40%.

The radar should be on the left side and the information card should be on the right side.

There should be a gap between the radar and the information card.

There should be a gap between the navbar and the radar; information card and the right-side screen limitation. Responsiveness of any type of screen and mobile should also be considered

Screenshots

[OzgeOzkaya]

Hi @jacksono ! Thanks a lot for the PR. I will provide my comments/questions below:

• May be we can increase the information card width a bit because the lines are breaking down after 3 words(average). I think, we can increase it until each text line has at least 7 words. This would increase the readability of the contents.

I think, quadrant page info card seems like the width we should have, at most. You can think like at most as the width of quadrant page info card.

• We could centerize the title for desktop:

• The centerized title can also be in the quadrant pages

• The mobile appearance is really good. At least we don't have any issue with the overlaps. I have a couple suggestions for it:

1. You may remove the information tool tips from the mobile layout since they are just hoverable
2. Could you please set a background for each square of the disaster phases as in the radar colors. I.e. preparedness -> Green, Response -> Red

• For the mobile quadrant page:
  1. Again the information card is really tight, the texts are hard to read
  2. The list looks just a bit odd as its gaps, may be you can check it

3. This one is important, we should let the user filter the quadrants for decreasing the number of blips on the quadrant. Could you please add the filtering button to there.

I think that's pretty much it. Really appreciated work @jacksono Thanks a lot!

[jacksono]

Hi @OzgeOzkaya I have made most of the changes you suggested in the comments. The ones that we will need to align on one are:

• Centering the title on desktop and quadrant pages. - I need more clarification.
• Setting background colors for each quadrant in the mobile view - This has proved challenging to do. An alternative is to use colors on the quadrant titles only, or to show the radar outline with the respective colors.

We can have a call on Monday 19th September at 4:15pm (GMT + 3) to go over these missing parts.

[OzgeOzkaya]

Thanks again @jacksono ! After our talk, I listed the fixes as below:

• Color the texts of quadrants for mobile (check if the outer circle can appear)
• Filtering section to the top, no gap
• Fit the stage list to the information card as default

[jacksono]

Hi @OzgeOzkaya I have made the fixes we discussed yesterday. Kindly take another look. For the quadrants on the mobile view I went with only adding color to the text since there was no direct and clean way to have the outer circle appear.

[OzgeOzkaya]

Dear @jacksono thank you for your work. I just realized that the gap between the filtering section and the top of the page still remains. Also now this issue appears in the desktop view as well. If you could kindly check and fix this issue, I will merge the PR. Thanks a again!

[jacksono]

still remains. Also now this issue appears in the desktop view as well. If you could kindly check and fix this issue, I will merge the PR. Thanks a again!

@OzgeOzkaya I may have misunderstood the requirement yesterday.

It is currently like this?

Do you mean that the gap should be removed so that it looks like this:

[OzgeOzkaya]

Good to go! Thanks a lot @jacksono !