web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add transitions in present mode

Browse Source
This commit is contained in:
yflory 2017-03-17 18:39:39 +01:00
parent 45ac3e40a2
commit e139295d7e
3 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
www/slide/slide.css
View File

@ -88,7 +88,6 @@ body .CodeMirror-focused .cm-matchhighlight {
display: block !important; display: block !important;
padding: 2.5%; padding: 2.5%;
margin-top: 7.228vw; margin-top: 7.228vw;
margin-bottom: 7.228vw;
border-top: 1px solid black; border-top: 1px solid black;
border-bottom: 1px solid black; border-bottom: 1px solid black;
height: 56.25vw; height: 56.25vw;
@ -123,6 +122,7 @@ body .CodeMirror-focused .cm-matchhighlight {
font-size: 30px; font-size: 30px;
opacity: 0.6; opacity: 0.6;
display: none; display: none;
z-index: 9001;
} }
.cp div.modal .button:hover, .cp div.modal .button:hover,
.cp div#modal .button:hover { .cp div#modal .button:hover {
@ -133,7 +133,6 @@ body .CodeMirror-focused .cm-matchhighlight {
.cp div#modal #button_exit { .cp div#modal #button_exit {
left: 20px; left: 20px;
top: 20px; top: 20px;
z-index: 9001;
} }
.cp div.modal #button_left, .cp div.modal #button_left,
.cp div#modal #button_left { .cp div#modal #button_left {
@ -159,10 +158,14 @@ body .CodeMirror-focused .cm-matchhighlight {
} }
.cp div.modal #content, .cp div.modal #content,
.cp div#modal #content { .cp div#modal #content {
transition: margin-left 1s;
font-size: 20vh; font-size: 20vh;
position: relative;
height: 100%;
} }
.cp div.modal #content .slide-frame, .cp div.modal #content .slide-frame,
.cp div#modal #content .slide-frame { .cp div#modal #content .slide-frame {
display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid white; border: 1px solid white;
vertical-align: middle; vertical-align: middle;
@ -179,11 +182,13 @@ body .CodeMirror-focused .cm-matchhighlight {
max-height: 100vh; max-height: 100vh;
max-width: 177.78vh; max-width: 177.78vh;
margin: auto; margin: auto;
position: absolute; }
top: 0; .cp div.modal #content .slide-container,
bottom: 0; .cp div#modal #content .slide-container {
left: 0; display: inline-block;
right: 0; height: 100%;
width: 100vw;
text-align: center;
} }
.cp div.modal .center, .cp div.modal .center,
.cp div#modal .center { .cp div#modal .center {
@ -198,6 +203,11 @@ body .CodeMirror-focused .cm-matchhighlight {
.cp div#modal.shown { .cp div#modal.shown {
display: block; display: block;
} }
.cp div#modal #content .slide-frame,
.cp #print .slide-frame {
text-align: left;
position: relative;
}
.cp div#modal #content .slide-frame p, .cp div#modal #content .slide-frame p,
.cp #print .slide-frame p, .cp #print .slide-frame p,
.cp div#modal #content .slide-frame li, .cp div#modal #content .slide-frame li,

7
www/slide/slide.js
View File

@ -126,7 +126,7 @@ define([
if (typeof(Slide.content) !== 'string') { return; } if (typeof(Slide.content) !== 'string') { return; }
var c = Slide.content; var c = Slide.content;
var m = '<span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span><span class="'+slideClass+'">')+'</span>'; var m = '<span class="slide-container"><span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span></span><span class="slide-container"><span class="'+slideClass+'">')+'</span></span>';
var Dom = domFromHTML('<div id="content">' + m + '</div>'); var Dom = domFromHTML('<div id="content">' + m + '</div>');
removeListeners(Dom.body); removeListeners(Dom.body);
@ -153,8 +153,9 @@ define([
$('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el)); $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
} }
}); });
$content.find('.' + slideClass).hide(); //$content.find('.' + slideClass).hide();
$content.find('.' + slideClass + ':eq( ' + i + ' )').show(); //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
$content.css('margin-left', -(i*100)+'vw');
change(Slide.lastIndex, Slide.index); change(Slide.lastIndex, Slide.index);
}; };

26
www/slide/slide.less
View File

@ -92,7 +92,7 @@ body {
padding: 2.5%; padding: 2.5%;
// margin-top: ~"calc(((100vh - 56.25vw)/2))"; // margin-top: ~"calc(((100vh - 56.25vw)/2))";
margin-top: 7.228vw; margin-top: 7.228vw;
margin-bottom: 7.228vw; //margin-bottom: 7.228vw;
// margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)"; // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
border-top: 1px solid black; border-top: 1px solid black;
border-bottom: 1px solid black; border-bottom: 1px solid black;
@ -126,6 +126,7 @@ div.modal, div#modal {
font-size: 30px; font-size: 30px;
opacity: 0.6; opacity: 0.6;
display: none; display: none;
z-index: 9001;
} }
.button:hover { .button:hover {
opacity: 1; opacity: 1;
@ -134,7 +135,6 @@ div.modal, div#modal {
#button_exit { #button_exit {
left: 20px; left: 20px;
top: 20px; top: 20px;
z-index: 9001;
} }
#button_left { #button_left {
left: 6vw; left: 6vw;
@ -156,8 +156,14 @@ div.modal, div#modal {
width: 100%; width: 100%;
} }
#content { #content {
font-size: 20vh; transition: margin-left 1s;
font-size: 20vh; // position: absolute;
// top:0;bottom:0; // vertical center
// left:0;right:0; // horizontal center
position: relative;
height: 100%;
.slide-frame { .slide-frame {
display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid white; border: 1px solid white;
@ -178,9 +184,15 @@ div.modal, div#modal {
max-height: 100vh; max-height: 100vh;
max-width: 177.78vh; // 16/9 = 1.778 max-width: 177.78vh; // 16/9 = 1.778
margin: auto; margin: auto;
position: absolute; }
top:0;bottom:0; // vertical center .slide-container {
left:0;right:0; // horizontal center // position: absolute;
// top:0;
// bottom:0; // vertical center
// left:0;right:0; // horizontal center
display: inline-block;
height: 100%; width: 100vw;
text-align: center;
} }
} }
@ -283,6 +295,8 @@ div#modal #content, #print {
text-align: center; text-align: center;
.size(1); .size(1);
} }
text-align: left;
position: relative;
} }
} }
} }