Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Show/Hide Inputs" button to navbar #681

Closed
wants to merge 3 commits into from
Closed

Add "Show/Hide Inputs" button to navbar #681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd27608
Add cell input toggle to navbar
parente Mar 7, 2017
54deee6
Fix lost whitespace
parente Mar 8, 2017
f911395
Switch to a nearly-pure CSS approach
parente Mar 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 53 additions & 2 deletions nbviewer/static/less/notebook.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
text-align: center;
}


@media (max-width: 767px) {
div.input, div.output_area {
box-orient: vertical;
Expand All @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can similarly use height here, but you'll need to explicitly access the height at the time (e.g., for each of the inputs grab $(elem_id).height()) but you'll need to do that in the js.

-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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than setting the max height, since you're using js, you can extract the height itself and use that as the basis for the animation.

That would avoid the shadowing effect that you see in your .gif.

Note: I wanted to do this, but unfortunately, you just can't do that in pure CSS. The problem has to do with the height being set to auto. But since you are using js, you aren't stuck with the auto value for the height. If the height is explicitly set in the DOM, you can then use the transitions to modify the height in a smooth manner.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can give height a shot.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see the same shadowing when animating the height by setting the div.input height on load and adding height: 0px !important when .hide_input_cells is applied.

toggle-inputs-css

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);
}
10 changes: 10 additions & 0 deletions nbviewer/templates/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@
{%- endmacro %}


{% macro head_js_icon(js, name, icon, accesskey=None) -%}
<li>
<a href="javascript:{{js}}" title="{{name}}" {%if accesskey %}accesskey={{accesskey}}{% endif %}>
<span class="fa fa-{{icon}} fa-2x menu-icon"></span>
<span class="menu-text">{{name}}</span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this, but it might be worth expanding the totality of the js that's included…

maybe something like (note this won't work and may not be valid js

<script>
for (x in $.('hide_input_cells')){
   $(x.id).height($(x.id).height())
}
</script>

Or should this go below since you're actually passing the javascript in there and there is minimal js in this actual macro…

NB: I've not seen this use of an href or a before, I'm intrigued.

</a>
</li>
{%- endmacro %}


{% macro link_breadcrumbs(crumbs) -%}
{% if crumbs %}
<ol class="breadcrumb">
Expand Down
3 changes: 2 additions & 1 deletion nbviewer/templates/notebook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

{% import "layout.html" as layout with context %}


{% block otherlinks %}
{% for fmt_name, fmt in formats.items() %}
{% if format != fmt_name %}
Expand All @@ -14,6 +13,8 @@
{% endif %}
{% endfor %}

{{ layout.head_js_icon("$('body').toggleClass('hide_input_cells');", "Show/Hide Inputs", "eye", "i") }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is where the above code might actually go (inside the first argument (currently "$('body').toggleClass('hide_input_cells');"))…

I actually looked this up a bit more and think these are most of the necessary details though there are still things that need to be checked… E.g., If you can do this without explicitly iterating over all the elements that need to be toggled.
I'll look at this tomorrow after sleeping on it.

for (x in $.('.input_area')){//input areas are the only things that have the class input area
   x.height(x.height()); //first call sets it, second call retrieves it, they may need to be separated
// the key insight is that is that x.height() should return the pixel height and x.height(val) sets the height to that val.
   x.toggleClass('hide_input_cell');//applies the toggle
}

Right now, I think you're applying 'hide_input_cell' to the entire body, but I figure this would be better to apply to the individual input areas. It also makes it a lot easier to open the way to have checkboxes in the future if can toggle individual cells. Of course, that means that the logic I wrote above won't work for the hide/show all button because then they can be toggled individually and this will just swap state. That's probably going to need more than one line though.


{% if "kernelspec" in nb.metadata %}
{{ layout.head_icon("#", nb.metadata.kernelspec.display_name + " Kernel", "server") }}
{% endif %}
Expand Down