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.

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

Make nbtutor play nice with RISE live show mode #42

Open
Naereen opened this issue Feb 21, 2021 · 4 comments
Open

Make nbtutor play nice with RISE live show mode #42

Naereen opened this issue Feb 21, 2021 · 4 comments

Comments

@Naereen
Copy link

Naereen commented Feb 21, 2021

This extension works very well for me, and I'm a big fan and intense user of the RISE jupyter extension to teach with Jupyter notebook being displayed in full screen as slides.

As shown in this demo:
Peek 21-02-2021 03-04

using nbtutor from the RISE live show mode (regardless of being full-screen) works from the backend side, but not from the frontend UI side: the control buttons are hidden!
But exiting the RISE mode shows that the buttons are there, they work and everything is fine.

This issue is here to notify about this bug, and I can try to help, but I'm not an expert on the architecture of nbtutor, so I would need your help @lgpage!
Thanks in advance!

@Naereen
Copy link
Author

Naereen commented Feb 21, 2021

By a quick exploration of my browser developper tool, I suspect that from the RISE part, this class is in charge of making the cell toolbar disappear: .rise-enabled .celltoolbar.

So when importing nbtutor, it should be possible to revert all the CSS rules that RISE declares to hide the celltoolbar...

But from what I see here (latest version):
https://github.com/damianavila/RISE/blob/ed64f2fe81b7d26ee34c96f4dfdfbf74cdae7fb7/classic/src/less/main.less#L115
the .rise-enabled .celltoolbar class is not declared to be hidden... so 🤔 puzzling, it is!

@Naereen
Copy link
Author

Naereen commented Feb 21, 2021

So, I found what to change on RISE css, just delete or disable this rule!

.rise-enabled.ctb_global_show .ctb_hideshow.ctb_show {
    display: none;
}

Peek 21-02-2021 03-22

So it's this line:
https://github.com/damianavila/RISE/blob/ed64f2fe81b7d26ee34c96f4dfdfbf74cdae7fb7/classic/src/less/main.less#L111

.rise-enabled {
  [...]
  &.ctb_global_show {
    .ctb_hideshow.ctb_show { display: none; }
    .ctb_show ~ .text_cell_render { border-style: none; }
  }

@Naereen
Copy link
Author

Naereen commented Feb 21, 2021

I guess the easiest way to go, if someone encounters the same issue, is to use Stylus

And this CSS userstyle:

@-moz-document regexp("https?://localhost:[0-9]*/notebooks/.*#/slide.*") {
/* New CSS style to show Jupyter celltoolbar when RISE live show mode is enabled.
 * See https://github.com/lgpage/nbtutor/issues/42
 * Released under the term of the MIT Licence (https://lbesson.mit-license.org/)
 * By Lilian Besson, © 2021
 * To use with Stylus, see https://userstyles.org
**/
.rise-enabled.ctb_global_show .ctb_hideshow.ctb_show {
    display: inherit !important;
}
}

source

@Naereen
Copy link
Author

Naereen commented Feb 21, 2021

Opened damianavila/RISE#587 also, just to notify the users and authors of RISE, just in case!

@lgpage lgpage changed the title Control buttons of nbtutor disappear when going in RISE live show mode Make nbtutor play nice with RISE live show mode Jul 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants