diff --git a/notebook/static/notebook/js/codecell.js b/notebook/static/notebook/js/codecell.js index 1e09b7d803..3974207000 100644 --- a/notebook/static/notebook/js/codecell.js +++ b/notebook/static/notebook/js/codecell.js @@ -161,6 +161,8 @@ define([ var input = $('
').addClass('input'); this.input = input; + var prompt_container = $('').addClass('prompt_container'); + var run_this_cell = $('').addClass('run_this_cell'); run_this_cell.prop('title', 'Run this cell'); run_this_cell.append(''); @@ -170,6 +172,7 @@ define([ }); var prompt = $('').addClass('prompt input_prompt'); + var inner_cell = $('').addClass('inner_cell'); this.celltoolbar = new celltoolbar.CellToolbar({ cell: this, @@ -189,7 +192,8 @@ define([ this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this)); $(this.code_mirror.getInputField()).attr("spellcheck", "false"); inner_cell.append(input_area); - input.append(run_this_cell).append(prompt).append(inner_cell); + prompt_container.append(prompt).append(run_this_cell); + input.append(prompt_container).append(inner_cell); var output = $(''); cell.append(input).append(output); diff --git a/notebook/static/notebook/less/codecell.less b/notebook/static/notebook/less/codecell.less index db75f0db05..a10e67ae49 100644 --- a/notebook/static/notebook/less/codecell.less +++ b/notebook/static/notebook/less/codecell.less @@ -21,34 +21,38 @@ div.input { } } +div.prompt_container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + text-align: right; +} + /* input_area and input_prompt must match in top border and margin for alignment */ div.input_prompt { color: @input_prompt_color; border-top: 1px solid transparent; } -.run_this_cell { - visibility: hidden; +div.run_this_cell { + display: none; cursor: pointer; color: #333; padding-top: 5px; padding-bottom: 5px; - padding-left: 1ex; - padding-right: 1ex; + padding-left: 2ex; + padding-right: 2ex; width: 1ex; } div.code_cell div.input_prompt { - min-width: 11ex; -} - -div.code_cell:hover div.input .run_this_cell { - visibility: visible; + min-width: 15ex; } @media (-moz-touch-enabled: 1), (any-pointer: coarse) { - .run_this_cell { - visibility: visible; + div.run_this_cell { + display: block; } }