Merge lp:~l3on/ubuntu-packaging-guide/new-sidebar into lp:ubuntu-packaging-guide

[Leo Iannacone]

This patch tries to provide a new Sidebar for ubuntu-packaging-guide.

A build-test can be found here:
http://people.ubuntu.com/~l3on/upg/index.html

What I used:
 * Images/icons come from Humanity icon theme.
 * Jquery (added to the "_static" dir, of course we should use instead
   jquery lib shipped with with Ubuntu, but I do not know how I can do
   it)

Have a great day.

Leo.

[Daniel Holbach (dholbach)]

Thanks a lot for your work on this Leon!

I have a few questions:

 - Why do you reset LANGS? I'm not sure I understand what's going on. :-)
 - Do we specifically need jquery 1.6.1? Or is anything >= 1.6.1 fine? If so,
   we could rely on the system jquery, which has been >= 1.6.1 since oneiric.
 - Could you document in BORROWED-CODE where you got the icons from?

Thanks again for your great work! This is great!

review: Needs Information

[lp:~l3on/ubuntu-packaging-guide/new-sidebar]

89. By Leo Iannacone on 2012-05-10

Revert LANGS reset

90. By Leo Iannacone on 2012-05-10

Added information where new icons come from

[Leo Iannacone (l3on)]

> Thanks a lot for your work on this Leon!

You're welcome Daniel!

> I have a few questions:
>
> - Why do you reset LANGS? I'm not sure I understand what's going on. :-)

That was a push mistake, I mean: I reset LANGS for speed up test builds and I forgot to revert before propose the merge. [fixed]

> - Do we specifically need jquery 1.6.1? Or is anything >= 1.6.1 fine? If so,
> we could rely on the system jquery, which has been >= 1.6.1 since oneiric.

I checked if everything works fine also with jquery 1.7.1, and it does... So, no problem with jquery >= 1.6.1

> - Could you document in BORROWED-CODE where you got the icons from?

Yes, of course! [done]

> Thanks again for your great work! This is great!

Thank you! :)

[Daniel Holbach (dholbach)]

Please let me know if the changes in https://code.launchpad.net/~l3on/ubuntu-packaging-guide/new-sidebar/+merge/105360 are alright with you.

[Daniel Holbach (dholbach)]

Sorry, I meant https://code.launchpad.net/~dholbach/ubuntu-packaging-guide/new-sidebar/+merge/105390

[lp:~l3on/ubuntu-packaging-guide/new-sidebar]

91. By Leo Iannacone on 2012-05-10

Merged from dholbach

[Daniel Holbach (dholbach)]

Great work, Leo! Grazie mille!

I have two small issues still:
 - there's a merge conflict in BORROWED-CODE - do you think
   you could fix it? (It looks pretty easy to fix)
 - this seems not to work for the singlehtml view, where
   "jump to top" would be superhelpful to have

Thanks again.

review: Needs Fixing

[lp:~l3on/ubuntu-packaging-guide/new-sidebar]

92. By Leo Iannacone on 2012-05-16

Fix javascript location in singlehtml

93. By Leo Iannacone on 2012-05-16

Fix toc in singlehtml mode

94. By Leo Iannacone on 2012-05-16

Prevent toc to being half showed in "fixed-mode" when the windows is not
enough big. This fixes toc style for singlehtml specially, where toc is
very long.

95. By Leo Iannacone on 2012-05-16

Fixed path for new images

96. By Leo Iannacone on 2012-05-16

Merging with original tree.

[Leo Iannacone (l3on)]

Hi Daniel!

How are you? :)

