infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

maintain aspect ratio for slides

Browse Source 
display index and slide count in title
pull/1/head
ansuz 8 years ago
parent f403d8e2e2
commit 8a659cf887
4 changed files with 182 additions and 14 deletions
Show Stats Download Patch File Download Diff File

95
customize.dist/main.css
Unescape Escape View File

@ -384,7 +384,8 @@ form.realtime #adduser {
form.realtime #addoption { form.realtime #addoption {
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }
div.modal { div.modal,
div#modal {
box-sizing: border-box; box-sizing: border-box;
z-index: 9001; z-index: 9001;
position: fixed; position: fixed;
@ -395,7 +396,75 @@ div.modal {
display: none; display: none;
background-color: #302B28; 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; position: relative;
width: 80%; width: 80%;
height: 80%; height: 80%;
@ -403,31 +472,39 @@ div.modal .center {
border: 1px solid #685d56; border: 1px solid #685d56;
text-align: center; text-align: center;
} }
div.modal.shown { div.modal.shown,
div#modal.shown {
display: block; display: block;
} }
div.modal table { div.modal table,
div#modal table {
margin: 30px; margin: 30px;
border-collapse: collapse; border-collapse: collapse;
} }
div.modal table input { div.modal table input,
div#modal table input {
height: 100%; height: 100%;
width: 90%; width: 90%;
border: 3px solid #302B28; 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; z-index: 4000;
cursor: pointer; cursor: pointer;
} }
div.modal #addtime, div.modal #addtime,
div.modal #adddate { div#modal #addtime,
div.modal #adddate,
div#modal #adddate {
color: #46E981; color: #46E981;
border: 1px solid #46E981; border: 1px solid #46E981;
padding: 15px; padding: 15px;
} }
div.modal #adddate { div.modal #adddate,
div#modal #adddate {
border-top-left-radius: 5px; border-top-left-radius: 5px;
} }
div.modal #addtime { div.modal #addtime,
div#modal #addtime {
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }

58
customize.dist/src/cryptpad.less
Unescape Escape View File

@ -471,7 +471,63 @@ form.realtime {
#addoption { .bottom-left; } #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; box-sizing: border-box;
z-index: 9001; z-index: 9001;
position: fixed; position: fixed;

15
www/slide/main.js
Unescape Escape View File

@ -102,7 +102,7 @@ define([
console.log("Couldn't get pad title"); console.log("Couldn't get pad title");
return; 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) { Cryptpad.rememberPad(title, function (err, data) {
if (err) { if (err) {
console.log("Couldn't remember pad"); console.log("Couldn't remember pad");
@ -140,7 +140,7 @@ define([
console.log(err); console.log(err);
return; 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); console.error(err);
return; 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); setEditable(true);
initializing = false; initializing = false;
}; };

28
www/slide/slide.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save