Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
carlmjohnson opened this issue Aug 26, 2017 · 13 comments
Closed

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

carlmjohnson opened this issue Aug 26, 2017 · 13 comments
Assignees
Milestone

Comments

@carlmjohnson
Copy link
Contributor

@carlmjohnson carlmjohnson commented Aug 26, 2017

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.

@gopherbot gopherbot added this to the Proposal milestone Aug 26, 2017
@gopherbot gopherbot added the Proposal label Aug 26, 2017
@rsc
Copy link
Contributor

@rsc rsc commented Aug 28, 2017

/cc @spf13 and @andybons

@andybons andybons self-assigned this Aug 28, 2017
@andybons
Copy link
Member

@andybons andybons commented Aug 28, 2017

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

@andybons
Copy link
Member

@andybons andybons commented Aug 28, 2017

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

@carlmjohnson
Copy link
Contributor Author

@carlmjohnson carlmjohnson commented Aug 28, 2017

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.

@carlmjohnson
Copy link
Contributor Author

@carlmjohnson carlmjohnson commented Aug 28, 2017

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.

@carlmjohnson
Copy link
Contributor Author

@carlmjohnson carlmjohnson commented Aug 29, 2017

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.

@carlmjohnson
Copy link
Contributor Author

@carlmjohnson carlmjohnson commented Aug 29, 2017

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
Copy link
Member

@andybons andybons commented Aug 29, 2017

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.

@carlmjohnson
Copy link
Contributor Author

@carlmjohnson carlmjohnson commented Aug 29, 2017

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.

@carlmjohnson
Copy link
Contributor Author

@carlmjohnson carlmjohnson commented Aug 29, 2017

Before on my iOS 11 beta iPad:

img_0339
img_0340

And after:

img_0341
img_0342

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.

@carlmjohnson
Copy link
Contributor Author

@carlmjohnson carlmjohnson commented Aug 29, 2017

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:

img_5403

@gopherbot
Copy link

@gopherbot gopherbot commented Aug 30, 2017

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

@gopherbot
Copy link

@gopherbot gopherbot commented Feb 20, 2018

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

gopherbot pushed a commit to golang/tools that referenced this issue Feb 20, 2018
Updates golang/go#21643

Change-Id: Ic662ac6ca152d8cf702b02651f55936a29a2e234
Reviewed-on: https://go-review.googlesource.com/95675
Reviewed-by: Brad Fitzpatrick <bradfitz@golang.org>
@golang golang locked and limited conversation to collaborators Feb 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.