Merge pull request #611 from damianavila/issue610

attempt to fix issue #610

classic/package.json

@@ -42,5 +42,5 @@
     "watch": "~0.16.0",
     "rise-reveal": "file:../rise-reveal/"
   },
-  "version": "5.7.1"
+  "version": "5.7.2.dev0"
 }

classic/rise/static/main.js

@@ -375,9 +375,15 @@ define([
         .filter(function() {
           return $(this).height() > h;
         })
-        .css('height', 'calc(95vh)')
         .css('overflow-y', 'scroll')
-        .css('margin-top', '20px');
+        .addClass("rise-scroll")
+        // for issue #610
+        // no longer hard-wire styles here
+        // use CSS to override these
+        // using e.g. selector section.rise-scroll
+        //  .css('height', 'calc(95vh)')
+        //  .css('margin-top', '20px');
+        // these defaults are now in main.less
     }
   }
 

classic/src/less/main.less

@@ -323,3 +323,9 @@ body.rise-enabled.theme-moon div.input_prompt,
 body.rise-enabled.theme-moon div.output_text>pre,
 body.rise-enabled.theme-moon div.rendered_html,
 body.rise-enabled.theme-moon div.text_cell_render  { color: rgb(238, 232, 213); }
+
+/*  for issue #610 */
+.rise-scroll {
+  height: 95vh;
+  margin-top: 20px;
+}

examples/header-footer-scroll.css

@@ -0,0 +1,30 @@
+/* this is for styling the overlay
+ * when using header / footer and backimage
+ *
+ * see metadata in notebook
+ */
+
+#rise-header {
+    margin: 10px;
+    left: 10%;
+}
+
+#rise-footer {
+    margin: 10px;
+    left: 10%;
+}
+
+#rise-backimage {
+    opacity: 0.20;
+}
+
+/* TODO: maybe we need to port this to main.css?  */
+.reveal img {
+    max-width: 100%;
+}
+
+/* to regulate the amount of space left to the scrolling area */
+section.rise-scroll {
+    margin-top: 100px;  /* a bit more than should match the header size */
+    height: 85vh;       /* to leave some space below for the footer */
+}

examples/header-footer-scroll.ipynb

@@ -0,0 +1,104 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "collapsed": true
+   },
+   "source": [
+    "Here we have defined `header`, `footer` and `backimage` - [see also the customization doc](http://rise.readthedocs.io/en/latest/customize.html).\n",
+    "\n",
+    "See [this other notebook](overlay.ipynb) for a short description of how to use `overlay` instead.\n",
+    "\n",
+    "This is a variant of the header-footer notebook, with `scroll` enabled"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "slideshow": {
+     "slide_type": "slide"
+    }
+   },
+   "source": [
+    "# Slide 1\n",
+    "\n",
+    "* some regular slide\n",
+    "* the content fits the page"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "collapsed": true,
+    "slideshow": {
+     "slide_type": "slide"
+    }
+   },
+   "source": [
+    "# Slide 2\n",
+    "\n",
+    "* see `header-footer-scroll.css` to see how to tweak the available space\n",
+    "* now for a slide that has a large (high) content\n",
+    "* we create a slide\n",
+    "* with a rather extensive height\n",
+    "* so as to see \n",
+    "* if we can use `\"scroll\": true` in our settings\n",
+    "* and check that the footer\n",
+    "* does not overlap the contents\n",
+    "* that should scroll within the available space\n",
+    "* between header and footer\n",
+    "* and again\n",
+    "* we create a slide\n",
+    "* with a rather extensive height\n",
+    "* so as to see \n",
+    "* if we can use `\"scroll\": true` in our settings\n",
+    "* and check that the footer\n",
+    "* does not overlap the contents\n",
+    "* that should scroll within the available space\n",
+    "* between header and footer\n",
+    "* and a 3rd time\n",
+    "* we create a slide\n",
+    "* with a rather extensive height\n",
+    "* so as to see \n",
+    "* if we can use `\"scroll\": true` in our settings\n",
+    "* and check that the footer\n",
+    "* does not overlap the contents\n",
+    "* that should scroll within the available space\n",
+    "* between header and footer\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "celltoolbar": "Slideshow",
+  "jupytext": {
+   "formats": "ipynb"
+  },
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.7"
+  },
+  "rise": {
+   "autolaunch": true,
+   "backimage": "mybackimage.png",
+   "footer": "<h3>world</h3>",
+   "header": "<h1>Hello</h1>",
+   "scroll": true
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

examples/header-footer.css

@@ -21,4 +21,14 @@
 /* TODO: maybe we need to port this to main.css?  */
 .reveal img {
     max-width: 100%;
-}
+}
+
+/* leave some space for the header
+   here we have not set scroll=true
+   and so there is no .rise-scroll element
+   in this case it is better to style this selector
+   rather than just 'section' because there are 2 depths of sections
+*/
+section.stack.present {
+    margin-top: 50px;
+}

examples/header-footer.ipynb

@@ -20,19 +20,51 @@
     }
    },
    "source": [
-    "# Slide 1"
+    "# Slide 1\n",
+    "\n",
+    "in this example we have not overridden `scroll` so it means `scroll=False`\n",
+    "\n",
+    "regular slides (not too much content) will show up just nice"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {
-    "collapsed": true,
     "slideshow": {
      "slide_type": "slide"
     }
    },
    "source": [
-    "# Slide 2"
+    "# Slide 2\n",
+    "\n",
+    "* now for a slide that has a large (high) content\n",
+    "* because `scroll=False` we don't get to scroll vertically\n",
+    "* we create a slide\n",
+    "* with a rather extensive height\n",
+    "* so as to see \n",
+    "* if we can use `\"scroll\": true` in our settings\n",
+    "* and check that the footer\n",
+    "* does not overlap the contents\n",
+    "* that should scroll within the available space\n",
+    "* between header and footer\n",
+    "* and again\n",
+    "* we create a slide\n",
+    "* with a rather extensive height\n",
+    "* so as to see \n",
+    "* if we can use `\"scroll\": true` in our settings\n",
+    "* and check that the footer\n",
+    "* does not overlap the contents\n",
+    "* that should scroll within the available space\n",
+    "* between header and footer\n",
+    "* and a 3rd time\n",
+    "* we create a slide\n",
+    "* with a rather extensive height\n",
+    "* so as to see \n",
+    "* if we can use `\"scroll\": true` in our settings\n",
+    "* and check that the footer\n",
+    "* does not overlap the contents\n",
+    "* that should scroll within the available space\n",
+    "* between header and footer\n"
    ]
   }
  ],
@@ -42,7 +74,7 @@
    "formats": "ipynb"
   },
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -56,13 +88,26 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.4"
+   "version": "3.9.7"
   },
   "rise": {
    "autolaunch": true,
    "backimage": "mybackimage.png",
-   "footer": "<h3>world</h3>",
+   "footer": "<h3>world (right aligned in css)</h3>",
    "header": "<h1>Hello</h1>"
+  },
+  "toc": {
+   "base_numbering": 1,
+   "nav_menu": {},
+   "number_sections": false,
+   "sideBar": true,
+   "skip_h1_title": false,
+   "title_cell": "Table of Contents",
+   "title_sidebar": "Contents",
+   "toc_cell": false,
+   "toc_position": {},
+   "toc_section_display": true,
+   "toc_window_display": false
   }
  },
  "nbformat": 4,