flexbox and pixelScale fix

williamngan · Aug 7, 2018 · a120a3a · a120a3a
1 parent 877d48b
commit a120a3a
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 40 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -103,39 +103,38 @@ html * {
 
 .block {
   width: 100vw;
-  max-width: 1350px;
-  margin: 0px auto 0;
-  text-align: center;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
 
 }
 
 .block .subcol {
   text-align: left;
-  vertical-align: top;
-  min-width: 540px;
+  min-width: 560px;
   max-width: 640px;
-  padding: 0 40px 0 80px;
-  box-sizing: border-box;
-  display: inline-block;
+  padding: 0 50px;
+
+  flex: 0 1 50%;
 }
 
 
 .feature-block {
-  height: 45vw;
+  height: auto;
   margin: 100px 0px 0px;
-  overflow: hidden;
-  white-space: nowrap; 
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 
 .feature-block .feature {
   padding: 0;
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-  width: 25vw;
-
+  flex: 0 1 25%;
   box-sizing: border-box;
-  white-space: normal;
 }
 
 .feature-block .image {
@@ -380,32 +379,24 @@ a:hover {
   }
 
   .block .subcol {
-    min-width: 50vw;
-    max-width: 100vw;
-    text-align: left;
+    min-width: auto;
+    max-width: auto;
+
+    flex: 0 1 100%;
+    padding: 0 50px;
 
-    padding: 0 40px;
-    box-sizing: border-box;
-    display: block;
-  }
-
-
-  .feature-block { 
-    height: auto;
-    white-space: normal; 
   }
 
   .feature-block .feature {
-    width: 50vw;
-    height: 50vw;
+    flex: 0 1 50%;
   }
 
   .feature-block .image {
     height: 30vw;
   }
 
   .feature-block .usage{
-    padding: 20px 40px;
+    padding: 30px 30px 80px;
   }
 
 
@@ -471,13 +462,17 @@ a:hover {
 
 
   .feature-block .feature {
-    width: 100vw;
-    height: 400px;
+    flex: 0 1 100%;
+    height: auto;
   }
 
   .feature-block .image {
     height: 250px;
   }
+
+  .feature-block .usage{
+    padding: 30px 50px 80px;
+  }
 
   .demo {
     padding: 3px 0;

diff --git a/docs/css/style.css b/docs/css/style.css
@@ -148,6 +148,7 @@ code {
 #search {
   position: absolute;
   top: 0; left: 20vw; height: 70px; width: 20vw;
+  overflow: hidden;
 }
 
 #clearSearch {

diff --git a/docs/index.html b/docs/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Pts.js Documentation</title>

diff --git a/docs/js/doc.js b/docs/js/doc.js
@@ -97,8 +97,6 @@ var app = new Vue({
 
     loadClass: function( mod, cls ) {
       loadContents( mod+"_"+cls );
-      document.querySelector("#members").scrollTo(0,0);
-      document.querySelector("#contents").scrollTo(0,0);
     },
 
     jumpTo: function( id, ignoreHistory ) {
@@ -238,6 +236,10 @@ function loadContents( id, hash, reloading ) {
       setHistory( id, hash );
     } 
 
+    setTimeout( function() {
+      document.getElementById("members").scrollTo(0,0);
+      document.getElementById("contents").scrollTo(0,0);
+    }, 100);
   });
 }
 

diff --git a/index.html b/index.html
@@ -59,13 +59,13 @@ <h3>Connecting the dots</h3>
     <div class="subcol">
         <h3>A modern javascript library</h3>
         <p>Written in typescript and compiled to javascript ES6, Pts is lightweight and modular. It also comes with many useful algorithms for data visualization and creative coding.</p>
-        <p>You can use it directly (link from <a href="https://unpkg.com/pts/dist/pts.min.js">unpkg</a> or download from <a href="https://github.com/williamngan/pts/blob/master/dist/pts.min.js">github</a>):
+        <p>Use it directly (link from <a href="https://unpkg.com/pts/dist/pts.min.js">unpkg</a> or download from <a href="https://github.com/williamngan/pts/blob/master/dist/pts.min.js">github</a>):<br />
         <code>&lt;script src="/path/to/pts.min.js"&gt;&lt;/script&gt;</code></p>
-        <p>Or use it via <a href="https://www.npmjs.com/package/pts" target="_blank">npm</a> like this: <br />
+        <p>Or install it via <a href="https://www.npmjs.com/package/pts" target="_blank">npm</a> like this: <br />
         <code>npm install pts</code>
         </p>
         <p>Draw a dot that follows the pointer in a single line of code: <br />
-            <code>Pts.quickStart("myID")( t => form.point( space.pointer ) )</code>
+            <code>Pts.quickStart("myID")(t => form.point(space.pointer))</code>
             <br />Or <a href="./demo/edit/?name=pts.quickStart">something more</a> in just 5 lines of code.
         </p>
         <a href="./demo/"><div class="cta">See demos</div></a>

diff --git a/src/Canvas.ts b/src/Canvas.ts
@@ -153,7 +153,7 @@ export class CanvasSpace extends MultiTouchSpace {
     if (opt.retina !== false) {
       let r1 = window.devicePixelRatio || 1;
       let r2 = this._ctx.webkitBackingStorePixelRatio || this._ctx.mozBackingStorePixelRatio || this._ctx.msBackingStorePixelRatio || this._ctx.oBackingStorePixelRatio || this._ctx.backingStorePixelRatio || 1;      
-      this._pixelScale = r1/r2;
+      this._pixelScale = Math.max(1, r1/r2);
     }
 
     if (opt.offscreen) {