maintain aspect ratio for slides

display index and slide count in title
pull/1/head
ansuz 8 years ago
parent f403d8e2e2
commit 8a659cf887

@ -384,7 +384,8 @@ form.realtime #adduser {
form.realtime #addoption {
border-bottom-left-radius: 5px;
}
div.modal {
div.modal,
div#modal {
box-sizing: border-box;
z-index: 9001;
position: fixed;
@ -395,7 +396,75 @@ div.modal {
display: none;
background-color: #302B28;
}
div.modal .center {
div.modal #content,
div#modal #content {
box-sizing: border-box;
border: 1px solid white;
vertical-align: middle;
padding: 2.5vw;
width: 100vw;
height: 56.25vw;
max-height: 100vh;
max-width: 177.78vh;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
div.modal #content p,
div#modal #content p,
div.modal #content li,
div#modal #content li,
div.modal #content pre,
div#modal #content pre,
div.modal #content code,
div#modal #content code {
font-size: 2.5vw;
line-height: 3vw;
}
div.modal #content h1,
div#modal #content h1 {
font-size: 5vw;
line-height: 6vw;
}
div.modal #content h2,
div#modal #content h2 {
font-size: 4.2vw;
line-height: 5.04vw;
}
div.modal #content h3,
div#modal #content h3 {
font-size: 3.6vw;
line-height: 4.32vw;
}
div.modal #content h4,
div#modal #content h4 {
font-size: 3vw;
line-height: 3.6vw;
}
div.modal #content h5,
div#modal #content h5 {
font-size: 2.2vw;
line-height: 2.64vw;
}
div.modal #content h6,
div#modal #content h6 {
font-size: 1.6vw;
line-height: 1.92vw;
}
div.modal #content pre > code,
div#modal #content pre > code {
display: block;
position: relative;
border: 1px solid #333;
width: 90%;
margin: auto;
padding-left: .25vw;
}
div.modal .center,
div#modal .center {
position: relative;
width: 80%;
height: 80%;
@ -403,31 +472,39 @@ div.modal .center {
border: 1px solid #685d56;
text-align: center;
}
div.modal.shown {
div.modal.shown,
div#modal.shown {
display: block;
}
div.modal table {
div.modal table,
div#modal table {
margin: 30px;
border-collapse: collapse;
}
div.modal table input {
div.modal table input,
div#modal table input {
height: 100%;
width: 90%;
border: 3px solid #302B28;
}
div.modal table tfoot tr td {
div.modal table tfoot tr td,
div#modal table tfoot tr td {
z-index: 4000;
cursor: pointer;
}
div.modal #addtime,
div.modal #adddate {
div#modal #addtime,
div.modal #adddate,
div#modal #adddate {
color: #46E981;
border: 1px solid #46E981;
padding: 15px;
}
div.modal #adddate {
div.modal #adddate,
div#modal #adddate {
border-top-left-radius: 5px;
}
div.modal #addtime {
div.modal #addtime,
div#modal #addtime {
border-bottom-left-radius: 5px;
}

@ -471,7 +471,63 @@ form.realtime {
#addoption { .bottom-left; }
}
div.modal {
.viewportRatio (@x, @y, @p: 100) {
width: @p * 100vw;
height: @y * (@p * 100vw) / @x;
max-width: @x / @y * (@p * 100vh);
max-height: (@p * 100vh);
}
div.modal, div#modal {
#content {
box-sizing: border-box;
.size (@n) {
font-size: @n * 1vw;
line-height: @n * 1.2vw;
}
border: 1px solid white;
vertical-align: middle;
padding: 2.5vw;
width: 100vw;
height: 56.25vw; // height:width ratio = 9/16 = .5625
//background: pink;
max-height: 100vh;
max-width: 177.78vh; // 16/9 = 1.778
margin: auto;
position: absolute;
top:0;bottom:0; // vertical center
left:0;right:0; // horizontal center
p, li, pre, code {
.size(2.5);
}
h1 { .size(5); }
h2 { .size(4.2); }
h3 { .size(3.6); }
h4 { .size (3); }
h5 { .size(2.2); }
h6 { .size(1.6); }
pre > code {
display: block;
position: relative;
border: 1px solid #333;
width: 90%;
margin: auto;
padding-left: .25vw;
}
}
box-sizing: border-box;
z-index: 9001;
position: fixed;

@ -102,7 +102,7 @@ define([
console.log("Couldn't get pad title");
return;
}
document.title = title || window.location.hash.slice(1, 9);
document.title = APP.title = title || window.location.hash.slice(1, 9);
Cryptpad.rememberPad(title, function (err, data) {
if (err) {
console.log("Couldn't remember pad");
@ -140,7 +140,7 @@ define([
console.log(err);
return;
}
document.title = window.location.hash.slice(1,9);
document.title = APP.title = window.location.hash.slice(1,9);
});
});
});
@ -167,7 +167,7 @@ define([
console.error(err);
return;
}
document.title = title;
document.title = APP.title = title;
});
});
});
@ -267,6 +267,15 @@ define([
});
}
Slide.onChange(function (o, n, l) {
if (n !== null) {
document.title = APP.title + ' (' + (++n) + '/' + l + ')';
return;
}
console.log("Exiting presentation mode");
document.title = APP.title;
});
setEditable(true);
initializing = false;
};

@ -12,6 +12,7 @@ define([
index: 0,
lastIndex: 0,
content: [],
changeHandlers: [],
};
var $modal;
var $content;
@ -20,6 +21,25 @@ define([
$content = Slide.$content = $c;
};
Slide.onChange = function (f) {
if (typeof(f) === 'function') {
Slide.changeHandlers.push(f);
}
};
var change = function (oldIndex, newIndex) {
if (oldIndex === newIndex) {
return false;
}
if (Slide.changeHandlers.length) {
Slide.changeHandlers.some(function (f, i) {
// HERE
f(oldIndex, newIndex, Slide.content.length);
});
return true;
}
};
var forbiddenTags = Slide.forbiddenTags = [
'SCRIPT',
'IFRAME',
@ -87,10 +107,10 @@ define([
if (typeof(patch) === 'string') {
$content.html(Marked(c));
return;
} else {
DD.apply($content[0], patch);
}
change(Slide.lastIndex, Slide.index);
};
var show = Slide.show = function (bool, content) {
@ -99,8 +119,10 @@ define([
Slide.update(content);
Slide.draw(Slide.index);
$modal.addClass('shown');
change(null, Slide.index);
return;
}
change(Slide.index, null);
$modal.removeClass('shown');
};
@ -115,12 +137,16 @@ define([
var left = Slide.left = function () {
console.log('left');
Slide.lastIndex = Slide.index;
var i = Slide.index = Math.max(0, Slide.index - 1);
Slide.draw(i);
};
var right = Slide.right = function () {
console.log('right');
Slide.lastIndex = Slide.index;
var i = Slide.index = Math.min(Slide.content.length -1, Slide.index + 1);
Slide.draw(i);
};

Loading…
Cancel
Save