I worked a bit on those issues..

 - BORROWED-CODE should be fixed (I think)

 - I worked a bit on singlehtml, toc now is fixed.
   Anyway I found there a new problem regarding toc and "if the browser window is not enough big", more precisely: if windows.height < toc.height, you'll see only a part of the entire toc.
   I think the best way to fix it is avoid this behaviour if the window is too small (that's what I did).
   Anyway, if we could "split" theme for singlehtml and html version, we would be able to make the JUMP_TO_TOP link smarter for this case...

Best,

Leo.

[lp:~l3on/ubuntu-packaging-guide/new-sidebar]

97. By Leo Iannacone on 2012-05-16

Revert Makefile to revision 96
http://bazaar.launchpad.net/~ubuntu-packaging-guide-team/ubuntu-packaging-guide/trunk/revision/96

[Daniel Holbach (dholbach)]

This looks great to me. For some reason though when I scroll down (or use cursor down), the ToC jumps quite a bit, sometimes it shows, then it's gone, then it shows again, etc.

Do we have any idea why this is? Can anyone try this and see if it fails for you as well?

review: Needs Information

[Leo Iannacone (l3on)]

Hi Daniel,

you're completely right.

For some reason, I did not see that "flickering" before commit last changes.

Anyway, I think I fixed it in the rev98.

Can you check if everything works fine now?

Leo.

[lp:~l3on/ubuntu-packaging-guide/new-sidebar]

98. By Leo Iannacone on 2012-05-24

Fix flickering when add/remove class .fixed to sidebar

99. By Leo Iannacone on 2012-05-24

Use variable instead of static name in main.js

[Daniel Holbach (dholbach)]

Great work Leo! Merged and updated debian/copyright accordingly.

review: Approve

=== modified file 'BORROWED-CODE'
--- BORROWED-CODE	2012-05-10 22:37:51 +0000
+++ BORROWED-CODE	2012-05-24 16:25:47 +0000
@@ -2,6 +2,9 @@
 themes/ubuntu/static/images/{background-header-home.png,background-footer.png,sec-nav-hover.gif}
 	From lp:ubuntudeveloperportal
 
+themes/ubuntu/static/images/{go-home.png,go-next.png,go-previous.png}
+	From lp:humanity
+
 themes/ubuntu/static/960.css
 	Derived from: https://github.com/nathansmith/960-grid-system/
 	By way of: lp:ubuntudeveloperportal

=== modified file 'Makefile'
--- Makefile	2012-05-11 18:36:36 +0000
+++ Makefile	2012-05-24 16:25:47 +0000
@@ -15,7 +15,7 @@
 PODIR         = po
 I18NSPHINXOPTS  = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) .
 #LANGS = $(basename $(notdir $(wildcard $(PODIR)/*.po)))
-LANGS =
+LANGS=
 
 .PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext locale
 
