OpenWaterFoundation / owf-app-infomapper-ng

Open Water Foundation InfoMapper web application for menu-driven maps and visualizations, using Angular
GNU General Public License v3.0
1 stars 2 forks source link

Improve line breaks in click popup for long URLs #330

Closed smalers closed 3 years ago

smalers commented 3 years ago

The URLs shown for click popups are wrapping in an unappealing way. See the following image. Perhaps the code needs to be updated to break the visible text on slashes? Perhaps use a loop to try different approaches in order to achieve an optimal case where all visible lines are less than a certain number of characters. And of course it should handle some level of variability in character widths to fit into the dialog.

http://poudre.openwaterfoundation.org/latest/#/map/entities-roundtables

image

Nightsphere commented 3 years ago

I removed a function that arbitrarily broke a line at a given character count, which is what the above was doing. It did a line break at a dash ( - ), then inserted the line break at the spot given, which is why it looks a little funky. The new solution uses CSS, similar to another wrapping solution I found earlier in InfoMapper development. This should take care of the weird wrapping in the popups. Closing the issue.