Fix the layout on the page

[ksivasenthil]

When viewed in a small device, the page has controls kissing each other. The route suggestion is displayed, the text for navigation overlaps with the circle displaying the CO2 emission.

Sub tasks for this issue are -

• [x] :necktie: Keep the control well spaced with the view port shrinks
• [x] :haircut: Trim the navigation content when the view port shrinks
• [ ] :diamond_shape_with_a_dot_inside: Whenever the navigation content is shrunk, add ellipsis (...) for the content

[ironicicon]

Siva, Can you share the azure link?... (i have created index.html in my local machine and let me know is this the issue you are talking about, (part of the issue though;) )

[ksivasenthil]

:+1: indeed. it is just one issue. The other one is to do with

Look @ the bottom navigation instructions which overlap if the text is too large.

[ironicicon]

I am taking Care of it..let me complete this Task first

[ironicicon]

Shiva, I have found a fix for the issues mentioned, kindly look into the below screenshots.

[ksivasenthil]

@ironcicon, have you hosted the changes to azure? I do not see the changes when I browse greendrive.azurewebsites.net

[ksivasenthil]

@ironcicon please commit your changes. Let us use features of Git for code control.

[ksivasenthil]

@ironicicon, I have made some changes to the styles for the input control zone. Changes are checked-in. I am not sure if the experiment that you have done with Chrome is similar to that or different.

Do send me your observations. For the text overlap in the step instruction, I have noticed, the markup is generated by the google maps service. Do you have plans to do something to the markup or is there any other way out?

Let me know your thoughts.

[ironicicon]

@ksivasenthil I havent checked in, since i assumed that you were mentioning about versioning.. My Bad.. I will look at the greenbox and will update the same..

[ksivasenthil]

@ironicicon please do check again, one more came through ;). This one was for the navigation instruction. :smile:

[ironicicon]

I was trying to add the (...) "trimmed content" to the navigation Instruction, but i was not able to pull it off.. It seems that , when i click on the trimmed content, i was shown an instruction on the map with the same trimmed Instruction ( i was having "read More" instead of (...) )

[ksivasenthil]

@ironicicon the problem you faced might have been because of you modifying the html content from the api. Instead of editing the only copy, you use a CSS transform or try to have a copy with all the text and one for display with the (...),

I would not recommend "Read More" since, this might add more navigation in the frame which is already small.