qbit/go
1
0
Fork 0
mirror of https://github.com/golang/go synced 2024-09-30 14:28:33 -06:00
Code Releases Activity

present: Scale down slides on smaller displays

Browse Source 
On mobile and tablets, it was very difficult to view slides because the
slides were not designed to be smaller than 1250x750.

This adds a function to the JS that uses CSS scaling to make the slides
fit on smaller displays.

Fixes golang/go#21643

Change-Id: I68e9e2c1274aaf6396bf01d19ca023cddf76e2ec
Reviewed-on: https://go-review.googlesource.com/60270
Reviewed-by: Andrew Bonventre <andybons@golang.org>
Reviewed-by: Francesc Campoy Flores <campoy@golang.org>
Reviewed-by: Rob Pike <r@golang.org>
Run-TryBot: Francesc Campoy Flores <campoy@golang.org>
TryBot-Result: Gobot Gobot <gobot@golang.org>
This commit is contained in:
Carl Johnson 2017-08-30 10:02:37 -04:00 committed by Rob Pike
parent 2d19ab38fa
commit e00c182679
2 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
cmd/present/static/slides.js
View File

@ -441,9 +441,34 @@ function handleBodyKeyDown(event) {
}
};
function scaleSmallViewports() {
var el = document.querySelector('.slides');
var transform = '';
var sWidthPx = 1250;
var sHeightPx = 750;
var sAspectRatio = sWidthPx / sHeightPx;
var wAspectRatio = window.innerWidth / window.innerHeight;
if (wAspectRatio <= sAspectRatio && window.innerWidth < sWidthPx) {
transform = 'scale(' + window.innerWidth / sWidthPx + ')';
} else if (window.innerHeight < sHeightPx) {
transform = 'scale(' + window.innerHeight / sHeightPx + ')';
}
el.style.transform = transform;
}
function addEventListeners() {
document.addEventListener('keydown', handleBodyKeyDown, false);
};
var resizeTimeout;
window.addEventListener('resize', function() {
// throttle resize events
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(function() {
resizeTimeout = null;
scaleSmallViewports();
}, 50);
});
}
/* Initialization */
@ -466,13 +491,15 @@ function addGeneralStyle() {
var el = document.createElement('meta');
el.name = 'viewport';
el.content = 'width=1100,height=750';
el.content = 'width=device-width,height=device-height,initial-scale=1';
document.querySelector('head').appendChild(el);
var el = document.createElement('meta');
el.name = 'apple-mobile-web-app-capable';
el.content = 'yes';
document.querySelector('head').appendChild(el);
scaleSmallViewports();
};
function handleDomLoaded() {

5
cmd/present/static/styles.css
View File

@ -11,10 +11,9 @@
display: block !important;
height: 100%;
min-height: 740px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
overflow: hidden;
background: rgb(215, 215, 215);
background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));