make rustdoc more responsive

* move some sidebar contents to a title bar when small
* inline description toggle when small
* make out-of-band and in-band content share space, rather than float and clash
* compress wording of out-of-band content to avoid line-wrap as much as possible

Author: Gankra

src/librustdoc/html/render.rs

@@ -1294,7 +1294,7 @@ impl<'a> Item<'a> {
 impl<'a> fmt::Show for Item<'a> {
     fn fmt(&self, fmt: &mut fmt::Formatter) -> fmt::Result {
         // Write the breadcrumb trail header for the top
-        try!(write!(fmt, "\n<h1 class='fqn'>"));
+        try!(write!(fmt, "\n<h1 class='fqn'><div class='in-band'>"));
         match self.item.inner {
             clean::ModuleItem(ref m) => if m.is_crate {
                     try!(write!(fmt, "Crate "));
@@ -1316,7 +1316,7 @@ impl<'a> fmt::Show for Item<'a> {
             let cur = self.cx.current.as_slice();
             let amt = if self.ismodule() { cur.len() - 1 } else { cur.len() };
             for (i, component) in cur.iter().enumerate().take(amt) {
-                try!(write!(fmt, "<a href='{}index.html'>{}</a>::",
+                try!(write!(fmt, "<a href='{}index.html'>{}</a>&#8203;::",
                             "../".repeat(cur.len() - i - 1),
                             component.as_slice()));
             }
@@ -1325,10 +1325,10 @@ impl<'a> fmt::Show for Item<'a> {
                     shortty(self.item), self.item.name.get_ref().as_slice()));
 
         // Write stability level
-        try!(write!(fmt, "{}", Stability(&self.item.stability)));
+        try!(write!(fmt, "&#8203;{}", Stability(&self.item.stability)));
 
         // Links to out-of-band information, i.e. src and stability dashboard
-        try!(write!(fmt, "<span class='out-of-band'>"));
+        try!(write!(fmt, "</div><div class='out-of-band'>"));
 
         // Write stability dashboard link
         match self.item.inner {
@@ -1340,8 +1340,8 @@ impl<'a> fmt::Show for Item<'a> {
 
         try!(write!(fmt,
         r##"<span id='render-detail'>
-            <a id="collapse-all" href="#">[collapse all]</a>
-            <a id="expand-all" href="#">[expand all]</a>
+            <a id="collapse-all" href="#">[-]
+            </a>&nbsp;<a id="expand-all" href="#">[+]</a>
         </span>"##));
 
         // Write `src` tag
@@ -1360,7 +1360,7 @@ impl<'a> fmt::Show for Item<'a> {
             }
         }
 
-        try!(write!(fmt, "</span>"));
+        try!(write!(fmt, "</div>"));
 
         try!(write!(fmt, "</h1>\n"));
 

src/librustdoc/html/static/main.css

@@ -247,8 +247,19 @@ nav.sub {
 .docblock h3, .docblock h4, .docblock h5 { font-size: 1em; }
 
 .content .out-of-band {
-    float: right;
     font-size: 23px;
+    width: 40%;
+    margin: 0px;
+    padding: 0px;
+    text-align: right;
+    display: inline-block;
+}
+
+.content .in-band {
+    width: 60%;
+    margin: 0px;
+    padding: 0px;
+    display: inline-block;
 }
 
 .content table {
@@ -277,8 +288,8 @@ nav.sub {
 }
 .content .multi-column li { width: 100%; display: inline-block; }
 
-.content .method { 
-    font-size: 1em; 
+.content .method {
+    font-size: 1em;
     position: relative;
 }
 .content .methods .docblock { margin-left: 40px; }
@@ -450,8 +461,8 @@ pre.rust { position: relative; }
     top: 0;
     right: 10px;
     font-size: 150%;
-    -webkit-transform: scaleX(-1); 
-    transform: scaleX(-1); 
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
 }
 
 .methods .section-header {
@@ -465,22 +476,6 @@ pre.rust { position: relative; }
     content: '\2002\00a7\2002';
 }
 
-/* Media Queries */
-
-@media (max-width: 700px) {
-    .sidebar {
-        display: none;
-    }
-
-    .content {
-        margin-left: 0px;
-    }
-
-    nav.sub {
-        margin: 0 auto;
-    }
-}
-
 .collapse-toggle {
     font-weight: 100;
     position: absolute;
@@ -513,3 +508,59 @@ pre.rust { position: relative; }
     color: #999;
     font-style: italic;
 }
+
+
+
+/* Media Queries */
+
+@media (max-width: 700px) {
+    body {
+        padding-top: 0px;
+    }
+
+    .sidebar {
+        height: 40px;
+        min-height: 40px;
+        width: 100%;
+        margin: 0px;
+        padding: 0px;
+        position: static;
+    }
+
+    .sidebar .location {
+        float: left;
+        margin: 0px;
+        padding: 5px;
+        width: 60%;
+        background: inherit;
+        text-align: left;
+        font-size: 24px;
+    }
+
+    .sidebar img {
+        width: 35px;
+        margin-top: 5px;
+        margin-bottom: 0px;
+        float: left;
+    }
+
+    nav.sub {
+        margin: 0 auto;
+    }
+
+    .sidebar .block {
+        display: none;
+    }
+
+    .content {
+        margin-left: 0px;
+    }
+
+    .toggle-wrapper > .collapse-toggle {
+        left: 0px;
+    }
+
+    .toggle-wrapper {
+        height: 1.5em;
+    }
+}