@@ -51,6 +51,7 @@
 	$(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
 	mv $(BUILDDIR)/html/ubuntu-packaging-guide/*html $(BUILDDIR)/html/
 	sed -i 's/href="..\//href=".\//g' $(BUILDDIR)/html/*html
+	sed -i 's/src="..\/_static/src=".\/_static/g' $(BUILDDIR)/html/*html
 	sed -i 's/..\/_images/.\/_images/g' $(BUILDDIR)/html/*html
 	@echo
 	@echo "Build finished. The HTML pages are in $(BUILDDIR)/html"
@@ -77,6 +78,7 @@
 	sed -i 's/href="..\//href=".\//g' $(BUILDDIR)/singlehtml/index.html
 	sed -i 's/ubuntu-packaging-guide\/index/index/g' $(BUILDDIR)/singlehtml/index.html
 	sed -i 's/..\/..\/_images/.\/_images/g' $(BUILDDIR)/singlehtml/index.html
+	sed -i 's/src="..\/_static/src=".\/_static/g' $(BUILDDIR)/singlehtml/index.html
 	@echo
 	@echo "Build finished. The HTML page is in $(BUILDDIR)/singlehtml"
 singlehtml-%: locale

=== modified file 'debian/control'
--- debian/control	2012-05-10 17:20:03 +0000
+++ debian/control	2012-05-24 16:25:47 +0000
@@ -22,7 +22,7 @@
  ubuntu-packaging-guide-html.
 
 Package: ubuntu-packaging-guide-html
-Depends: ${misc:Depends}, libjs-underscore, libjs-jquery
+Depends: ${misc:Depends}, libjs-underscore, libjs-jquery (>= 1.6.1)
 Architecture: all
 Description: Ubuntu Packaging Guide - HTML guide
  The Ubuntu Packaging Guide is a set of articles that should help you to get
@@ -46,7 +46,7 @@
  This package contains the PDF version of the guide.
 
 Package: ubuntu-packaging-guide-epub
-Depends: ${misc:Depends}, libjs-underscore, libjs-jquery
+Depends: ${misc:Depends}, libjs-underscore, libjs-jquery (>= 1.6.1)
 Architecture: all
 Description: Ubuntu Packaging Guide - EPUB guide
  The Ubuntu Packaging Guide is a set of articles that should help you to get

=== modified file 'themes/ubuntu/layout.html'
--- themes/ubuntu/layout.html	2012-05-11 20:57:21 +0000
+++ themes/ubuntu/layout.html	2012-05-24 16:25:47 +0000
@@ -17,7 +17,6 @@
                          (sidebars != []) %}
 {%- set url_root = pathto('', 1) %}
 {%- if url_root == '#' %}{% set url_root = '' %}{% endif %}
-        
 
 {%- macro relbar() %}
 <div class="header-content">
@@ -48,40 +47,7 @@
 
 {%- macro sidebar() %}
       {%- if render_sidebar %}
-      <div class="grid-3 omega">
-        <div class="container-tweet">
-          {%- block sidebarlogo %}
-          {%- if logo %}
-            <p class="logo"><a href="{{ pathto(master_doc) }}">
-              <img class="logo" src="{{ pathto('_static/' + logo, 1) }}" alt="Logo"/>
-            </a></p>
-          {%- endif %}
-          {%- endblock %}
-          {%- if sidebars != None %}
-            {#- new style sidebar: explicitly include/exclude templates #}
-            {%- for sidebartemplate in sidebars %}
-            {%- include sidebartemplate %}
-            {%- endfor %}
-          {%- else %}
-            {#- old style sidebars: using blocks -- should be deprecated #}
-            {%- block sidebartoc %}
-            {%- include "localtoc.html" %}
-            {%- endblock %}
-            {%- block sidebarrel %}
-            {%- include "relations.html" %}
-            {%- endblock %}
-            {%- block sidebarsourcelink %}
-            {%- include "sourcelink.html" %}
-            {%- endblock %}
-            {%- if customsidebar %}
-            {%- include customsidebar %}
-            {%- endif %}
-            {%- block sidebarsearch %}
-            {%- include "searchbox.html" %}
-            {%- endblock %}
-          {%- endif %}
-        </div>
-      </div>
+      {%- include "sidebar.html" %}
       {%- endif %}
 {%- endmacro %}
 
@@ -117,6 +83,8 @@
     {# %- for scriptfile in script_files %}
     <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}"></script>
     {%- endfor % #}
+    <script type="text/javascript" src="{{ pathto('_static/jquery.js', 1) }}"></script>
+    <script type="text/javascript" src="{{ pathto('_static/main.js', 1) }}"></script>
     {%- if use_opensearch %}
     <link rel="search" type="application/opensearchdescription+xml"
           title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}"
@@ -153,6 +121,7 @@
 {%- block extrahead %} {% endblock %}
   </head>
   <body class="home">
+  <a name="top"></a>
 
 <div class="header-navigation">
     <div>

=== added file 'themes/ubuntu/sidebar.html'
--- themes/ubuntu/sidebar.html	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/sidebar.html	2012-05-24 16:25:47 +0000
@@ -0,0 +1,55 @@
+{#
+    ubuntu/sidebar.html
+    ~~~~~~~~~~~~~~~~~
+
+    Ubuntu layout template for Sphinx themes.
+
+    :copyright: Copyright 2007-2010 by the Sphinx team, see AUTHORS.
+    :license: BSD, see LICENSE for details.
+#}
+
+  <div id="sidebar" class="grid-3 omega">
+    <div class="container-tweet">
+
+      {%- if logo %}
+        <p class="logo"><a href="{{ pathto(master_doc) }}">
+          <img class="logo" src="{{ pathto('_static/' + logo, 1) }}" alt="Logo"/>
+        </a></p>
+      {%- endif %}
+
+      {%- if display_toc %}
+        <h3>{{ _('Table Of Contents') }}</h3>
+        <div class="toc">
+          {{ toc }}
+        </div>
+      {%- endif %}
+
+      <div class="browse-guide">
+        <h3>{{_('Browse The Guide')}}:</h3>
+        <ul>
+          <li class="prev{%- if not prev %} disabled{%- endif %}">
+            {%- if prev %}
+            <a href="{{ prev.link|e }}"
+                      title="{{ _('Previous topic') }}: {{ prev.title }}">Go Previous</a>
+            {%- endif %}
+          </li>
+          
+          <li class="center">
+            <a title="{{ _('Back to Index') }}" href="{{ pathto(master_doc) }}">Index Guide</a>
+          </li>
+        
+          <li class="next{%- if not next %} disabled{%- endif %}">
+            {%- if next %}
+            <a href="{{ next.link|e }}"
+                      title="{{ _('Next topic') }}: {{ next.title }}">Go Next</a>
+            {%- endif %}
+          </li>
+        </ul>
+        {%- if show_source and has_source and sourcename %}
+        <span>{{ _('This Page') }}:</span> <a href="{{ pathto('_sources/' + sourcename, true)|e }}"
+               rel="nofollow">{{ _('Show Source') }}</a>
+        {%- endif %}
+      </div>
+     </div>
+     <div id="back_top"><a href="#top">{{ _('Back to Top') }}</a></div>
+    </div>

=== modified file 'themes/ubuntu/static/home.css'
--- themes/ubuntu/static/home.css	2012-02-29 14:15:41 +0000
+++ themes/ubuntu/static/home.css	2012-05-24 16:25:47 +0000
@@ -243,3 +243,80 @@
 #content *:hover > a.headerlink {
    visibility: visible;
 }
+
+
+/* Start sidebar */
+#sidebar {
+  padding-top: 10px;
+  margin-top: -10px;
+}
+#sidebar ul {
+  margin-bottom: 10px;
+}
+
+#sidebar .toc ul li ul li {
+  list-style-type: decimal;
+}
+
+#sidebar .toc ul {
+    padding-left: 15px;
+}
+    
+#sidebar .toc > ul > li {
+    list-style-type: square;
+    margin-left: 10px;
+}
+
+#sidebar .browse-guide ul {
+  overflow:hidden;
+}
+
+#sidebar .browse-guide li {
+  float: left;
+  margin-left: 68px;
+  width: 16px;
+  height: 16px;
+}
+
+#sidebar .browse-guide li > a {
+  text-indent: -5000px;
+  float: left;
+  width: 16px;
+  height: 16px;
+}
+
+#sidebar .browse-guide .next {
+  background: url(images/go-next.png) no-repeat;
+}
+
+#sidebar .browse-guide .prev {
+  background: url(images/go-previous.png) no-repeat center center;
+  margin-left: 10px;
+}
+
+#sidebar .browse-guide .center {
+  background: url(images/go-home.png) no-repeat;
+}
+
+#sidebar .browse-guide .disabled {
+  background: transparent;
+}
+
+#sidebar #back_top {
+    width: 100%;
+    text-align: center;
+    margin-top: 10px;
+}
+
+#sidebar #back_top a {
+    color: #333333;
+    font-size: 1.2em;
+    text-transform: uppercase;
+}
+
+.fixed#sidebar {
+    position: fixed;
+    width: 220px !important;
+    top:10px;
+}
+/* End sidebar */

