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

added white space to bottom of edit files #6804

Merged
merged 2 commits into from
Mar 30, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion notebook/templates/edit.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link rel="icon" type="image/x-icon" href="{{ base_url | escape }}static/favicons/favicon-file.ico" class="favicon">
{% endblock %}
</head>
<body>
<body data-edit="edit">
Copy link
Contributor Author

@jesuscastillx jesuscastillx Mar 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My reasoning for doing it this way is that the notebook template has an attribute just like this. It is only ever referenced in this and this CSS file for the purposes of styling.

This allows me to target exclusively edit pages to add the spacer at the bottom.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case maybe it should be for consistency:

Suggested change
<body data-edit="edit">
<body data-notebook="edit">


{# Copy so we do not modify the page_config with updates. #}
{% set page_config_full = page_config.copy() %}
Expand Down
16 changes: 10 additions & 6 deletions packages/application/src/shell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@ export class NotebookShell extends Widget implements JupyterFrontEnd.IShell {
this._main.id = 'main-panel';
this._main.node.setAttribute('role', 'main');

this._spacer = new Widget();
this._spacer.id = 'spacer-widget';
this._spacer_top = new Widget();
this._spacer_top.id = 'spacer-widget-top';
this._spacer_bottom = new Widget();
this._spacer_bottom.id = 'spacer-widget-bottom';

// create wrappers around the top and menu areas
topWrapper.id = 'top-panel-wrapper';
Expand Down Expand Up @@ -86,8 +88,9 @@ export class NotebookShell extends Widget implements JupyterFrontEnd.IShell {
const middlePanel = new Panel({ layout: middleLayout });
middlePanel.addWidget(this._topWrapper);
middlePanel.addWidget(this._menuWrapper);
middlePanel.addWidget(this._spacer);
middlePanel.addWidget(this._spacer_top);
middlePanel.addWidget(this._main);
middlePanel.addWidget(this._spacer_bottom);
middlePanel.layout = middleLayout;

// TODO: Consider storing this as an attribute this._hsplitPanel if saving/restoring layout needed
Expand Down Expand Up @@ -267,15 +270,15 @@ export class NotebookShell extends Widget implements JupyterFrontEnd.IShell {
*/
collapseTop(): void {
this._topWrapper.setHidden(true);
this._spacer.setHidden(true);
this._spacer_top.setHidden(true);
}

/**
* Expand the top area to show the header and the spacer.
*/
expandTop(): void {
this._topWrapper.setHidden(false);
this._spacer.setHidden(false);
this._spacer_top.setHidden(false);
}

/**
Expand Down Expand Up @@ -344,7 +347,8 @@ export class NotebookShell extends Widget implements JupyterFrontEnd.IShell {
private _menuHandler: PanelHandler;
private _leftHandler: SidePanelHandler;
private _rightHandler: SidePanelHandler;
private _spacer: Widget;
private _spacer_top: Widget;
private _spacer_bottom: Widget;
private _main: Panel;
private _translator: ITranslator = nullTranslator;
private _currentChanged = new Signal<this, void>(this);
Expand Down
10 changes: 8 additions & 2 deletions packages/application/style/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,13 @@ body {
max-width: var(--jp-notebook-max-width);
}

#spacer-widget {
#spacer-widget-top {
min-height: 16px;
}

/* Only edit pages should have a bottom space */

body[data-edit='edit'] #spacer-widget-bottom {
min-height: 16px;
}

Expand All @@ -80,6 +86,6 @@ body[data-notebook='notebooks'] #main-panel {
max-width: unset;
}

body[data-notebook='notebooks'] #spacer-widget {
body[data-notebook='notebooks'] #spacer-widget-top {
min-height: unset;
}