Add collapsers to template (#1689)

jupyter · Dec 8, 2021 · 6c8d9c8 · 6c8d9c8
1 parent e5d0cfd
commit 6c8d9c8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/share/jupyter/nbconvert/templates/lab/base.html.j2 b/share/jupyter/nbconvert/templates/lab/base.html.j2
@@ -15,6 +15,8 @@
 
 {% block input_group -%}
 <div class="jp-Cell-inputWrapper">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
 <div class="jp-InputArea jp-Cell-inputArea">
 {{ super() }}
 </div>
@@ -31,6 +33,8 @@
 
 {% block output_group %}
 <div class="jp-Cell-outputWrapper">
+<div class="jp-Collapser jp-OutputCollapser jp-Cell-outputCollapser">
+</div>
 {{ super() }}
 </div>
 {% endblock output_group %}

diff --git a/share/jupyter/nbconvert/templates/lab/index.html.j2 b/share/jupyter/nbconvert/templates/lab/index.html.j2
@@ -43,23 +43,25 @@
 <style type="text/css">
 /* Misc */
 a.anchor-link {
-   display: none;
+  display: none;
 }
 
 .highlight  {
-    margin: 0.4em;
+  margin: 0.4em;
 }
 
 /* Input area styling */
 .jp-InputArea {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .jp-InputArea-editor {
-    overflow: hidden;
+  overflow: hidden;
 }
 
-/* Output area styling: using table instead of flexbox so that we can use break-inside property */
+/* Using table instead of flexbox so that we can use break-inside property */
+/* CSS rules under this comment should not be required anymore after we move to the JupyterLab 4.0 CSS */
+
 
 .jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-prompt {
   min-width: calc(
@@ -95,19 +97,14 @@ body[data-format='mobile'] .jp-OutputArea-child .jp-OutputArea-output {
   width: 100%;
 }
 
-/* block wrapper: using block instead of flexbox so that we can use break-inside property
-   note: in the case of JupyterLab, wrappers also include collapsers, hence the flexbox.
- */
-
-.jp-Cell-inputWrapper, .jp-Cell-outputWrapper {
-  display: block;
-}
-
-/* Media print rules */
-
 @media print {
-  body {
-    margin: 0;
+  .jp-Collapser {
+    display: none;
+  }
+
+  .jp-Cell-inputWrapper,
+  .jp-Cell-outputWrapper {
+    display: block;
   }
 
   .jp-OutputArea-child {