proposal: x/tools/present: make CSS responsive for mobile

[earthboundkid]

I often follow links to present slides from my phone, only to be frustrated with the difficulty of reading the slides from my phone. I propose redoing the CSS for mobile. I am willing to volunteer to do the work if I get approval to work on it.

[rsc]

/cc @spf13 and @andybons

[andybons]

Thanks, @carlmjohnson. We definitely need to revisit the slides template. Let me look into it and will let you know about helping out.

[andybons]

Actually, could you outline how you would want to change things in this bug? That way you can get started faster :)

[earthboundkid]

I've only started to look at the present HTML/JS/CSS, so I'm not sure how totally gnarly it is, but assuming it's tractable, I should be able to add a viewport meta and switch things away from height/width: 100% to 100vh/vw and see how close that gets me to the goal of just having slides fit in the window.

[earthboundkid]

After some quick local experiments, I think one simple thing to do is just add -webkit-transform: scale(.5); for certain viewport widths. I'll see if I can do anything else more elegant, but that certainly helps.

[earthboundkid]

So this is pretty hacky, but it seems to make present at least fit into the window on mobile:

@media(max-width: 1300px) {
  .slides {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

@media(max-width: 1200px) {
  .slides {
    transform: scale(0.92);
    -webkit-transform: scale(0.92);
  }
}

@media(max-width: 1100px) {
  .slides {
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
  }
}

@media(max-width: 1000px) {
  .slides {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
  }
}

@media(max-width: 900px) {
  .slides {
    transform: scale(0.69);
    -webkit-transform: scale(0.69);
  }
}


@media(max-width: 800px) {
  .slides {
    transform: scale(0.62);
    -webkit-transform: scale(0.62);
  }
}

@media(max-width: 700px) {
  .slides {
    transform: scale(0.54);
    -webkit-transform: scale(0.54);
  }
}

@media(max-width: 600px) {
  .slides {
    transform: scale(0.46);
    -webkit-transform: scale(0.46);
  }
}

I'll open a CL once I get a chance, but I thought I'd add the comment here first in case that's too hacky to accept.

[earthboundkid]

Hmm, it would probably also be possible to do this as JS, which would make the scaling factor more precise and avoid repetition. I'll investigate.

[andybons]

I’m not familiar with this code (though I am very familiar with frontend dev), so can you elaborate on what the problem is alongside any possible solutions? This will help us evaluate whether the approach is sound or if another should be investigated.

[earthboundkid]

Change line 476 of slides.js to this:

  scaleSmallViewports();
  window.addEventListener('resize', scaleSmallViewports, false);
};

function scaleSmallViewports() {
  if (window.innerWidth < 1300) {
    document.querySelector('.slides').style.transform = 'scale(' +
      window.innerWidth/1300.0 + ')';
  } else {
    document.querySelector('.slides').style.transform = '';
  }
}

Works pretty well. The downside of this code is it might fire too often when someone resizes their window. I can play around with that tonight.

[earthboundkid]

Before on my iOS 11 beta iPad:

And after:

But it's still not working properly on my iOS 10 iPhone, even though it looks right in Desktop Safari's Responsive Design Mode. There is some difference between that and the real iOS browser. I'll keep investigating, but this is good improvement by itself.

[earthboundkid]

With'width=device-width,height=device-height', I can get it to display correctly in mobile Safari, but I haven't been able to hide the toolbar. A quick websearch says that Apple took away whatever proprietary method they used to have for hiding the scroll bar, so we may be stuck with it. This looks acceptable:

[gopherbot]

Change https://golang.org/cl/60270 mentions this issue: present: Scale view on smaller displays

[gopherbot]

Change https://golang.org/cl/95675 mentions this issue: cmd/tip: update talks hash to pull in e00c182