From: Kim Nguyễn Date: Sat, 26 Sep 2015 07:23:35 +0000 (+0200) Subject: . X-Git-Url: http://git.nguyen.vg/gitweb/?p=hacks%2FsimpleWebSlides.git;a=commitdiff_plain;h=cd25deac22fee9a675c575eb9b7e7804e2cf67f6 . --- diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 32fdc55..430c05a 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -25,11 +25,11 @@ body { /* Layout of a canvas */ .sws-header , .sws-title,{ - height:5vmin; + height:5%; } .sws-inner-canvas { - height: 80vmin; + height: 80%; text-align: justify; } @@ -37,11 +37,11 @@ body { margin: 0; padding: 0; display: block; - width: 100%; + box-sizing: border-box; } .sws-footer{ - height: 10vmin; + height: 10%; } .sws-header, .sws-title, .sws-inner-canvas, .sws-footer{ @@ -54,56 +54,77 @@ body { -body > h1, body > h2, body > h3 { +body > h1, body > h2, body > h3, body > a.sws-previous { display: none; } /* Display Mode */ /****************************************/ -:root.sws-display body { - overflow:hidden; -} +/* display mode */ +/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */ :root.sws-display .sws-canvas { - width:133.3vmin; - height:100vmin; + max-width: 100vw; + max-height: 100vh; overflow:hidden; + } -/* display mode */ -/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */ +:root.sws-by-width.sws-aspect-4-3 .sws-canvas { + width:133.3vh; + height:100vh; +} + +:root.sws-by-width.sws-aspect-16-9 .sws-canvas { + width:177.7vh; + height:100vh; +} -:root.sws-aspect-4-3 .sws-canvas { - width:133.3vmin; - height:100vmin; +:root.sws-by-width.sws-aspect-16-10 .sws-canvas { + width:160vh; + height:100vh; } -:root.sws-aspect-16-9 .sws-canvas { - width:177.7vmin; - height:100vmin; +:root.sws-by-height.sws-aspect-4-3 .sws-canvas { + width:100vw; + height:75vw; } -:root.sws-aspect-16-10 .sws-canvas { - width:160vmin; - height:100vmin; +:root.sws-by-height.sws-aspect-16-9 .sws-canvas { + width:100vw; + height:56.25vw; +} + +:root.sws-by-height.sws-aspect-16-10 .sws-canvas { + width:100vw; + height:62.5vw; +} + +:root.sws-display body::after{ + display:inline-block; + height:100vh; + width:0; + content: ""; + vertical-align:middle; + } :root.sws-display .sws-canvas { - position: relative; - margin-left: auto; - margin-right: auto; + display:inline-block; padding: 0; - margin-top: 0; - margin-bottom: 0; + max-width: 100vw; } :root.sws-display .sws-inactive-slide { display: none; } + :root.sws-display body { background: black; + overflow: hidden; + text-align:center; } diff --git a/simpleWebSlides.js b/simpleWebSlides.js index 9beae05..798d2ac 100644 --- a/simpleWebSlides.js +++ b/simpleWebSlides.js @@ -77,7 +77,7 @@ SWS.Templates = new function () { \
\ 💻\ @@ -722,10 +722,23 @@ SWS.Presentation = new function () { }); }; self.changeAspect = function() { + var newClass = $("#sws-aspect-select").val(); + var args = newClass.split("-"); + var targetRatio = (args[2] - 0) / (args[3] - 0); + var realRatio = window.innerWidth / window.innerHeight; + var byClass = (targetRatio > realRatio ) ? "sws-by-height" : "sws-by-width"; + console.log(byClass); + + if ($("html").hasClass(newClass) + && $("html").hasClass(byClass)) + return; + $("html").removeClass("sws-aspect-4-3") .removeClass("sws-aspect-16-9") .removeClass("sws-aspect-16-10") - .addClass($("#sws-aspect-select").val()); + .removeClass("sws-by-width") + .removeClass("sws-by-height") + .addClass(newClass).addClass(byClass); self.redraw(); }; @@ -921,14 +934,17 @@ SWS.Presentation = new function () { } else { if (self.showHelpAtStartup()) $("#sws-help-panel-canvas").show().delay(5000).hide(); + self.changeAspect(); self.refresh(); }; $(document).keydown(self.inputHandler); document.body.addEventListener('touchstart',self.inputHandler, false); document.body.addEventListener('touchend',self.inputHandler, false); + $(window).resize(self.changeAspect); _initialized = true; }; - setTimeout(f, 100); + //setTimeout(f, 100); + f(); }; }; diff --git a/themes/uPsud.css b/themes/uPsud.css index d38c8e6..df89ad5 100644 --- a/themes/uPsud.css +++ b/themes/uPsud.css @@ -20,14 +20,37 @@ /* Title of the slide */ .sws-title { padding: 2vmin 0 2vmin 0; - height: 10vmin; - background:red; + height: 10%; + z-index:2; + vertical-align: middle; } h1 { color: #00486c; font-size: larger; - text-align:center; + text-align: center; +} +.sws-title h1 { + display:inline-block; + margin:0; +} + +.sws-toc { position: absolute; + left: 0; + bottom: 0; + right: 0; + top:0; + } +.sws-toc > ul { + display:inline-block; +} + +.sws-toc::before { + display:inline-block; + content: ""; + height:100%; + width: 0px; + vertical-align:middle; } .sws-canvas { @@ -35,37 +58,44 @@ h1 { background: #fff; padding:0; margin: 0; - z-index:2; + position:relative; + z-index:0; } -.sws-inner-canvas { /* allows the canvas to cover the logo if needed */ - z-index:2; - height: 80vmin; - background:blue; + +.sws-inner-canvas { + height: 85%; + z-index: 2; + position: relative; /* to make z-index work */ } .sws-footer { - height: 10vmin; - background:pink; + height: 5%; + text-align:right; + padding-right:1ex; + vertical-align: middle; + z-index: 2; } .sws-footer::before { + display:inline-block; + height:12%; + width: 12%; + left: 0.5ch; + bottom:0.5ch; position:absolute; - bottom: 1vmin; - left:1vmin; - display:block; - height:10vmin; content:""; - background-size: 100%; + background-size: contain; background-image: url("logo_psud_psay.png"); background-repeat: no-repeat; + z-index: 1; } -:root.sws-display .sws-footer::before { z-index: -1; } -/*:root.sws-print .sws-footer::before { z-index: 1; }*/ + .sws-slide-num-sep:after { content: "/"; } + @font-face { src: url("DIN-Medium.ttf") format("truetype"); font-family: "DIN"; @@ -87,18 +117,14 @@ body { color: #696968; } -:root.sws-display body { - font-size: 3.5vh; +:root.sws-display .sws-canvas { + font-size: 2.2vw; } :root.sws-print body { font-size: 21pt; } -.sws-footer { - text-align: right; - height: 5%; -} @media print { @@ -142,12 +168,12 @@ ul.empty { color: #92b938; } -.done:after { +.done::after { content: " ✔"; } li { - margin-top:0.5vh; + margin-top:0.5vmin; } tt em, code em { @@ -230,7 +256,7 @@ table.btable { } dl { - padding: 1vh 1em 1vh 1em; + padding: 1vmin 1em 1vmin 1em; } dt { display: inline;