fix(): code elements exceeding page (#95)

* Fixes an issue where the code examples (`pre` elements) exceed the page boundaries and show extra scroll-space on mobile.
* Removes not-working pre-render scripts
* Removes unused dependencies and also bump for latest Angular 2.X (not 4.x-beta)
* Changes margin on mobile for guides. Those look weird on mobile.

Author: devversion

package.json

@@ -9,52 +9,43 @@
     "test": "ng test",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor",
-    "prerender": "node tools/prerenderer/get-all-urls.js && protractor config/protractor-prerender.conf.js",
-    "prerender:serve": "node tools/prerenderer/serve.js",
     "prod-build": "ng build --aot --prod && npm run prerender && cp -r tmp/prerendered/* dist/",
     "postinstall": "webdriver-manager update",
     "publish-prod": "ng build --aot --prod && firebase use material-angular-io && firebase deploy",
     "publish-dev": "ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.1",
-    "@angular/compiler": "^2.4.1",
-    "@angular/core": "^2.4.1",
-    "@angular/forms": "^2.4.1",
-    "@angular/http": "^2.4.1",
-    "@angular/material": "angular/material2-builds",
-    "@angular/platform-browser": "^2.4.1",
-    "@angular/platform-browser-dynamic": "^2.4.1",
-    "@angular/router": "~3.2.3",
+    "@angular/common": "^2.4.6",
+    "@angular/compiler": "^2.4.6",
+    "@angular/core": "^2.4.6",
+    "@angular/forms": "^2.4.6",
+    "@angular/http": "^2.4.6",
+    "@angular/material": "^2.0.0-beta.1",
+    "@angular/platform-browser": "^2.4.6",
+    "@angular/platform-browser-dynamic": "^2.4.6",
+    "@angular/router": "~3.4.6",
     "core-js": "^2.4.1",
-    "fs-extra": "^1.0.0",
-    "hapi": "^15.2.0",
-    "inert": "^4.0.2",
-    "rxjs": "^5.0.1",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.4"
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.7.6"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.1",
-    "@types/jasmine": "^2.2.30",
-    "@types/node": "^6.0.42",
-    "angular-cli": "1.0.0-beta.24",
-    "codelyzer": "1.0.0-beta.1",
+    "@angular/cli": "^1.0.0-beta.30",
+    "@angular/compiler-cli": "^2.4.6",
+    "@types/jasmine": "^2.5.41",
+    "@types/node": "^7.0.5",
     "highlight.js": "^9.9.0",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",
     "karma": "1.2.0",
-    "karma-browserstack-launcher": "^1.1.1",
+    "karma-browserstack-launcher": "^1.2.0",
     "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
+    "karma-jasmine": "^1.1.0",
     "karma-remap-istanbul": "^0.2.1",
     "karma-sauce-launcher": "^1.1.0",
-    "protractor": "4.0.9",
-    "ts-node": "1.2.1",
-    "tslint": "3.13.0",
-    "typescript": "~2.0.10",
-    "webdriver-manager": "10.2.5"
+    "protractor": "^5.1.1",
+    "ts-node": "^2.0.0",
+    "tslint": "^4.4.2",
+    "typescript": "~2.0.10"
   }
 }

protractor-prerender.conf.js

@@ -1,3 +1,9 @@
+@import "~@angular/material/core/style/variables";
+
+/* For desktop, the content should be aligned with the page title. */
+$guide-content-margin-side: 70px;
+$guide-content-margin-side-xs: 15px;
+
 :host {
   display: flex;
   flex-direction: column;
@@ -6,6 +12,11 @@
 
 .docs-guide-content {
   display: block;
-  margin: 20px 0 0 70px;
+  margin: 20px $guide-content-margin-side 0;
   flex-grow: 1;
-}
+
+  @media ($md-xsmall) {
+    margin-left: $guide-content-margin-side-xs;
+    margin-right: $guide-content-margin-side-xs;
+  }
+}

src/app/pages/guide-viewer/guide-viewer.scss

@@ -29,6 +29,13 @@ h1, h2 {
   weight: 400;
 }
 
+pre {
+  // Pre elements won't wrap text by default and can exceed the boundaries of their parent element.
+  // This adds extra scroll space when visiting the docs mobile. Pre-wrapping the code examples
+  // will ensure that the code never exceeds the page width.
+  white-space: pre-wrap;
+}
+
 .docs-primary-header {
   padding-left: 20px;