diff --git a/doc/source/_static/css/getting_started.css b/doc/source/_static/css/getting_started.css index e4c5964259349..0d53bbde94ae3 100644 --- a/doc/source/_static/css/getting_started.css +++ b/doc/source/_static/css/getting_started.css @@ -138,15 +138,21 @@ ul.task-bullet > li > p:first-child { margin: 0px; } -.comparison-card .card-img-top { +.comparison-card .sd-card-img-top { margin: 10px; margin-bottom: 20px; - height: 72px; + height: 52px; background: none !important; } -.comparison-card-excel .card-img-top, .comparison-card-stata .card-img-top, .comparison-card-sas .card-img-top { - height: 52px; +.comparison-card .sd-btn-secondary { + background-color: #6c757d !important; + border-color: #6c757d !important; +} + +.comparison-card .sd-btn-secondary:hover { + background-color: #5a6268 !important; + border-color: #545b62 !important; } .comparison-card .card-footer { @@ -178,6 +184,16 @@ ul.task-bullet > li > p:first-child { margin: 0 1em 1em 1em; } +.install-card .sd-btn-secondary { + background-color: #6c757d !important; + border-color: #6c757d !important; +} + +.install-card .sd-btn-secondary:hover { + background-color: #5a6268 !important; + border-color: #545b62 !important; +} + .custom-button { background-color:#DCDCDC; border: none; diff --git a/doc/source/_static/css/pandas.css b/doc/source/_static/css/pandas.css index c32a9c8f40ff5..1145177898737 100644 --- a/doc/source/_static/css/pandas.css +++ b/doc/source/_static/css/pandas.css @@ -12,42 +12,41 @@ table { /* Main index page overview cards */ .intro-card { - background: #fff; - border-radius: 0; padding: 30px 10px 20px 10px; - margin: 10px 0px; } -.intro-card p.card-text { - margin: 0px; -} - -.intro-card .card-img-top { +.intro-card .sd-card-img-top { margin: 10px; height: 52px; background: none !important; } -.intro-card .card-header { - border: none; - background-color: transparent; - color: #150458 !important; +.intro-card .sd-card-title { + color: var(--pst-color-primary); font-size: var(--pst-font-size-h5); - font-weight: bold; - padding: 2.5rem 0rem 0.5rem 0rem; + padding: 1rem 0rem 0.5rem 0rem; } -.intro-card .card-footer { - border: none; - background-color: transparent; +.intro-card .sd-card-footer { + border: none !important; } -.intro-card .card-footer p.card-text{ +.intro-card .sd-card-footer p.sd-card-text { max-width: 220px; margin-left: auto; margin-right: auto; } +.intro-card .sd-btn-secondary { + background-color: #6c757d !important; + border-color: #6c757d !important; +} + +.intro-card .sd-btn-secondary:hover { + background-color: #5a6268 !important; + border-color: #545b62 !important; +} + .card, .card img { background-color: var(--pst-color-background); } diff --git a/doc/source/conf.py b/doc/source/conf.py index d808d60b1ac95..4940ed7148955 100644 --- a/doc/source/conf.py +++ b/doc/source/conf.py @@ -56,7 +56,7 @@ "matplotlib.sphinxext.plot_directive", "numpydoc", "sphinx_copybutton", - "sphinx_panels", + "sphinx_design", "sphinx_toggleprompt", "sphinx.ext.autodoc", "sphinx.ext.autosummary", @@ -143,10 +143,6 @@ # nbsphinx do not use requirejs (breaks bootstrap) nbsphinx_requirejs_path = "" -# sphinx-panels shouldn't add bootstrap css since the pydata-sphinx-theme -# already loads it -panels_add_bootstrap_css = False - # https://sphinx-toggleprompt.readthedocs.io/en/stable/#offset toggleprompt_offset_right = 35 @@ -460,7 +456,7 @@ # extlinks alias extlinks = { - "issue": ("https://github.com/pandas-dev/pandas/issues/%s", "GH"), + "issue": ("https://github.com/pandas-dev/pandas/issues/%s", "GH %s"), } diff --git a/doc/source/getting_started/index.rst b/doc/source/getting_started/index.rst index d344c0750b73d..250fa37a84619 100644 --- a/doc/source/getting_started/index.rst +++ b/doc/source/getting_started/index.rst @@ -9,48 +9,53 @@ Getting started Installation ------------ -.. panels:: - :card: + install-card - :column: col-lg-6 col-md-6 col-sm-12 col-xs-12 p-3 +.. grid:: 1 2 2 2 + :gutter: 4 - Working with conda? - ^^^^^^^^^^^^^^^^^^^ + .. grid-item-card:: Working with conda? + :class-card: install-card + :columns: 12 12 6 6 + :padding: 3 - pandas is part of the `Anaconda `__ - distribution and can be installed with Anaconda or Miniconda: + pandas is part of the `Anaconda `__ + distribution and can be installed with Anaconda or Miniconda: - ++++++++++++++++++++++ + ++++++++++++++++++++++ - .. code-block:: bash + .. code-block:: bash - conda install pandas + conda install pandas - --- + .. grid-item-card:: Prefer pip? + :class-card: install-card + :columns: 12 12 6 6 + :padding: 3 - Prefer pip? - ^^^^^^^^^^^ + pandas can be installed via pip from `PyPI `__. - pandas can be installed via pip from `PyPI `__. + ++++ - ++++ + .. code-block:: bash - .. code-block:: bash + pip install pandas - pip install pandas + .. grid-item-card:: In-depth instructions? + :class-card: install-card + :columns: 12 + :padding: 3 - --- - :column: col-12 p-3 + Installing a specific version? Installing from source? Check the advanced + installation page. - In-depth instructions? - ^^^^^^^^^^^^^^^^^^^^^^ + +++ - Installing a specific version? Installing from source? Check the advanced - installation page. + .. button-ref:: install + :ref-type: ref + :click-parent: + :color: secondary + :expand: - .. link-button:: ./install.html - :type: url - :text: Learn more - :classes: btn-secondary stretched-link + Learn more .. _gentle_intro: @@ -536,91 +541,110 @@ Coming from... Are you familiar with other software for manipulating tabular data? Learn the pandas-equivalent operations compared to software you already know: -.. panels:: - :img-top-cls: dark-light - :card: + comparison-card text-center shadow - :column: col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex +.. grid:: 1 2 2 2 + :gutter: 4 + :class-container: sd-text-center sd-d-inline-flex - --- - :card: + comparison-card-r - :img-top: ../_static/logo_r.svg + .. grid-item-card:: + :img-top: ../_static/logo_r.svg + :columns: 12 6 6 6 + :class-card: comparison-card + :shadow: md - The `R programming language `__ provides the - ``data.frame`` data structure and multiple packages, such as - `tidyverse `__ use and extend ``data.frame`` - for convenient data handling functionalities similar to pandas. + The `R programming language `__ provides the + ``data.frame`` data structure and multiple packages, such as + `tidyverse `__ use and extend ``data.frame`` + for convenient data handling functionalities similar to pandas. - +++ + +++ - .. link-button:: compare_with_r - :type: ref - :text: Learn more - :classes: btn-secondary stretched-link + .. button-ref:: compare_with_r + :ref-type: ref + :click-parent: + :color: secondary + :expand: + Learn more - --- - :card: + comparison-card-sql - :img-top: ../_static/logo_sql.svg + .. grid-item-card:: + :img-top: ../_static/logo_sql.svg + :columns: 12 6 6 6 + :class-card: comparison-card + :shadow: md - Already familiar to ``SELECT``, ``GROUP BY``, ``JOIN``, etc.? - Most of these SQL manipulations do have equivalents in pandas. + Already familiar to ``SELECT``, ``GROUP BY``, ``JOIN``, etc.? + Most of these SQL manipulations do have equivalents in pandas. - +++ + +++ - .. link-button:: compare_with_sql - :type: ref - :text: Learn more - :classes: btn-secondary stretched-link + .. button-ref:: compare_with_sql + :ref-type: ref + :click-parent: + :color: secondary + :expand: + Learn more - --- - :card: + comparison-card-stata - :img-top: ../_static/logo_stata.svg + .. grid-item-card:: + :img-top: ../_static/logo_stata.svg + :columns: 12 6 6 6 + :class-card: comparison-card + :shadow: md - The ``data set`` included in the `STATA `__ - statistical software suite corresponds to the pandas ``DataFrame``. - Many of the operations known from STATA have an equivalent in pandas. + The ``data set`` included in the `STATA `__ + statistical software suite corresponds to the pandas ``DataFrame``. + Many of the operations known from STATA have an equivalent in pandas. - +++ + +++ - .. link-button:: compare_with_stata - :type: ref - :text: Learn more - :classes: btn-secondary stretched-link + .. button-ref:: compare_with_stata + :ref-type: ref + :click-parent: + :color: secondary + :expand: + Learn more - --- - :card: + comparison-card-excel - :img-top: ../_static/spreadsheets/logo_excel.svg + .. grid-item-card:: + :img-top: ../_static/spreadsheets/logo_excel.svg + :columns: 12 6 6 6 + :class-card: comparison-card + :shadow: md - Users of `Excel `__ - or other spreadsheet programs will find that many of the concepts are - transferrable to pandas. + Users of `Excel `__ + or other spreadsheet programs will find that many of the concepts are + transferrable to pandas. - +++ + +++ - .. link-button:: compare_with_spreadsheets - :type: ref - :text: Learn more - :classes: btn-secondary stretched-link + .. button-ref:: compare_with_spreadsheets + :ref-type: ref + :click-parent: + :color: secondary + :expand: + Learn more - --- - :card: + comparison-card-sas - :img-top: ../_static/logo_sas.svg + .. grid-item-card:: + :img-top: ../_static/logo_sas.svg + :columns: 12 6 6 6 + :class-card: comparison-card + :shadow: md - The `SAS `__ statistical software suite - also provides the ``data set`` corresponding to the pandas ``DataFrame``. - Also SAS vectorized operations, filtering, string processing operations, - and more have similar functions in pandas. + The `SAS `__ statistical software suite + also provides the ``data set`` corresponding to the pandas ``DataFrame``. + Also SAS vectorized operations, filtering, string processing operations, + and more have similar functions in pandas. - +++ + +++ - .. link-button:: compare_with_sas - :type: ref - :text: Learn more - :classes: btn-secondary stretched-link + .. button-ref:: compare_with_sas + :ref-type: ref + :click-parent: + :color: secondary + :expand: + Learn more Tutorials --------- diff --git a/doc/source/index.rst.template b/doc/source/index.rst.template index 59280536536db..8a72df0661fe4 100644 --- a/doc/source/index.rst.template +++ b/doc/source/index.rst.template @@ -26,76 +26,85 @@ pandas documentation easy-to-use data structures and data analysis tools for the `Python `__ programming language. -{% if not single_doc -%} -.. panels:: - :card: + intro-card text-center - :column: col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex +{% if not single_doc or single_doc == "index.rst" -%} +.. grid:: 1 2 2 2 + :gutter: 4 + :padding: 2 2 0 0 + :class-container: sd-text-center - --- - :img-top: _static/index_getting_started.svg + .. grid-item-card:: Getting started + :img-top: _static/index_getting_started.svg + :class-card: intro-card + :shadow: md - Getting started - ^^^^^^^^^^^^^^^ + New to *pandas*? Check out the getting started guides. They contain an + introduction to *pandas'* main concepts and links to additional tutorials. - New to *pandas*? Check out the getting started guides. They contain an - introduction to *pandas'* main concepts and links to additional tutorials. + +++ - +++ + .. button-ref:: getting_started + :ref-type: ref + :click-parent: + :color: secondary + :expand: - .. link-button:: getting_started - :type: ref - :text: To the getting started guides - :classes: btn-block btn-secondary stretched-link + To the getting started guides - --- - :img-top: _static/index_user_guide.svg + .. grid-item-card:: User guide + :img-top: _static/index_user_guide.svg + :class-card: intro-card + :shadow: md - User guide - ^^^^^^^^^^ + The user guide provides in-depth information on the + key concepts of pandas with useful background information and explanation. - The user guide provides in-depth information on the - key concepts of pandas with useful background information and explanation. + +++ - +++ + .. button-ref:: user_guide + :ref-type: ref + :click-parent: + :color: secondary + :expand: - .. link-button:: user_guide - :type: ref - :text: To the user guide - :classes: btn-block btn-secondary stretched-link + To the user guide - --- - :img-top: _static/index_api.svg + .. grid-item-card:: API reference + :img-top: _static/index_api.svg + :class-card: intro-card + :shadow: md - API reference - ^^^^^^^^^^^^^ + The reference guide contains a detailed description of + the pandas API. The reference describes how the methods work and which parameters can + be used. It assumes that you have an understanding of the key concepts. - The reference guide contains a detailed description of - the pandas API. The reference describes how the methods work and which parameters can - be used. It assumes that you have an understanding of the key concepts. + +++ - +++ + .. button-ref:: api + :ref-type: ref + :click-parent: + :color: secondary + :expand: - .. link-button:: api - :type: ref - :text: To the reference guide - :classes: btn-block btn-secondary stretched-link + To the reference guide - --- - :img-top: _static/index_contribute.svg + .. grid-item-card:: Developer guide + :img-top: _static/index_contribute.svg + :class-card: intro-card + :shadow: md - Developer guide - ^^^^^^^^^^^^^^^ + Saw a typo in the documentation? Want to improve + existing functionalities? The contributing guidelines will guide + you through the process of improving pandas. - Saw a typo in the documentation? Want to improve - existing functionalities? The contributing guidelines will guide - you through the process of improving pandas. + +++ - +++ + .. button-ref:: development + :ref-type: ref + :click-parent: + :color: secondary + :expand: - .. link-button:: development - :type: ref - :text: To the development guide - :classes: btn-block btn-secondary stretched-link + To the development guide {% endif %} {% if single_doc and single_doc.endswith('.rst') -%} diff --git a/environment.yml b/environment.yml index 1e30c51537fa0..86272b9f325ca 100644 --- a/environment.yml +++ b/environment.yml @@ -90,7 +90,7 @@ dependencies: - pydata-sphinx-theme<0.11 - pytest-cython # doctest - sphinx - - sphinx-panels + - sphinx-design - sphinx-copybutton - types-python-dateutil - types-PyMySQL diff --git a/requirements-dev.txt b/requirements-dev.txt index d2f024886a129..4d5e1fda40680 100644 --- a/requirements-dev.txt +++ b/requirements-dev.txt @@ -65,7 +65,7 @@ numpydoc pydata-sphinx-theme<0.11 pytest-cython sphinx -sphinx-panels +sphinx-design sphinx-copybutton types-python-dateutil types-PyMySQL