when < 768px, left nav becomes a drawer, which animates out. tested all the way down to iphone4

Closes #728

LGTM given by: @sethladd, @devoncarew

Squashed commit of the following:

commit 1050a03
Author: Seth Ladd <[email protected]>
Date:   Fri Jul 24 09:29:25 2015 -0700

    when < 768px, left nav becomes a drawer, which animates out.
    tested all the way down to iphone4

Author: sethladd

lib/resources/styles.css

@@ -24,6 +24,10 @@ body {
   overflow-x: hidden;
 }
 
+nav {
+  font-size: 17px;
+}
+
 /* some of this is to reset bootstrap */
 nav.navbar {
   background-color: inherit;
@@ -37,6 +41,10 @@ nav.navbar {
   -webkit-justify-content: center;
 }
 
+nav .container {
+  white-space: nowrap;
+}
+
 header {
   background-color: #607D8B;
   color: white;
@@ -51,6 +59,10 @@ header.container-fluid {
   padding: 0;
 }
 
+header .masthead {
+  padding-top: 64px;
+}
+
 .body {
   margin-top: 24px;
 }
@@ -79,7 +91,7 @@ h1.title {
 }
 
 h2 {
-  font-size: 32px;
+  font-size: 24px;
 }
 
 h5 {
@@ -174,7 +186,6 @@ code {
 }
 
 header h1 {
-  margin-top: 80px;
   font-weight: 400;
   margin-bottom: 16px;
 }
@@ -208,12 +219,6 @@ section.summary h2 {
   border-bottom: 1px solid #CFD8DC;
 }
 
-section.summary dd {
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
 /* indents wrapped lines */
 section.summary dt {
   margin-left: 24px;
@@ -315,27 +320,27 @@ footer .container-fluid {
 
 .gt-separated {
   list-style: none;
-  padding: 0;
-  display: inline;
 }
 
 .gt-separated li {
-  display: inline;
+  display: inline-block;
 }
 
-.gt-separated li:after {
+.gt-separated li:before {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#FFFFFF' d='M6.7,4L5.7,4.9L8.8,8l-3.1,3.1L6.7,12l4-4L6.7,4z'/></svg>");
   background-position: center;
-  content: " ";
-  padding-left: 16px;
+  content: "\00a0";
+  margin: 0 16px 0 12px;
 }
 
-.gt-separated.dark li:after {
+.gt-separated.dark li:before {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#727272' d='M6.7,4L5.7,4.9L8.8,8l-3.1,3.1L6.7,12l4-4L6.7,4z'/></svg>");
 }
 
-.gt-separated li:last-child:after {
+.gt-separated li:first-child:before {
   background-image: none;
+  content: "";
+  margin: 0;
 }
 
 .is-inherited {
@@ -351,12 +356,25 @@ footer .container-fluid {
   padding: 0;
   margin: 8px 0 8px 0;
   font-size: 17px;
+  white-space: nowrap;
+  line-height: 1;
 }
 
-.breadcrumbs li.self-crumb {
+@media screen and (max-width: 768px) {
+  .breadcrumbs {
+    margin: 0 0 24px 0;
+  }
+}
+
+.self-crumb {
   color: #CFD8DC;
 }
 
+nav .self-name {
+  color: #CFD8DC;
+  display: none;
+}
+
 .annotation-list {
   list-style: none;
   padding: 0;
@@ -467,46 +485,67 @@ span.top-level-variable-type {
 
 /* sidebar styles */
 
-.sidebar-offcanvas h5 {
-  margin-bottom: 16px;
+.sidebar-offcanvas-left {
+  background-color: #f7f7f7;
 }
 
-ol#sidebar {
+ol.sidebar {
   list-style: none;
-  padding: 0;
+  padding: 16px 0 16px 0;
   font-size: 14px;
   line-height: 24px;
 }
 
-ol#sidebar li {
+ol.sidebar li {
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-ol#sidebar li.section-title a {
+ol.sidebar li.section-title a {
   color: inherit;
 }
 
-ol#sidebar li.section-title {
+ol.sidebar li.section-title {
   font-size: 12px;
   text-transform: uppercase;
   line-height: 20px;
   margin-top: 24px;
 }
 
-ol#sidebar li:first-child {
+ol.sidebar li:first-child {
   padding-top: 0;
   margin-top: 0;
 }
 
-#sidenav-toggle {
+button {
+  padding: 0;
+}
+
+#sidenav-left-toggle {
   display: none;
   vertical-align: text-bottom;
   padding: 0;
 }
 
-@media screen and (max-width:767px) {
-  #sidenav-toggle {
+#sidenav-right-toggle {
+  display: inline;
+  background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#FFFFFF' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
+  background-position: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  display: none;
+  vertical-align: text-bottom;
+}
+
+/* left-nav disappears, and can transition in from the left */
+@media screen and (max-width:768px) {
+  .main-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  #sidenav-left-toggle {
     display: inline;
     background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#FFFFFF' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
     background-position: center;
@@ -515,21 +554,55 @@ ol#sidebar li:first-child {
     border: none;
     margin-right: 24px;
   }
-  .row-offcanvas {
-    position:relative;
+
+  .sidebar-offcanvas-left {
+    left:-100%;
+    position:fixed;
     -webkit-transition:all .25s ease-out;
     -o-transition:all .25s ease-out;
     transition:all .25s ease-out;
+    z-index: 2000;
+    top:0;
+    padding-left: 15px;
+    width: 280px; /* works all the way down to an iphone 4 */
+    height: 100%;
+    background-color: white;
+    overflow-y: auto; /* TODO: how to hide scroll bars? */
   }
-  .row-offcanvas-right{right:0;}
-  .row-offcanvas-left{left:0;}
-  .row-offcanvas-right
-  .sidebar-offcanvas{right:-50%;}
-  .row-offcanvas-left
-  .sidebar-offcanvas{left:-50%; margin-left: 16px;}
-  .row-offcanvas-right.active{right:50%;}
-  .row-offcanvas-left.active{left:50%;}
-  .sidebar-offcanvas{position:absolute;top:0;width:50%;}
+
+  .sidebar-offcanvas-left.active {
+    left:0; /* this animates our drawer into the page */
+  }
+}
+
+/* the right nav disappears out of view */
+/* THIS IS TOTALLY BROKEN... WILL REDO RIGHT-NAV */
+@media screen and (max-width: 992px) {
+  .sidebar-offcanvas-right{
+    right:-66%;
+    position:fixed;
+    -webkit-transition:all .25s ease-out;
+    -o-transition:all .25s ease-out;
+    transition:all .25s ease-out;
+    z-index: 2000;
+    top:0;
+    width:50%;
+    padding: 0;
+  }
+
+  /* this mumbo jumbo disables scroll bars */
+  .sidebar-offcanvas-right {
+    overflow-y: auto;
+    visibility: hidden;
+  }
+
+  .sidebar-offcanvas-right ol {
+    visibility: visible;
+    background-color: white;
+  }
+  /* /insanity */
+
+  .sidebar-offcanvas-right.active{right:0;}
 }
 
 /* source code method bodies */

lib/src/html_generator.dart

@@ -88,7 +88,8 @@ class Templates {
       'documentation',
       'name_summary',
       'sidebar_for_class',
-      'source_code'
+      'source_code',
+      'sidebar_for_library'
     ];
 
     for (var partial in partials) {

lib/src/model.dart

@@ -368,14 +368,18 @@ class Package {
 
   String get version => packageMeta.version;
 
+  bool get hasDocumentation =>
+      documentationFile != null && documentationFile.contents.isNotEmpty;
+
   bool get hasDocumentationFile => documentationFile != null;
 
   FileContents get documentationFile => packageMeta.getReadmeContents();
 
   // TODO: Clients should use [documentationFile] so they can act differently on
   // plain text or markdown.
-  String get documentation =>
-      hasDocumentationFile ? documentationFile.contents : null;
+  String get documentation {
+    return hasDocumentationFile ? documentationFile.contents : null;
+  }
 
   String get documentationAsHtml => renderMarkdownToHtml(documentation);
 

lib/src/package_meta.dart

@@ -48,6 +48,9 @@ class FileContents {
 }
 
 class _FilePackageMeta extends PackageMeta {
+  FileContents _readme;
+  FileContents _license;
+  FileContents _changelog;
   Map _pubspec;
 
   _FilePackageMeta(Directory dir) : super(dir) {
@@ -67,18 +70,24 @@ class _FilePackageMeta extends PackageMeta {
   String get homepage => _pubspec['homepage'];
 
   FileContents getReadmeContents() {
-    return new FileContents(
-        _locate(dir, ['readme.md', 'readme.txt', 'readme']));
+    if (_readme != null) return _readme;
+    _readme =
+        new FileContents(_locate(dir, ['readme.md', 'readme.txt', 'readme']));
+    return _readme;
   }
 
   FileContents getLicenseContents() {
-    return new FileContents(
+    if (_license != null) return _license;
+    _license = new FileContents(
         _locate(dir, ['license.md', 'license.txt', 'license']));
+    return _license;
   }
 
   FileContents getChangelogContents() {
-    return new FileContents(
+    if (_changelog != null) return _changelog;
+    _changelog = new FileContents(
         _locate(dir, ['changelog.md', 'changelog.txt', 'changelog']));
+    return _changelog;
   }
 }
 
@@ -89,12 +98,6 @@ File _locate(Directory dir, List<String> fileNames) {
     for (File f in files) {
       String baseName = path.basename(f.path).toLowerCase();
       if (baseName == name) return f;
-    }
-  }
-
-  for (String name in fileNames) {
-    for (File f in files) {
-      String baseName = path.basename(f.path).toLowerCase();
       if (baseName.startsWith(name)) return f;
     }
   }