First cut on #838, fix up the layout for narrow views

hawtio · Dec 13, 2013 · f8a0dac · f8a0dac
1 parent 3d9d0d3
commit f8a0dac
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 96 deletions.
diff --git a/hawtio-web/src/main/webapp/app/site/html/book.html b/hawtio-web/src/main/webapp/app/site/html/book.html
@@ -1,18 +1,13 @@
-<link rel="stylesheet" href="app/ui/css/toc.css" type="text/css"/>
 <div ng-controller="Site.PageController">
   <div class="wiki-fixed">
-    <div class="row-fluid">
-      <div class="span3">
-        <div class="tocify" wiki-href-adjuster>
-          <!-- TODO we maybe want a more flexible way to find the links to include than the current link-filter -->
-          <div hawtio-toc-display get-contents="getContents(filename, cb)"
-               html="html" link-filter="">
-          </div>
+    <div class="row-fluid toc-container">
+      <div class="tocify" wiki-href-adjuster>
+        <!-- TODO we maybe want a more flexible way to find the links to include than the current link-filter -->
+        <div hawtio-toc-display get-contents="getContents(filename, cb)"
+             html="html" link-filter="">
         </div>
       </div>
-      <div class="span9">
-        <div id="toc-content"></div>
-      </div>
+      <div class="toc-content" id="toc-content"></div>
     </div>
   </div>
 </div>
diff --git a/hawtio-web/src/main/webapp/app/ui/css/toc.css b/hawtio-web/src/main/webapp/app/ui/css/toc.css
diff --git a/hawtio-web/src/main/webapp/app/wiki/html/viewBook.html b/hawtio-web/src/main/webapp/app/wiki/html/viewBook.html
@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="app/ui/css/toc.css" type="text/css"/>
-
 <div ng-controller="Wiki.ViewController">
 
   <script type="text/ng-template" id="fileCellTemplate.html">
@@ -36,17 +34,13 @@
 
   <div class="wiki-fixed form-horizontal">
     <div class="row-fluid">
-      <div class="span3">
-        <div class="tocify" wiki-href-adjuster>
-          <!-- TODO we maybe want a more flexible way to find the links to include than the current link-filter -->
-          <div hawtio-toc-display get-contents="getContents(filename, cb)"
-               html="html" link-filter="[file-extension]">
-          </div>
+      <div class="tocify" wiki-href-adjuster>
+        <!-- TODO we maybe want a more flexible way to find the links to include than the current link-filter -->
+        <div hawtio-toc-display get-contents="getContents(filename, cb)"
+             html="html" link-filter="[file-extension]">
         </div>
       </div>
-      <div class="span9">
-        <div id="toc-content"></div>
-      </div>
+      <div class="toc-content" id="toc-content"></div>
     </div>
   </div>
 </div>
diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2954,6 +2954,67 @@ i.expandable-indicator.folder {
 }
 /* End 800x600 optimizations */
 
+/*
+ * jquery.tocify.css 1.8.0
+ * Author: @gregfranko
+ */
+/* The Table of Contents container element */
+.tocify {
+    width: 232px;
+    padding-left: 1em;
+    padding-right: 1em;
+    overflow: auto;
+    position: fixed;
+    border: 1px solid #ccc;
+    webkit-border-radius: 6px;
+    moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+.toc-container {
+  position: relative;
+  width: 100%;
+}
+
+.toc-content {
+  position: absolute;
+  left: 278px;
+  right: 0;
+}
+
+.tocify li a.active {
+    font-weight: bolder;
+}
+
+/* Makes the font smaller for all subheader elements. */
+.tocify-subheader li {
+    font-size: 12px;
+}
+
+/* Further indents second level subheader elements. */
+.tocify-subheader .tocify-subheader {
+    text-indent: 30px;
+}
+
+/* Further indents third level subheader elements. You can continue this pattern if you have more nested elements. */
+.tocify-subheader .tocify-subheader .tocify-subheader {
+    text-indent: 40px;
+}
+
+@media(max-width: 700px) {
+  .tocify {
+    position: static;
+    width: auto;
+    margin-bottom: 1em;
+  }
+
+  .toc-content {
+    position: static;
+    left: auto;
+  }
+
+}
+
 fs-donut svg g text.value {
   font-size: 40px;
 }