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;
padding: 2.5%;
margin-top: 7.228vw;
margin-bottom: 7.228vw;
border-top: 1px solid black;
border-bottom: 1px solid black;
height: 56.25vw;
@ -123,6 +122,7 @@ body .CodeMirror-focused .cm-matchhighlight {
font-size: 30px;
opacity: 0.6;
display: none;
z-index: 9001;
}
.cp div.modal .button:hover,
.cp div#modal .button:hover {
@ -133,7 +133,6 @@ body .CodeMirror-focused .cm-matchhighlight {
.cp div#modal #button_exit {
left: 20px;
top: 20px;
z-index: 9001;
}
.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 {
transition: margin-left 1s;
font-size: 20vh;
position: relative;
height: 100%;
}
.cp div.modal #content .slide-frame,
.cp div#modal #content .slide-frame {
display: inline-block;
box-sizing: border-box;
border: 1px solid white;
vertical-align: middle;
@ -179,11 +182,13 @@ body .CodeMirror-focused .cm-matchhighlight {
max-height: 100vh;
max-width: 177.78vh;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.cp div.modal #content .slide-container,
.cp div#modal #content .slide-container {
display: inline-block;
height: 100%;
width: 100vw;
text-align: center;
}
.cp div.modal .center,
.cp div#modal .center {
@ -198,6 +203,11 @@ body .CodeMirror-focused .cm-matchhighlight {
.cp div#modal.shown {
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 #print .slide-frame p,
.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; }
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>');
removeListeners(Dom.body);
@ -153,8 +153,9 @@ define([
$('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
}
});
$content.find('.' + slideClass).hide();
$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
//$content.find('.' + slideClass).hide();
//$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
$content.css('margin-left', -(i*100)+'vw');
change(Slide.lastIndex, Slide.index);
};

26
www/slide/slide.less
View File

@ -92,7 +92,7 @@ body {
padding: 2.5%;
// margin-top: ~"calc(((100vh - 56.25vw)/2))";
margin-top: 7.228vw;
margin-bottom: 7.228vw;
//margin-bottom: 7.228vw;
// margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
border-top: 1px solid black;
border-bottom: 1px solid black;
@ -126,6 +126,7 @@ div.modal, div#modal {
font-size: 30px;
opacity: 0.6;
display: none;
z-index: 9001;
}
.button:hover {
opacity: 1;
@ -134,7 +135,6 @@ div.modal, div#modal {
#button_exit {
left: 20px;
top: 20px;
z-index: 9001;
}
#button_left {
left: 6vw;
@ -156,8 +156,14 @@ div.modal, div#modal {
width: 100%;
}
#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 {
display: inline-block;
box-sizing: border-box;
border: 1px solid white;
@ -178,9 +184,15 @@ div.modal, div#modal {
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
}
.slide-container {
// 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;
.size(1);
}
text-align: left;
position: relative;
}
}
}