diff --git a/www/slide/index.html b/www/slide/index.html index 2f5e675a9..96eb6c577 100644 --- a/www/slide/index.html +++ b/www/slide/index.html @@ -35,8 +35,6 @@ overflow:hidden; box-sizing: border-box; } - /* We use !important here to override the 96% set to the element in DecorateToolbar.js - when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */ body #pad-iframe.fullscreen { top: 0px; height: 100%; @@ -45,8 +43,6 @@ top: 0px; height: 100%; } - - diff --git a/www/slide/inner.html b/www/slide/inner.html index 1726cd2f1..4e192d0c5 100644 --- a/www/slide/inner.html +++ b/www/slide/inner.html @@ -5,7 +5,6 @@ - @@ -35,6 +34,8 @@ + +
diff --git a/www/slide/inner.js b/www/slide/inner.js new file mode 100644 index 000000000..2b9da86c5 --- /dev/null +++ b/www/slide/inner.js @@ -0,0 +1 @@ +define([ 'less!/slide/slide.less' ], function () {}); diff --git a/www/slide/slide.less b/www/slide/slide.less index 459267186..6cbe6367f 100644 --- a/www/slide/slide.less +++ b/www/slide/slide.less @@ -1,5 +1,5 @@ -@import "../../customize.dist/src/less/variables.less"; -@import "../../customize.dist/src/less/mixins.less"; +@import "/customize/src/less/variables.less"; +@import "/customize/src/less/mixins.less"; // used for slides .viewportRatio (@x, @y, @p: 100) { @@ -158,12 +158,8 @@ body { height: ~"calc(100vh - 2px)"; } } - /*.slide-frame:first-child { - margin-top: ~"calc(((100vh - 56.25vw)/2))"; - }*/ } - /* Slide position (present mode) */ div.modal, div#modal { display: none; @@ -212,21 +208,15 @@ div.modal, div#modal { white-space: nowrap; .slide-frame { overflow: hidden; - display: inline-block; + display: flex; + flex-flow: column !important; + box-sizing: border-box; border: 1px solid; white-space: normal; vertical-align: middle; - /* center things as much as possible - - margin-top: 50vh; - margin-bottom: 50vh; - transform: translateY(-50%); - - */ - padding: 0.5em; width: 100vw; height: 56.25vw; // height:width ratio = 9/16 = .5625 @@ -324,7 +314,6 @@ div#modal #content, #print { margin: 0 auto; padding-left: 0.3em; } - // p, ul, ol { padding-left: 10%; } img { position: relative; @@ -364,7 +353,7 @@ div#modal #content, #print { top: 15vh; bottom: 15vh; left: 10vw; right: 10vw; border: 1px solid black; - z-index: 10; + z-index: 100000; overflow: auto; display: none; font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; @@ -396,3 +385,31 @@ div#modal #content, #print { } } +.slide-frame * { + max-width: 100%; + max-height: 100%; +} + +p { + display: flex; + flex-flow: column; + padding: 0; + margin: 0; + min-height:0; + flex: 1; +} + +media-tag { + min-height: 0; + flex: 1; + display: block; + text-align: center; +} + +media-tag img { + max-height: 100% !important; +} + +media-tag iframe { + min-height: 100%; +}