Merge pull request #394 from canjs/fix/3100/ie-design-bugs

Fix IE 9 & 10 design bugs

Author: imaustink

.gitignore

@@ -4,4 +4,5 @@ doc/
 index.html
 .vscode
 *.log
-.DS_Store
+.DS_Store
+npm-debug.log

bit-docs.js

@@ -9,8 +9,18 @@ module.exports = function(bitDocs){
     bitDocs.register("html", {
         templates: path.join(__dirname, "templates"),
         dependencies: dependencies,
-        staticDist: path.join(__dirname, "dist", "static")
+        staticDist: path.join(__dirname, "dist", "static"),
+        package: {
+            steal: {
+                configDependencies: [
+                    "./node_modules/steal-conditional/conditional"
+                ]
+            },
+            devDependencies: {
+                "flexibility": "^2.0.1"
+            }
+        }
     });
 
     bitDocs.register("tags", tags);
-}
+};

build-search-worker.js

@@ -14,7 +14,7 @@ var dest = siteConfig.dest + '/static/search-worker.js';
 
 fs.mkdir(siteConfig.dest, function() {
   stealTools.export({
-    system: {
+    steal: {
       config: __dirname + '/package.json!npm',
       main: 'static/search-worker'
     },

make-example.js

@@ -13,13 +13,24 @@ var docMap = readFile(__dirname+"/docMap.json").then(function(source){
 var siteConfig = {
     html: {
         templates: path.join(__dirname, "templates"),
+        package: {
+            steal: {
+                configDependencies: [
+                    "./node_modules/steal-conditional/conditional"
+                ]
+            },
+            devDependencies: {
+                "flexibility": "^2.0.1"
+            }
+        },
         dependencies: {
             "bit-docs-html-canjs": __dirname,
             "bit-docs-prettify": "^0.1.0",
-			"bit-docs-html-highlight-line": "^0.2.2",
-			//TODO: This should not be include here and should only be included in package.json.
-			//  we get an error without this, here, though
-			"steal-stache": "^3.0.1"
+            "bit-docs-html-highlight-line": "^0.2.2",
+            //TODO: This should not be include here and should only be included in package.json.
+            //  we get an error without this, here, though
+            "steal-stache": "^3.0.1",
+            "steal-conditional": "^0.3.6"
         },
         staticDist: [
             path.join(__dirname, "dist", "static")

package.json

@@ -30,26 +30,28 @@
     "url": "https://github.com/canjs/bit-docs-html-canjs/issues"
   },
   "homepage": "https://github.com/canjs/bit-docs-html-canjs#readme",
-  "system": {},
   "dependencies": {
     "can-control": "^3.0.3",
     "can-util": "^3.0.10",
     "escape-html": "^1.0.3",
+    "flexibility": "^2.0.1",
     "jquery": "^3.1.1",
     "lodash": "^4.17.4",
     "lunr": "bit-docs/lunr.js#279-safari-exception",
     "steal-stache": "^3.0.1",
     "unescape-html": "^1.0.0"
   },
   "devDependencies": {
-    "bit-docs-generate-html": "^0.7.0",
+    "bit-docs-generate-html": "^0.8.0",
     "bit-docs-generate-searchmap": "^0.1.3",
     "bit-docs-html-toc": "^0.6.0",
     "connect": "^3.5.0",
     "normalize.css": "^5.0.0",
     "q": "^1.4.1",
-    "steal": "^0.16.44",
-    "steal-qunit": "^0.1.4",
+    "steal": "^1.5.9",
+    "steal-conditional": "^0.3.6",
+    "steal-qunit": "^1.0.1",
+    "steal-tools": "^1.8.2",
     "testee": "^0.7.0",
     "zombie": "^5.0.5"
   }

static/canjs.js

@@ -1,3 +1,4 @@
+require("flexibility#?./needs-flexibility");
 require("./canjs.less!");
 var LoadingBar = require('./loading-bar.js');
 $ = require("jquery");
@@ -30,6 +31,11 @@ var $articleContainer,
 	hasShownSearch = false;
 	init();
 
+	// flexbox for ie9/10
+	if(typeof flexibility !== 'undefined'){
+		flexibility(document.getElementById('everything'));
+	}
+
 	// prevent sidebar from changing width when header hides
 	$('#left').css('min-width', $('.top-left').width());
 
@@ -219,7 +225,7 @@ function navigate(href, updateLocation) {
 		},
 		success: function(content) {
 
-			if(updateLocation !== false){
+			if(window.history.pushState && updateLocation !== false){
 				window.history.pushState(null, null, href);
 			}
 
@@ -279,7 +285,7 @@ function navigate(href, updateLocation) {
 			}
 		},
 		error: function() {
-			if(updateLocation !== false){
+			if(window.history.pushState && updateLocation !== false){
 				window.history.pushState(null, null, href);
 			}
 			// just reload the page if this fails

static/canjs.less

@@ -1,5 +1,5 @@
 /*---------- UTILITIES ----------*/
-@import "/node_modules/normalize.css/normalize.css";
+@import "locate://normalize.css/normalize.css";
 @import "variables.less";
 @import "mixins.less";
 

static/header.less

@@ -1,16 +1,15 @@
 .top-right-top {
-    display: inline-flex;
-    flex-direction: row-reverse;
-    height: @brand-height;
-    width: 100%;
-    justify-content: space-between;
+  .flex;
+  flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-shrink: 0;
+  height: @brand-height;
+  justify-content: space-between;
 }
-
 .brand {
     height: @brand-height;
     padding-top: @gutter;
     background: white;
-
     .dropdown {
         display:none;
     }
@@ -112,7 +111,6 @@
 .top-right-links {
     display: none;
     @media screen and (min-width: @breakpoint){
-        display: flex;
         .flex;
         list-style: none;
         margin: @gutter @gutter*2;
@@ -121,6 +119,7 @@
         flex-basis: 100%;
         align-self: flex-start;
         > li {
+            .flex;
             font-size: 14px;
             margin-right: @gutter;
             > a {

static/layout.less

@@ -9,6 +9,7 @@
   -webkit-overflow-scrolling: touch
 }
 #left {
+  -ms-flex-wrap: wrap;
   position: fixed;
   width: @sidebar-width;
   min-width: 0;
@@ -25,6 +26,7 @@
   }
 }
 #right {
+  -ms-flex-wrap: wrap;
   height: 100%;
   min-height: 100%;
   max-height: 100%;
@@ -53,13 +55,15 @@
 
 @media screen and (min-width: @breakpoint){
   .top-left {
+    width: 100%;
     height: auto;
   }
 }
 .top-right {
   flex-shrink: 0;
   flex-wrap: nowrap;
   height: auto;
+  width: 100%;
   .border-bottom;
   @media screen and (min-width: @breakpoint){
     border: none;

static/mixins.less

@@ -13,7 +13,8 @@
 .border {
   border: 1px solid @border-color;
 }
-.flex {  
+.flex {
+  -js-display: flex; // ie9/10 flexbox fix
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -36,7 +37,7 @@
   font-size: .9em;
   color: @code-color;
 }
-.transition-left { 
+.transition-left {
   -webkit-transition: left .5s ;
   -moz-transition: left .5s;
   -o-transition: left .5s;
@@ -114,4 +115,4 @@
     top: 8px;
     margin-right: 5px;
   }
-}
+}