=== added file 'themes/ubuntu/static/images/go-home.png'
Binary files themes/ubuntu/static/images/go-home.png	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/go-home.png	2012-05-24 16:25:47 +0000 differ
=== added file 'themes/ubuntu/static/images/go-next.png'
Binary files themes/ubuntu/static/images/go-next.png	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/go-next.png	2012-05-24 16:25:47 +0000 differ
=== added file 'themes/ubuntu/static/images/go-previous.png'
Binary files themes/ubuntu/static/images/go-previous.png	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/go-previous.png	2012-05-24 16:25:47 +0000 differ
=== added file 'themes/ubuntu/static/main.js'
--- themes/ubuntu/static/main.js	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/main.js	2012-05-24 16:25:47 +0000
@@ -0,0 +1,21 @@
+$(function() {
+
+    var toc = "#sidebar";
+    var offset = $(toc).offset();
+
+    $(window).scroll(function() {
+        if ($(window).height() > $(toc).height() &&   
+            $(window).scrollTop() > offset.top) 
+        {       
+            $(toc).stop().addClass('fixed');
+        
+        } else {
+              $(toc).stop().removeClass('fixed');
+        }
+    });
+
+    $('a[href=#top]').click(function(){
+        $('html, body').animate({scrollTop:0}, 'slow');
+        return false;
+    });
+});