From a120a3aa3f6ebf6800f1c96c1eed11e46f06f6b1 Mon Sep 17 00:00:00 2001 From: William Ngan Date: Tue, 7 Aug 2018 02:32:24 -0700 Subject: [PATCH] flexbox and pixelScale fix --- assets/style.css | 63 +++++++++++++++++++++------------------------- docs/css/style.css | 1 + docs/index.html | 1 + docs/js/doc.js | 6 +++-- index.html | 6 ++--- src/Canvas.ts | 2 +- 6 files changed, 39 insertions(+), 40 deletions(-) diff --git a/assets/style.css b/assets/style.css index 3cb30ba0..8a896ca9 100644 --- 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,24 +379,16 @@ 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 { @@ -405,7 +396,7 @@ a:hover { } .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 index 7288c950..1dad240e 100644 --- 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 index 9274c17d..9ecfd848 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,3 +1,4 @@ + Pts.js Documentation diff --git a/docs/js/doc.js b/docs/js/doc.js index 4244d680..7e915bad 100644 --- 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 index 9e75a5dd..2c7938ae 100644 --- a/index.html +++ b/index.html @@ -59,13 +59,13 @@

Connecting the dots

A modern javascript library

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.

-

You can use it directly (link from unpkg or download from github): +

Use it directly (link from unpkg or download from github):
<script src="/path/to/pts.min.js"></script>

-

Or use it via npm like this:
+

Or install it via npm like this:
npm install pts

Draw a dot that follows the pointer in a single line of code:
- Pts.quickStart("myID")( t => form.point( space.pointer ) ) + Pts.quickStart("myID")(t => form.point(space.pointer))
Or something more in just 5 lines of code.

See demos
 diff --git a/src/Canvas.ts b/src/Canvas.ts index 470a1340..dc9a0d39 100644 --- 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) {