investigate how broken touch/mobile devices are

[matkoniecz]

For start, #1 "UX is poor - user is certainly going to draw a rectangle, step of selecting it manually is pointless" is more severe here

replaces #6

[Discostu36]

I should open a pull request but don't have the time right now so I'll just dump the code here:

• [ ] Add to header: <meta name="viewport" content="width=device-width, initial-scale=1.0">

• [ ] Remove inline css from #map and svg

• [ ] Add to css file:

#generated_svg_within {
  width:800px;
  height:600px;
}

#map {
  width:600px;
  height:400px;
  position:relative
}
@media screen and (max-width: 800px) {
  #generated_svg_within {
    width:100%;
    height:calc(100vw/8*6);
  }

#map {
  width:100%;
  height:calc(100vw/6*4)
}
}

• [ ] change svg tag to <svg height="100%" width="100%" viewBox="0 0 800 600">

[matkoniecz]

thanks, I will look into it! Not immediately, as I need to understand changes - and I am not an expert.

Note that for width-height: I would really prefer to keep it in one place, so that one may easily resize this. Rather than having it in multiple independent places. Maybe even make it configurable for people using this code.

[Discostu36]

It is configurable, they just need to change the CSS 😊 If you want it closer to the html you can put the css in style tags in the header instead of a css file. But you can't have responsive web-design with inline styles.