From dd276080f30fe67178c2fb301c866fc825b8031b Mon Sep 17 00:00:00 2001 From: Peter Parente Date: Tue, 7 Mar 2017 16:22:50 -0500 Subject: [PATCH 1/3] Add cell input toggle to navbar Original idea from http://chris-said.io/2016/02/13/how-to-make-polished-jupyter-presentations-with-optional-code-visibility/ Tweaked in http://mindtrove.info/code-hiding-on-nbviewer/. Why not in nbviewer itself? --- nbviewer/templates/layout.html | 10 ++++++++ nbviewer/templates/notebook.html | 42 ++++++++++++++++++++++++++++++-- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/nbviewer/templates/layout.html b/nbviewer/templates/layout.html index 6680e00d..81fe6b77 100644 --- a/nbviewer/templates/layout.html +++ b/nbviewer/templates/layout.html @@ -19,6 +19,16 @@ {%- endmacro %} +{% macro head_js_icon(js, name, icon, accesskey=None) -%} +
  • + + + {{name}} + +
    • +{%- endmacro %} + + {% macro link_breadcrumbs(crumbs) -%} {% if crumbs %}
      diff --git a/nbviewer/templates/notebook.html b/nbviewer/templates/notebook.html index d10538bf..39672af5 100644 --- a/nbviewer/templates/notebook.html +++ b/nbviewer/templates/notebook.html @@ -2,18 +2,19 @@ {% import "layout.html" as layout with context %} - {% block otherlinks %} {% for fmt_name, fmt in formats.items() %} {% if format != fmt_name %} {% if fmt_name == default_format %} {{ layout.head_icon(from_base(format_base), "View as " ~ fmt.label, fmt.icon) }} - {% else %} + {% else %} {{ layout.head_icon(from_base(format_prefix, fmt_name, format_base), "View as " ~ fmt.label, fmt.icon) }} {% endif %} {% endif %} {% endfor %} + {{ layout.head_js_icon("toggle_nbviewer_inputs()", "Show/Hide Inputs", "eye", "i") }} + {% if "kernelspec" in nb.metadata %} {{ layout.head_icon("#", nb.metadata.kernelspec.display_name + " Kernel", "server") }} {% endif %} @@ -106,6 +107,43 @@ } })}); + + {% endblock extra_script %} From 54deee673ec5c8aa750c380818b2bf96fdcc2ec4 Mon Sep 17 00:00:00 2001 From: Peter Parente Date: Wed, 8 Mar 2017 07:14:05 -0500 Subject: [PATCH 2/3] Fix lost whitespace --- nbviewer/templates/notebook.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nbviewer/templates/notebook.html b/nbviewer/templates/notebook.html index 39672af5..9f4a8019 100644 --- a/nbviewer/templates/notebook.html +++ b/nbviewer/templates/notebook.html @@ -7,7 +7,7 @@ {% if format != fmt_name %} {% if fmt_name == default_format %} {{ layout.head_icon(from_base(format_base), "View as " ~ fmt.label, fmt.icon) }} - {% else %} + {% else %} {{ layout.head_icon(from_base(format_prefix, fmt_name, format_base), "View as " ~ fmt.label, fmt.icon) }} {% endif %} {% endif %} From f911395c7e2dabaeb2504d831de1654f59a163ae Mon Sep 17 00:00:00 2001 From: Peter Parente Date: Wed, 22 Mar 2017 22:48:03 -0400 Subject: [PATCH 3/3] Switch to a nearly-pure CSS approach Thanks to @mpacer --- nbviewer/static/less/notebook.less | 55 ++++++++++++++++++++++++++++-- nbviewer/templates/notebook.html | 39 +-------------------- 2 files changed, 54 insertions(+), 40 deletions(-) diff --git a/nbviewer/static/less/notebook.less b/nbviewer/static/less/notebook.less index 0e35f61d..32660532 100644 --- a/nbviewer/static/less/notebook.less +++ b/nbviewer/static/less/notebook.less @@ -11,7 +11,6 @@ text-align: center; } - @media (max-width: 767px) { div.input, div.output_area { box-orient: vertical; @@ -20,8 +19,60 @@ div.prompt { text-align:left; } - + .cell img { .img-responsive; } } + +/* Show/hide cell inputs, largely from @mpacer's + * https://github.com/mpacer/hiding_tags_nbconvert/blob/f37b7/toggle_hidden.tpl + */ +:root { + --in-time: .5s; + --out-time: .5s; + --max-height-small: 0px; + --max-height-big: 10000px; + --transition-path-out: cubic-bezier(0, 0.67, 0.36, 1); + --transition-path-in: ease-in-out; + --padding-hidden: 0px; + --padding-shown: 10px; +} + +/* Adjust vertical padding on all but the first cell */ +body div.cell ~ div.cell { + transition: padding-top var(--in-time) var(--transition-path-in), padding-bottom var(--in-time) var(--transition-path-in); + -webkit-transition: padding-top var(--in-time) var(--transition-path-in), padding-bottom var(--in-time) var(--transition-path-in); + -moz-transition: padding-top var(--in-time) var(--transition-path-in), padding-bottom var(--in-time) var(--transition-path-in); + -o-transition: padding-top var(--in-time) var(--transition-path-in), padding-bottom var(--in-time) var(--transition-path-in); + padding-top: var(--padding-shown); + padding-bottom: var(--padding-shown); +} + +body.hide_input_cells div.cell ~ div.cell { + transition: padding-top var(--in-time) var(--transition-path-out), padding-bottom var(--in-time) var(--transition-path-out); + -webkit-transition: padding-top var(--in-time) var(--transition-path-out), padding-bottom var(--in-time) var(--transition-path-out); + -moz-transition: padding-top var(--in-time) var(--transition-path-out), padding-bottom var(--in-time) var(--transition-path-out); + -o-transition: padding-top var(--in-time) var(--transition-path-out), padding-bottom var(--in-time) var(--transition-path-out); + padding-top: var(--padding-hidden); + padding-bottom: var(--padding-hidden); +} + +/* adjust the max-height of input cells */ +body div.input { + transition: max-height var(--in-time) var(--transition-path-in), padding .0s step-end; + -webkit-transition: max-height var(--in-time) var(--transition-path-in), padding .0s step-end; + -moz-transition: max-height var(--in-time) var(--transition-path-in), padding .0s step-end; + -o-transition: max-height var(--in-time) var(--transition-path-in), padding .0s step-end; + max-height: var(--max-height-big); +} + +body.hide_input_cells div.input { + overflow:hidden; + max-height: var(--max-height-small); + transition: max-height var(--out-time) var(--transition-path-out), padding var(--out-time) step-end; + -webkit-transition: max-height var(--out-time) var(--transition-path-out), padding var(--out-time) step-end; + -moz-transition: max-height var(--out-time) var(--transition-path-out), padding var(--out-time) step-end; + -o-transition: max-height var(--out-time) var(--transition-path-out), padding var(--out-time) step-end; + padding: var(--padding-hidden); +} diff --git a/nbviewer/templates/notebook.html b/nbviewer/templates/notebook.html index 9f4a8019..e264d2ce 100644 --- a/nbviewer/templates/notebook.html +++ b/nbviewer/templates/notebook.html @@ -13,7 +13,7 @@ {% endif %} {% endfor %} - {{ layout.head_js_icon("toggle_nbviewer_inputs()", "Show/Hide Inputs", "eye", "i") }} + {{ layout.head_js_icon("$('body').toggleClass('hide_input_cells');", "Show/Hide Inputs", "eye", "i") }} {% if "kernelspec" in nb.metadata %} {{ layout.head_icon("#", nb.metadata.kernelspec.display_name + " Kernel", "server") }} @@ -107,43 +107,6 @@ } })}); - - {% endblock extra_script %}