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.

Sign up for GitHub

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

Fix header vertical spacing and jupyter-sphinx cells #1164

Merged
merged 3 commits into from
Feb 10, 2023
Merged

Fix header vertical spacing and jupyter-sphinx cells #1164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f26668
Fix header vertical spacing and jupyter-sphinx cells
choldgraf Feb 6, 2023
b3f1297
Update docs/examples/pydata.md
choldgraf Feb 7, 2023
846695b
Update pydata.md
choldgraf Feb 8, 2023
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
28 changes: 14 additions & 14 deletions docs/examples/pydata.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,22 @@ data = xr.DataArray(
data
```

## ipyleaflet

`ipyleaflet` is a **Jupyter**/**Leaflet** bridge enabling interactive maps in the Jupyter notebook environment. this demonstrate how you can integrate maps in your documentation.

```{code-cell}
Copy link
Collaborator

Choose a reason for hiding this comment

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

The map is shown twice in the doc, maybe removing the last m will do the trick.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Hmmm I tried a few different approaches and have no idea why that map is showing up twice now. Could we just add a comment or open an issue to track de-bugging it? I suspect this might be a bug upstream and not related to this theme or the code in the cell :-/

from ipyleaflet import Map, basemaps
from IPython.display import display

# display a map centered on France
m = Map(basemap=basemaps.Esri.WorldImagery, zoom=5, center=[46.21, 2.21])
display(m)
```

## jupyter-sphinx

Another common library is `jupyter-sphinx`.
This section demonstrates a subset of functionality above to make sure it behaves as expected.
This theme has styling for [`jupyter-sphinx`](https://jupyter-sphinx.readthedocs.io/), which is often used for executing and displaying widgets with a Jupyter kernel.

```{jupyter-execute}
import matplotlib.pyplot as plt
Expand All @@ -105,15 +117,3 @@ data = rng.standard_normal((3, 100))
fig, ax = plt.subplots()
ax.scatter(data[0], data[1], c=data[2], s=3)
```

## ipyleaflet

`ipyleaflet` is a **Jupyter**/**Leaflet** bridge enabling interactive maps in the Jupyter notebook environment. this demonstrate how you can integrate maps in your documentation.

```{jupyter-execute}
from ipyleaflet import Map, basemaps

# display a map centered on France
m = Map(basemap=basemaps.Esri.WorldImagery, zoom=5, center=[46.21, 2.21])
m
```
32 changes: 19 additions & 13 deletions src/pydata_sphinx_theme/assets/styles/extensions/_execution.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,27 @@
* Jupyter Sphinx
*/

// Dark theme special-cases
html[data-theme="dark"] .bd-content {
div.jupyter_container {
// Background has slightly more custom background behavior because of hard-coded color
border: 1px solid var(--pst-color-border);
background-color: var(--pst-color-surface);
border-radius: 0.25rem;
.bd-content div.jupyter_container {
// We don't want borders around the whole container, just around code cells
border: none;
background-color: unset;
box-shadow: none;

div.output,
div.highlight {
border-radius: 0.25rem;
}
// Code cells should have the same style as our other code objects
div.output,
div.highlight {
border-radius: 0.25rem;
}
div.highlight {
background-color: var(--pst-color-surface);
}

div.highlight {
background-color: var(--pst-color-surface);
// Ensure the style is the same as our code cells. Jupyter Sphinx makes it tiny.
.cell_input,
.cell_output {
border-radius: 0.25rem;
pre {
padding: 1rem;
}
}
}
20 changes: 15 additions & 5 deletions src/pydata_sphinx_theme/assets/styles/sections/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,14 @@
background: var(--pst-color-on-background) !important;
box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);

height: var(--pst-header-height);
max-height: var(--pst-header-height);
width: 100%;
padding: 0.5rem 0;
padding: 0;
max-width: 100vw;
justify-content: center;
.bd-header__inner {
display: flex;
align-items: center;
height: 100%;
height: fit-content;
padding-left: 1rem;
padding-right: 1rem;
}
Expand All @@ -36,6 +34,16 @@
flex-grow: 1;
padding: 0 0 0 0.5rem;
}

// These items will define the height of the header
.navbar-start-item,
.navbar-center-item,
.navbar-end-item {
height: var(--pst-header-height);
max-height: var(--pst-header-height);
display: flex;
align-items: center;
}
}

#navbar-end,
Expand All @@ -44,11 +52,13 @@
display: flex;
align-items: center;
flex-flow: wrap;
// In case we wrap our items to multiple rows on small screens
row-gap: 0;
}

#navbar-end,
#navbar-center {
gap: 1rem;
column-gap: 1rem;
}

// A little smaller because this is displayed by default on mobile
Expand Down