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

1 files changed, 72 insertions, 21 deletions

diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css
index 64a0665d400..ae6f8c55416 100644
--- a/src/librustdoc/html/static/main.css
+++ b/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;
+    }
+}
\ No newline at end of file