Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

quick toc at top of docs, free up horizontal space #8

Closed
wants to merge 3 commits into from

3 participants

@schweickism

Proposed changes per my message here: http://news.php.net/php.webmaster/14786

  • Quick toc is displayed horizontally at top of the page, and becomes fixed once the user scrolls passed it.
  • The "current section" (based on scroll position) is distinguished as the user scrolls.
  • Removed some of the right-padding to free up more screen real estate.

I would still prefer fluid 100% width, but that's a more dramatic change and looks a little strange with the logo/navigation/search being in the center. Perhaps all the header content could be left-aligned? (As old fashioned as that sounds.)

schweickism added some commits
@schweickism schweickism Update styles/doc.css
display quick toc horizontally at top of doc entry and added some styles for switching to fixed pos when the user scrolls passed it.
also removed right margin on .docs #layout .layout-content to free up more horizontal space.
c7d1d05
@schweickism schweickism Update js/common.js
switch quick toc from static pos to fixed when the user scrolls passed it.
distinguish the current section link based on scroll position.
7df1f78
@schweickism schweickism Update include/shared-manual.inc
moved .links above .content in quick toc
removed seemingly erroneous extra closing aside after quick toc.
f6ed61e
@LawnGnome

I don't mind the theory on this — the sidebar TOC has real problems on narrow displays, in particular, but I'm not totally sold on the styling of this as yet. Might end up being something to play with post-launch (assuming we launch soon as I hope).

I'll have a think about it. Sorry we haven't been as diligent on the PRs as we should have been!

@schweickism

Thanks for the response. I had another thought: What if the TOC simply hides off the side of the screen and only expands when you mouseover it? The language, report a bug, and edit options could have additional inline links at the bottom of the page for those 1% of users w/out javascript.

Is there any chance for reducing the side margins before this is launched? I pointed out on the news group that mktime, for example, is particularly hard to follow with the large font and rather restrictive content area.

@bjori
Owner

I like the idea!
Not a fan of the actual layout of it, but I like the idea of it floating at the top for quick navigation...
Unsure how useful it is though :]

@bjori
Owner

Closing.. No longer applies and never updated

@bjori bjori closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 1, 2012
  1. @schweickism

    Update styles/doc.css

    schweickism authored
    display quick toc horizontally at top of doc entry and added some styles for switching to fixed pos when the user scrolls passed it.
    also removed right margin on .docs #layout .layout-content to free up more horizontal space.
  2. @schweickism

    Update js/common.js

    schweickism authored
    switch quick toc from static pos to fixed when the user scrolls passed it.
    distinguish the current section link based on scroll position.
  3. @schweickism

    Update include/shared-manual.inc

    schweickism authored
    moved .links above .content in quick toc
    removed seemingly erroneous extra closing aside after quick toc.
This page is out of date. Refresh to see the latest.
Showing with 76 additions and 13 deletions.
  1. +1 −2  include/shared-manual.inc
  2. +41 −1 js/common.js
  3. +34 −10 styles/doc.css
