Notebook: Jupyter notebooks in cellphones/tablets - Shift Enter issue.

[mmatera]

Hi,

One problem that happends when you want to work with a jupyter notebook in a cellphone is that with the standard keyboards, it is not posible to press "Shift Enter" to execute a cell. It would be interesting to add a button on the cell for execute its content.

[Carreau]

Marking as "JupyterLab" issue.

I believe that for touch screen and tablet in general there are easy way to have improvement.
In particular I believe that having a vertical "thumb accessible" toolbar on left (or right) can be of great use.

For example, faking it with custom.js

div#maintoolbar-container {
    display:block;
    position:absolute;
    right:20px;
    top: 60px;
    height: 80vh;
    width: 50px
}

div#maintoolbar-container > .btn-group {
      right: 0;
      margin-bottom: 10px;
}

div#maintoolbar-container > .btn-group > .btn{
    display: block;
    height: 40px;
    width: 40px;
    margin: 0;
    padding:0;
}

#notebook-container {
    padding-right: 80px;   
}

To tweak of course....

I'm guessing @cameronoelsen and @ellisonbg may want to have a look.

[ellisonbg]

Yes! I think this would really improve the UI on mobile. Thanks for mocking
this up. Would be especially nice if we could get the buttons to not scroll
with the notebook page. Love this!

On Wed, Feb 1, 2017 at 3:32 PM, Matthias Bussonnier <
[email protected]> wrote:

Marking as "JupyterLab" issue.

I believe that for touch screen and tablet in general there are easy way
to have improvement.
In particular I believe that having a vertical "thumb accessible" toolbar
on left (or right) can be of great use.

For example, faking it with custom.js

div#maintoolbar-container {
display:block;
position:absolute;
right:20px;
top: 60px;
height: 90vh;
width: 50px
}
div#maintoolbar-container > .btn-group {
right: 0;
margin-bottom: 10px;
}
div#maintoolbar-container > .btn-group > .btn{
display: block;
height: 40px;
width: 40px;
margin: 0;
padding:0;
}

notebook-container {

padding-right: 80px;

}

To tweak of course....

[image: screen shot 2017-02-01 at 15 28 07]
https://cloud.githubusercontent.com/assets/335567/22530955/1948e2de-e893-11e6-9b33-650de37e590f.png

I'm guessing @cameronoelsen https://github.com/cameronoelsen and
@ellisonbg https://github.com/ellisonbg may want to have a look.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jupyter/notebook/issues/2016#issuecomment-276818038,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABr0DE4o24DAh1vP2jtw-urkWuH12gXks5rYRYCgaJpZM4LXxn4
.

--
Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
[email protected] and [email protected]

[Carreau]

Would be especially nice if we could get the buttons to not scroll
with the notebook page

Let me show you a live version of above css.

[Carreau]

Actually there is a double scrollbar bug with height: 90vh;, changed to 80vh where it solves things (above comment edited).

I don't see any clean way to switch from L to R purely in CSS, and this is kinda a hack.
I'm even wondering if this UI would not even be better than the current toolbar for desktop usage. (with some refinements)

[prof-schacht]

Hi,

I would like to modify my jupyter notebook installation as you have done it.
But I tried to copy your css code in a custom.js file and put it in the folder ~/.jupyter/custom/custom.js
But this does move the toolbar to the right.

Could you give a little advise how to get the toolbar not scrolling to the right?

Thanks in advance.

[Carreau]

custom.js

Did you ment custom.css ?
Try to force-refresh also.

[evolu8]

I would love to see a mobile/tablet friendly interface made. Is there one yet?