Update docs styling based on the new pydata template (#2716)

* Move logo to top left corner and add text * Fix warnings from short title underlines * Remove right navbar for examples No use for this since there are no headings and it cuts off some plots * Set language to silence build warning * Set icons and theme switcher as well as default white theme * Remove source links since this shows the right navbar * Remove right navbar on landing page * Fix broken gallery links from encoding page * Adjust icon size * Remove css specific to the old template * Fix indentation * Correct gallery reference
vega · Nov 15, 2022 · 4b1e9cc · 4b1e9cc
1 parent d54cb00
commit 4b1e9cc
Show file tree

Hide file tree

Showing 15 changed files with 57 additions and 80 deletions.
diff --git a/altair/examples/annual_weather_heatmap.py b/altair/examples/annual_weather_heatmap.py
@@ -1,6 +1,6 @@
 """
 Annual Weather Heatmap
-------------
+----------------------
 """
 # category: tables
 import altair as alt

diff --git a/altair/examples/connected_scatterplot.py b/altair/examples/connected_scatterplot.py
@@ -1,6 +1,6 @@
 """
 Connected Scatter Plot (Lines with Custom Paths)
------------------------------------------------
+------------------------------------------------
 
 This example show how the order encoding can be used to draw a custom path. The dataset tracks miles driven per capita along with gas prices annually from 1956 to 2010.
 It is based on Hannah Fairfield's article 'Driving Shifts Into Reverse'. See https://archive.nytimes.com/www.nytimes.com/imagepages/2010/05/02/business/02metrics.html for the original.

diff --git a/altair/examples/errorbars_with_std.py b/altair/examples/errorbars_with_std.py
@@ -1,6 +1,6 @@
 """
 Error Bars with Standard Deviation
----------------------------------
+----------------------------------
 This example shows how to show error bars with standard deviation using crop yields data of different
 in the years of 1930s.
 """

diff --git a/altair/examples/histogram_heatmap.py b/altair/examples/histogram_heatmap.py
@@ -1,6 +1,6 @@
 """
 2D Histogram Heatmap
---------------
+--------------------
 This example shows how to make a heatmap from binned quantitative data.
 """
 # category: distributions

diff --git a/altair/examples/histogram_scatterplot.py b/altair/examples/histogram_scatterplot.py
@@ -1,6 +1,6 @@
 """
 2D Histogram Scatter Plot
-------------------
+-------------------------
 This example shows how to make a 2d histogram scatter plot.
 """
 # category: distributions

diff --git a/altair/examples/interactive_scatter_plot.py b/altair/examples/interactive_scatter_plot.py
@@ -1,6 +1,6 @@
 """
 Simple Interactive Colored Scatter Plot
---------------------------------------
+---------------------------------------
 This example shows how to make an interactive scatter plot.
 """
 # category: interactive charts

diff --git a/altair/examples/lasagna_plot.py b/altair/examples/lasagna_plot.py
@@ -1,6 +1,6 @@
 """
 Lasagna Plot (Dense Time-Series Heatmap)
-------------
+----------------------------------------
 """
 # category: tables
 import altair as alt

diff --git a/altair/examples/mosaic_with_labels.py b/altair/examples/mosaic_with_labels.py
@@ -1,6 +1,6 @@
 """
 Mosaic Chart with Labels
-------------
+------------------------
 """
 # category: tables
 

diff --git a/altair/examples/scatter_marginal_hist.py b/altair/examples/scatter_marginal_hist.py
@@ -1,6 +1,6 @@
 """
 Facetted Scatter Plot with Marginal Histograms
----------------------------------------------
+----------------------------------------------
 This example demonstrates how to generate a facetted scatter plot,
 with marginal facetted histograms, and how to share their respective
 - x,some y-limits.

diff --git a/altair/examples/strip_plot_jitter.py b/altair/examples/strip_plot_jitter.py
@@ -1,7 +1,13 @@
 """
 Strip Plot with Jitter
----------
-In this chart, we encode the ``Major_Genre`` column from the ``movies`` dataset in the ``y``-channel. In the default presentation of this data, it would be difficult to gauge the relative frequencies with which different values occur because there would be so much overlap. To address this, we use the ``yOffset`` channel to incorporate a random offset (jittering). The example is shown twice, on the left side using normally distributed and on the right side using uniformally distributed jitter.
+----------------------
+In this chart, we encode the ``Major_Genre`` column from the ``movies`` dataset
+in the ``y``-channel. In the default presentation of this data, it would be
+difficult to gauge the relative frequencies with which different values occur
+because there would be so much overlap. To address this, we use the ``yOffset``
+channel to incorporate a random offset (jittering). The example is shown twice,
+on the left side using normally distributed and on the right side using
+uniformally distributed jitter.
 """
 # category: distributions
 import altair as alt

diff --git a/altair/sphinxext/altairgallery.py b/altair/sphinxext/altairgallery.py
@@ -97,6 +97,8 @@
 
 EXAMPLE_TEMPLATE = jinja2.Template(
     """
+:html_theme.sidebar_secondary.remove:
+
 .. This document is auto-generated by the altair-gallery extension. Do not modify directly.
 
 .. _gallery_{{ name }}:

diff --git a/doc/_static/custom.css b/doc/_static/custom.css
@@ -25,61 +25,8 @@ table.docutils td li {
 
 }
 
-/* Everything below this comment is for the pydata sphinx theme*/
-
-/* Blue topbar */
-.navbar-light {
-    background-color: #16A7F0 !important;
-}
-/* White text in topbar */
-.navbar-light a {
-    color: #fff !important;
-}
-/* White bold project title in topbar */
-.navbar-light p.title {
-    font-size: 26px !important;
-    font-weight: 800 !important;
-    color: #fff !important;
-    text-align: center;
-    width: 100%;
-}
-/* There is a small jump in the title positionin when the navbar transitions full */
-/* title to the collapse button. 27% width here makes that jump as discrete as possible */
-div#navbar-start {
-    width: 27%;
-    margin-left: 0px !important;
-}
-/* Adjust the title position for narrow screens, such as mobile phones. */
-/* This also prevents that the collapse button stacks under the title, */
-/* which would cover a bit of the logo. 719px makes the title */
-/* switch to narrow screen layout at the same time as the rest of the page. */
-@media only screen and (max-width: 719px) {
-    div#navbar-start {
-        width: 60%;
-        margin-left: 0px !important;
-    }
-    .navbar-light p.title {
-        text-align: right;
-    }
-}
-
-/* Version number in the same darkblue color as other text */
-div.navbar-brand-box p#site-version.site-version {
-    color: #130654 !important;
-}
-/* The box that contains the logo and the version number */
-div.navbar-brand-box a {
-    width: 100% !important;
-    height: auto !important;
-    flex-direction: column !important;
-}
-/* The logo */
-div.navbar-brand-box img {
-    display: block !important;
-    height: auto !important;
-    width: auto !important;
-    max-height: 18vh !important;
-    max-width: 100% !important;
-    margin: 0 auto !important;
-    margin-top: -40px !important;
-}
+/* Use full page width without sidebars */
+/* .bd-content { */
+/*   max-width: 100%; */
+/*   flex-grow: 1; */
+/* } */
diff --git a/doc/conf.py b/doc/conf.py
@@ -66,9 +66,9 @@
 master_doc = "index"
 
 # General information about the project.
-project = "Altair"
-copyright = "2016-{}, Altair Developers".format(datetime.now().year)
-author = "Altair Developers"
+project = "Vega-Altair"
+copyright = "2016-{}, Vega-Altair Developers".format(datetime.now().year)
+author = "Vega-Altair Developers"
 
 # The version info for the project you're documenting, acts as replacement for
 # |version| and |release|, also used in various other places throughout the
@@ -84,7 +84,7 @@
 #
 # This is also used if you do content translation via gettext catalogs.
 # Usually you set "language" from the command line for these cases.
-language = None
+language = 'en'
 
 # There are two options for replacing |today|: either, you set today to some
 # non-false value, then it is used:
@@ -135,9 +135,28 @@
 # further.  For a list of options available for each theme, see the
 # documentation.
 html_theme_options = {
-    "navbar_start": ["navbar-project"],
+    "navbar_start": ["navbar-logo", "navbar-project"],
     "navbar_center": ["navbar-nav"],
-    "navbar_end": ["navbar-icon-links"],
+    "navbar_end": ["theme-switcher", "navbar-icon-links"],
+    "footer_items": [],
+    "icon_links": [
+        {
+            "name": "GitHub",
+            "url": "https://github.com/altair-viz/altair",
+            "icon": "fab fa-github fa-lg",
+            "type": "fontawesome",
+        },
+        {
+            "name": "StackOverflow",
+            "url": "https://stackoverflow.com/tags/altair",
+            "icon": "fab fa-stack-overflow fa-xl",
+            "type": "fontawesome",
+        },
+    ]
+}
+
+html_context = {
+    "default_mode": "light"
 }
 
 # Add any paths that contain custom themes here, relative to this directory.
@@ -189,7 +208,8 @@ def setup(app):
 
 # Custom sidebar templates, maps document names to template names.
 html_sidebars = {
-    "**": ["sidebar-logo", "search-field", "sidebar-nav-bs", "sidebar-ethical-ads"],
+    "index": [],
+    "**": ["sidebar-nav-bs", "sidebar-ethical-ads"],
 }
 
 # Redirection of old page locations via the rediraffe sphinx-extension
@@ -212,7 +232,7 @@ def setup(app):
 # html_split_index = False
 
 # If true, links to the reST sources are added to the pages.
-# html_show_sourcelink = True
+html_show_sourcelink = False
 
 # If true, "Created using Sphinx" is shown in the HTML footer. Default is True.
 # html_show_sphinx = True

diff --git a/doc/index.rst b/doc/index.rst
@@ -1,3 +1,5 @@
+:html_theme.sidebar_secondary.remove:
+
 Vega-Altair: Declarative Visualization in Python
 ================================================
 .. role:: raw-html(raw)

diff --git a/doc/user_guide/encoding.rst b/doc/user_guide/encoding.rst
@@ -50,16 +50,16 @@ x           :class:`X`           The x-axis value                   :ref:`galler
 y           :class:`Y`           The y-axis value                   :ref:`gallery_scatter_tooltips`
 x2          :class:`X2`          Second x value for ranges          :ref:`gallery_gantt_chart`
 y2          :class:`Y2`          Second y value for ranges          :ref:`gallery_candlestick_chart`
-longitude   :class:`Longitude`   Longitude for geo charts           :ref:`gallery_airports`
-latitude    :class:`Latitude`    Latitude for geo charts            :ref:`gallery_airports`
+longitude   :class:`Longitude`   Longitude for geo charts           :ref:`gallery_point_map`
+latitude    :class:`Latitude`    Latitude for geo charts            :ref:`gallery_point_map`
 longitude2  :class:`Longitude2`  Second longitude value for ranges  :ref:`gallery_airport_connections`
 latitude2   :class:`Latitude2`   Second latitude value for ranges   :ref:`gallery_airport_connections`
 xError      :class:`XError`      The x-axis error value             N/A
 yError      :class:`YError`      The y-axis error value             N/A
 xError2     :class:`XError2`     The second x-axis error value      N/A
 yError2     :class:`YError2`     The second y-axis error value      N/A
 xOffset     :class:`XOffset`     Offset to the x position           :ref:`gallery_grouped_bar_chart2`
-yOffset     :class:`YOffset`     Offset to the y position           :ref:`gallery_jitter_chart`
+yOffset     :class:`YOffset`     Offset to the y position           :ref:`gallery_strip_plot_jitter`
 theta       :class:`Theta`       The start arc angle                :ref:`gallery_radial_chart`
 theta2      :class:`Theta2`      The end arc angle (radian)         :ref:`gallery_pacman_chart`
 ==========  ===================  =================================  ===================================