View
3  include/shared-manual.inc
@@ -559,13 +559,12 @@ function manual_setup_beta($setup) {
echo '
<aside id="quicktoc">
<div class="language">'.manual_language_chooser($setup['head'][1], $setup['this'][0]).'</div>
- <div class="content"></div>
<div class="links">
<a title="Report a bug" href="http://bugs.php.net/report.php?bug_type=Documentation+problem&amp;manpage=' . $PGI['this'][0] . '">Report a bug</a>
<a title="Edit this page" href="https://edit.php.net/?project=PHP&amp;perm=' . $PGI['head'][1] . '/' . $PGI['this'][0] . '">Edit this page</a>
</div>
+ <div class="content"></div>
</aside>';
- echo '</aside>';
}
function manual_language_chooser($currentlang, $currentpage) {
global $ACTIVE_ONLINE_LANGUAGES;
View
42 js/common.js
@@ -190,6 +190,9 @@ $(document).ready(function() {
var pageid = $("section.docs > div").attr("id");
var editurl = "https://edit.php.net/?perm=/" + getLanguage() + "/" + pageid + ".php&project=PHP";
var bugurl = "http://bugs.php.net/report.php?bug_type=Documentation+problem&amp;manpage=" + pageid;
+
+ //ids to check against scroll position (can't easly cache positions themselves due to dynamic menus and such)
+ var quicktocItems = [];
// Add edit & bugreporting urls to the footer
$($(".footmenu")[1]).after(
@@ -207,7 +210,9 @@ $(document).ready(function() {
foundToc = true;
}
var currItem = $(this);
- $('<a class="toc_item" href="#' + currItem.parent().attr('id') + '">' + currItem.text() + '</a>')
+ var currItemParentId = currItem.parent().attr('id');
+ quicktocItems.push(currItemParentId.replace(".", "\\\."));
+ $('<a class="toc_item' + ((window.location.hash == currItemParentId) ? ' toc_item_curr' : '') + '" id="toc_item_' + currItemParentId + '" href="#' + currItemParentId + '">' + currItem.text() + '</a>')
.appendTo( $('<li>') ).parent().appendTo(l);
});
@@ -222,6 +227,41 @@ $(document).ready(function() {
$quicktoc.find(".content").append("<h5>Quick TOC</h5>").append(l);
$quicktoc.find('.links, .content').show();
+
+ //set an explicit width from static pos for the fixed pos
+ $quicktoc.css("width", "" + $quicktoc.width() + "px");
+ var quicktocFixedState = false, quicktocResetOffset = $quicktoc.offset().top;
+ if($(document).scrollTop() > quicktocResetOffset) {
+ $quicktoc.addClass("quicktoc-fixed");
+ quicktocFixedState = true;
+ }
+
+ $(document).scroll(function() {
+ //set the current section in quick toc based on scroll pos
+ var scrollTop = $(document).scrollTop();
+ if(quicktocFixedState && scrollTop <= quicktocResetOffset) {
+ //reset to static position
+ $("a.toc_itme").removeClass("toc_item_curr");
+ $quicktoc.removeClass("quicktoc-fixed");
+ quicktocFixedState = false;
+ }
+ else if(quicktocFixedState || scrollTop > $quicktoc.offset().top) {
+ if(!quicktocFixedState) {
+ quicktocResetOffset = $quicktoc.offset().top;
+ $quicktoc.addClass("quicktoc-fixed");
+ quicktocFixedState = true;
+ }
+ for(var i = quicktocItems.length - 1; i >= 0; i --) {
+ if(scrollTop + $quicktoc.height() + 20 > $("#" + quicktocItems[i]).offset().top) {
+ $("a.toc_item").removeClass("toc_item_curr");
+ $("#toc_item_" + quicktocItems[i]).addClass("toc_item_curr");
+ break;
+ }
+ }
+ if(i == -1)
+ $("a.toc_item").removeClass("toc_item_curr");
+ }
+ });
} else {
$quicktoc.remove();
View
44 styles/doc.css
@@ -3,33 +3,55 @@
/* {{{ The Quick TOC reference top on man pages */
aside#quicktoc {
- border-top: 1px solid #9999CC;
- border-left: 1px solid #9999CC;
- border-bottom: none;
- margin: 0 0 20px 20px;
- width: 160px;
+ border: 1px solid #9999CC;
+ margin: 0;
+ width: auto;
background: white;
- position: fixed;
- right: 0px;
z-index: 100;
}
+aside.quicktoc-fixed {
+ position: fixed;
+ top: 0;
+ border-top: 0 !important;
+ box-shadow: 0 0 5px #222;
+}
+
#quicktoc .content, #quicktoc .language {
padding: 10px 0 10px 10px;
}
+#quicktoc .language {
+ float: left;
+}
+
#quicktoc .links, #quicktoc .content {
display: none;
}
-#quicktoc .links a:first-child {
- border-top: 1px solid #9F8A8A;
+#quicktoc .content ul {
+ margin: 0;
+ list-style: none;
+}
+
+#quicktoc .content li {
+ display: inline;
+ padding: 0 5px;
+}
+
+#quicktoc .toc_item_curr {
+ color: #001155;
+ border-bottom: 1px solid #3F438D;
+}
+
+#quicktoc .links {
+ float: right;
}
#quicktoc .links a {
- display: block;
color: black;
padding-left: 5px;
+ border-top: 1px solid #9F8A8A;
border-bottom: 1px solid #9F8A8A;
background-color: #F3F3F3;
}
@@ -440,6 +462,7 @@ ul.chunklist_children {
}
/* Default rule for non-@media supporting browsers (IE<9, basically). */
+/* TODO - ok to remove this entirely to make use of more horizontal space?
.docs #layout .layout-content {
margin-right: 160px;
}
@@ -455,6 +478,7 @@ ul.chunklist_children {
margin-right: 80px;
}
}
+*/
#changelang-langs {
width:120px;
Something went wrong with that request. Please try again.