make layout more responsive

1 files changed, 39 insertions, 64 deletions

diff --git a/index.html b/index.html
index d0e7b28..5a1b913 100644
--- a/index.html
+++ b/index.html
@@ -57,13 +57,32 @@
         /* responsive deck */
         function sizeSlides() {
             d3.selectAll(".slide")
-                .style("width", (parseInt(window.innerWidth) * 0.9) + "px")
-                .style("height", (parseInt(window.innerHeight) * 0.9) + "px");
+                .style("width", parseInt(window.innerWidth) + "px")
+                .style("height", parseInt(window.innerHeight) + "px");
             d3.selectAll(".scale")
                 .style("font-size", function() {
                     var lines = d3.select(this).selectAll("p")[0].length; // TODO a bit specific, may not work in all cases
                     return Math.min(this.clientWidth/10, this.clientHeight/lines*(1.5)) + "px"; // TODO replace by line height?
                 });
+            var scalePicture = function(d, i, me, extraRatio) {
+                // "extraRatio" might scale vertically
+                extraRatio = extraRatio || 1;
+                var me = d3.select(me || this);
+                var winW = window.innerWidth,
+                    winH = window.innerHeight,
+                    picW = me.node().naturalWidth,
+                    picH = me.node().naturalHeight,
+                    ratioH = 0.75*extraRatio, ratioW = 0.9;
+                if ((winW*ratioW)/picW > (winH*ratioH)/picH) {
+                    me.style("height", winH*ratioH + "px");
+                    me.style("width", "auto");
+                } else {
+                    me.style("width", winW*ratioW + "px");
+                    me.style("height", "auto");
+                }
+            };
+            d3.selectAll(".scalepic").each(scalePicture);
+            d3.selectAll(".scalepic-half").each(function(d, i) { scalePicture(d, i, this, 0.5); });
         };
         window.addEventListener("resize", sizeSlides);
 
@@ -132,11 +151,11 @@
             <h1>Neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
                 <h3>Ein Neuron</h3>
-                <img style="width: 100%;" src="img/neuron.svg" alt="Schema Neuron">
+                <img class="scalepic" src="img/neuron.svg" alt="Schema Neuron">
             </div>
             <div class="innerStep center">
                 <h3>Ein Neuronales Netz</h3>
-                <img style="width: 80%;" src="img/neuronales-netz.jpg" alt="Foto Neuron">
+                <img class="scalepic" src="img/neuronales-netz.jpg" alt="Foto Neuron">
             </div>
         </div>
 
@@ -144,18 +163,19 @@
             <h1>Künstliche neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
                 <h3>Neuron - künstliches Neuron</h3>
-                <img style="width: 60%;" src="img/neuron.svg" alt="Schema Neuron" />
-                <img style="width: 60%;" src="img/kuenstliches_neuron.svg" alt="Schema eines künstlichen Neurons" />
+                <img class="scalepic-half" src="img/neuron.svg" alt="Schema Neuron" />
+                <img class="scalepic-half" src="img/kuenstliches_neuron.svg" alt="Schema eines künstlichen Neurons" />
             </div>
             <div class="innerStep center">
                 <h3>Neuronales Netz - künstliches neuronales Netz</h3>
-                <img style="width: 40%;" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
-                <img style="width: 60%;" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" />
+                <img class="scalepic-half" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
+                <img class="scalepic-half" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" />
             </div>
         </div>
 
         <div class="step slide" data-x="4000" data-y="0" data-z="5000">
             <h1>Das Problem &ndash; Die Boston-Häuserdatenreihe</h1>
+            <!-- TODO overflows right in 800x600 -->
             <div class="center">
                 <p class="emoji scale">:homes:</p>
                 <table id="boston-example"></table>
@@ -188,54 +208,10 @@
         <div id="overview" class="step" data-x="2000" data-y="2500" data-scale="12">
             <!-- overview -->
         </div>
-<!--
-        <div class="mdl-layout mdl-js-layout step slide" data-x="-1000" data-y="0" data-z="1000">
-            <h1 class="mdl-layout__header">Biologie</h1>
-            <div class="innerStep stepped lastInnerstep center">
-                <h3>Der Mensch und die Maschine.</h3>
-                <p style="font-size: 2500%">
-                    <i style="font-size: 100%;" class="material-icons">accessibility</i>
-                    🖥
-                </p>
-            </div>
-            <div class="innerStep center">
-                <h3>Wahrnehmung</h3>
-                <p>
-                    <i style="font-size: 800%;" class="material-icons">remove_red_eye</i>
-                </p>
-                <p>
-                    <span style="font-size: 500%;">Rezeptor</span>
-                </p>
-            </div>
-            <div class="innerStep center">
-                <h3>Reaktion.</h3>
-                <p>
-                    <i style="font-size: 2500%;" class="material-icons">directions_walk</i>
-                </p>
-                <p>
-                    <span style="font-size: 500%;">Effektor</span>
-                </p>
-            </div>
-        </div>
-
-        <div class="mdl-layout mdl-js-layout step slide" data-x="0" data-y="0" data-z="1000">
-            <h1 class="mdl-layout__header">Abstraktion eines Individuums</h1>
-            <p class="innerStep stepped lastInnerstep center" style="font-size: 500%;">
-                Wahrnehmung &#x279e; 
-                <i style="font-size: 100%;" class="material-icons">help_outline</i>
-                &#x279e; Reaktion
-            </p>
-            <p class="innerStep center" style="font-size: 500%;">
-                Eingabe &#x279e; &#x2728; &#x279e; Ausgabe
-            </p>
-        </div>
-
-        <div class="mdl-layout mdl-js-layout step slide" data-x="1000" data-y="0" data-z="1000">
-            <h1 class="mdl-layout__header">Abstraktion der Ein- und Ausgabe</h1>
-        </div>
 
-        <div class="step slide mdl-layout mdl-js-layout" data-x="9500" data-y="0" data-z="1000">
-            <div class="mdl-layout__header">
+        <!-- v - alter Code unten - v -->
+        <div class="step slide" data-x="9500" data-y="0" data-z="1000">
+            <div>
                 <h3>Ein leeres Netz</h3>
             </div>
 
@@ -253,8 +229,8 @@
             </script>
         </div>
 
-        <div class="step slide mdl-layout mdl-js-layout" data-x="3000" data-y="0" data-z="1000">
-            <div class="mdl-layout__header">
+        <div class="step slide" data-x="3000" data-y="0" data-z="1000">
+            <div>
                 <h3>Aktivierungstest</h3>
             </div>
 
@@ -286,8 +262,8 @@
             </script>
         </div>
 
-        <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="0" data-z="1000">
-            <div class="mdl-layout__header">
+        <div class="step slide" data-x="2000" data-y="0" data-z="1000">
+            <div>
                 <h3>Der Fehler im Verlauf</h3>
             </div>
 
@@ -305,8 +281,8 @@
             </script>
         </div>
 
-        <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000">
-            <div class="mdl-layout__header">
+        <div class="step slide" data-x="0" data-y="1000">
+            <div>
                 <h3>Die Gewichte im Verlauf</h3>
             </div>
 
@@ -324,8 +300,8 @@
             </script>
         </div>
 
-        <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="1000">
-            <div class="mdl-layout__header">
+        <div class="step slide" data-x="2000" data-y="1000">
+            <div>
                 <h3>Gewichte und Fehler</h3>
             </div>
 
@@ -342,7 +318,6 @@
                 }, ".visContainer");
             </script>
         </div>
--->
     </div>
 </body>
 </html>