Improving the TOC

brentarias · Nov 6, 2011 · 0ee5cdb · 0ee5cdb
1 parent 55eacf6
commit 0ee5cdb
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 26 deletions.
diff --git a/Scripts/toc.js b/Scripts/toc.js
@@ -1,5 +1,10 @@
 jQuery(function($) {
-    var toc = $("#TocContainer ol");
+    var toc = $(".TocContainer ol")
+        .on("mouseenter", function() {
+            if (tocOverlay.width() > parent.width()) {
+                tocOverlay.show();
+            }
+        });
     $("#MainDiv :header")
         .each(function() {
             var h = $(this),
@@ -16,4 +21,14 @@ jQuery(function($) {
                 )
             );
         });
+    var parent = toc.parent(),
+        tocOverlay = parent
+          .clone()
+          .insertBefore(parent)
+          .css({
+            overflow: "visible",
+            position: "absolute",
+            right: "10px",
+        }).hide()
+          .on("mouseleave", function() {tocOverlay.hide();});
 });
diff --git a/Styles/Site.css b/Styles/Site.css
@@ -864,52 +864,53 @@ span.signature {
 	font-style: italic;
 }
 
-#TocContainer {
+.TocContainer {
 	border: solid 1px #CCCCCC;
 	padding: 4px;
 	background-color: #F9F9F9;
     overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     margin-top: 20px;
     margin-bottom: 20px;
-    text-wrap: none;
 }
 
-#TocContainer:hover {
-    overflow: visible;
-}
-
-#TocContainer ol {
+.TocContainer ol {
     list-style-type: none;
     padding:0;
 }
 
-#TocContainer h1, #TocContainer h2, #TocContainer h3, #TocContainer h4, #TocContainer h5, #TocContainer h6 {
+.TocContainer h1, .TocContainer h2, .TocContainer h3, .TocContainer h4, .TocContainer h5, .TocContainer h6 {
     font-size: 0.8em;
     border:none;
     padding:0;
     margin:0;
 }
 
-#TocContainer h1 {
+.TocContainer a:hover {
+    text-decoration: none;
+}
+
+.TocContainer h1 {
 }
 
-#TocContainer h2 {
+.TocContainer h2 {
     margin-left: 8px;
 }
 
-#TocContainer h3 {
+.TocContainer h3 {
     margin-left: 16px;
 }
 
-#TocContainer h4 {
+.TocContainer h4 {
     margin-left: 24px;
 }
 
-#TocContainer h5 {
+.TocContainer h5 {
     margin-left: 32px;
 }
 
-#TocContainer h6 {
+.TocContainer h6 {
     margin-left: 40px;
 }
 

diff --git a/_PageStart.cshtml b/_PageStart.cshtml
@@ -1,4 +1,15 @@
 @{
-    Page.Title = Path.GetFileNameWithoutExtension(Request.PhysicalPath).Replace('-', ' ');
+    var path = Request.PhysicalPath.Trim('\\');
+    if (path == Request.PhysicalApplicationPath.Trim('\\')) {
+        Page.DocumentTitle = "Orchard Documentation";
+        Page.Title = Page.DocumentTitle;
+        Page.EditUrl = "https://github.com/OrchardCMS/OrchardDoc/blob/master/Index.markdown";
+    }
+    else {
+        var docName = Path.GetFileNameWithoutExtension(path);
+        Page.DocumentTitle = docName.Replace('-', ' ');
+        Page.Title = Page.DocumentTitle + " - Orchard Documentation";
+        Page.EditUrl = "https://github.com/OrchardCMS/OrchardDoc/blob/master/Documentation/" + docName + ".markdown";
+    }
     Layout = "_SiteLayout.cshtml";
 }
diff --git a/_SiteLayout.cshtml b/_SiteLayout.cshtml
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>@(String.IsNullOrWhiteSpace(Page.Title) || Page.Title == "Index" ? "" : Page.Title + " - ")Orchard Documentation</title>
+        <title>@Page.Title</title>
         <link href="@Href("~/Styles/Site.css")" rel="stylesheet" />
         <link href="http://orchardproject.net/themes/orchardproject.net/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
         <script>(function(d){d.className="dyn "+d.className.substring(7,d.length);})(document.documentElement);</script> 
@@ -20,7 +20,7 @@
     <body>
         <header id="HeaderDiv">
             <div id="branding">
-                <h1><a href="http://orchardproject.net/"><span class="displayText">@Page.Title</span></a></h1>
+                <h1><a href="http://orchardproject.net/"><span class="displayText">Orchard Documentation</span></a></h1>
             </div>
             <nav id="navMain">
                 <ul>
@@ -42,14 +42,9 @@
                 <div id="SidebarContentDiv">
                     <input class="txtsearchbox" type="text" name="q"/><big><a href="#" id="search">&raquo;</a></big><br/>
                 </div>
-                <nav id="TocContainer"><ol></ol></nav>
+                <nav class="TocContainer"><ol></ol></nav>
                 <div id="SidebarFooterDiv">
-                    @{
-                        var editurl = (Request.PhysicalApplicationPath.Trim('\\') == Request.PhysicalPath.Trim('\\')) ?
-                            "https://github.com/OrchardCMS/OrchardDoc/blob/master/Index.markdown" :
-                            "https://github.com/OrchardCMS/OrchardDoc/blob/master/Documentation/" + Path.GetFileNameWithoutExtension(Request.PhysicalPath) + ".markdown";
-                    }
-                    <a href="@editurl">Edit this page</a>
+                    <a href="@Page.EditUrl">Edit this page</a>
                 </div>
             </div>
             <article id="MainDiv">
@@ -59,7 +54,7 @@
                 </div>
                 <a id="PageTop"></a>
             	<div id="PageHeaderDiv">
-            		<h1 class="pagetitle">@Page.Title</h1>
+            		<h1 class="pagetitle">@Page.DocumentTitle</h1>
     			</div>
             	<div id="PageContentDiv">
                     @RenderBody()