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

Redesign the team gallery using sphinx-design's card directive #1937

Merged
merged 8 commits into from
Jun 2, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
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 .github/workflows/ci_docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ jobs:
run: |
mamba install gmt=6.3.0 numpy pandas xarray netCDF4 packaging \
build ipython make myst-parser geopandas \
sphinx sphinx-copybutton sphinx-gallery sphinx_rtd_theme
sphinx sphinx-copybutton sphinx-design sphinx-gallery sphinx_rtd_theme

# Show installed pkg information for postmortem diagnostic
- name: List installed packages
Expand Down
34 changes: 0 additions & 34 deletions doc/_static/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -203,37 +203,3 @@ a.copybtn {
.sphx-glr-single-img {
max-width: 80%!important;
}

.team-row {
display: flex;
flex-wrap: wrap;
}

.team-card {
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: 0.5rem;
margin: 0.25em;
flex: 0 1 175px;
}

.team-img {
border-radius: 0.5rem;
width: 100%;
height: 20vh!important;
object-fit: cover;
}

.team-card-body {
padding: 1.25rem;
height: 135px;
}

.team-card-text {
display: flex;
margin-block-start: 0em;
margin-block-end: 0.2em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
2 changes: 2 additions & 0 deletions doc/conf.py
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,15 @@
"sphinx.ext.napoleon",
"sphinx_gallery.gen_gallery",
"sphinx_copybutton",
"sphinx_design",
seisman marked this conversation as resolved.
Show resolved Hide resolved
]

# Autosummary pages will be generated by sphinx-autogen instead of sphinx-build
autosummary_generate = []

# Auto-generate header anchors with MyST parser
myst_heading_anchors = 4
myst_enable_extensions = ["colon_fence"]
seisman marked this conversation as resolved.
Show resolved Hide resolved

# Make the list of returns arguments and attributes render the same as the
# parameters list
Expand Down
136 changes: 61 additions & 75 deletions doc/team.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,78 +22,64 @@ responsibilities. Distinguished Contributors who are also active maintainers of
the PyGMT project and have responsibilities detailed in the
{doc}`maintenance` have 'Maintainer' listed below their names.

```{raw} html

<div class="team-row">
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/3974108?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Dongdong Tian</h6>
<h7 class="team-card-text">Maintainer</h7>
<h7 class="team-card-text"><a href="https://github.com/seisman" >@seisman</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/50591376?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Jiayuan Yao</h6>
<h7 class="team-card-text"><a href="https://github.com/core-man" >@core-man</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/290082?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Leonardo Uieda</h6>
<h7 class="team-card-text">Founder</h7>
<h7 class="team-card-text"><a href="https://github.com/leouieda" >@leouieda</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/38269494?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Liam Toney</h6>
<h7 class="team-card-text"><a href="https://github.com/liamtoney" >@liamtoney</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/14077947?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Meghan Jones</h6>
<h7 class="team-card-text">Maintainer</h7>
<h7class="team-card-text"><a href="https://github.com/meghanrjones" >@meghanrjones</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/23025878?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Michael Grund</h6>
<h7 class="team-card-text">Maintainer</h7>
<h7class="team-card-text"><a href="https://github.com/michaelgrund" >@michaelgrund</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/26473567?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Paul Wessel</h6>
<h7 class="team-card-text">Founder</h7>
<h7class="team-card-text"><a href="https://github.com/PaulWessel" >@PaulWessel</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/23487320?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Wei Ji Leong</h6>
<h7 class="team-card-text">Maintainer</h7>
<h7class="team-card-text"><a href="https://github.com/weiji14" >@weiji14</a></h7>
</div>
</div>
<div class="team-card">
<img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/29518865?v=4" alt="Card image">
<div class="team-card-body">
<h6 class="team-card-text">Will Schlitzer</h6>
<h7 class="team-card-text">Maintainer</h7>
<p class="team-card-text"><a href="https://github.com/willschlitzer" >@willschlitzer</a></h7>
</div>
</div>
</div>
```
:::::{grid} 2 3 3 4
Copy link
Member

Choose a reason for hiding this comment

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

Is this for the margins? Feel like the vertical spacing between cards could be increased a bit. Right now there's not much of a gap.
image
compared to https://www.pygmt.org/v0.6.1/team.html:

image

Copy link
Member Author

Choose a reason for hiding this comment

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

:::::{grid} 2 3 3 4

These four numbers are the number of columns for extra-small, small, medium and large screens.

::::{grid-item-card} Dongdong Tian
:img-top: https://avatars.githubusercontent.com/u/3974108?v=4

Maintainer
[@seisman](https://github.com/seisman)
::::

::::{grid-item-card} Jiayuan Yao
:img-top: https://avatars.githubusercontent.com/u/50591376?v=4

[@core-man](https://github.com/core-man)
::::

::::{grid-item-card} Leonardo Uieda
:img-top: https://avatars.githubusercontent.com/u/290082?v=4

Founder
[@leouieda](https://github.com/leouieda)
::::

::::{grid-item-card} Liam Toney
:img-top: https://avatars.githubusercontent.com/u/38269494?v=4

[@liamtoney](https://github.com/liamtoney)
::::

::::{grid-item-card} Max Jones
:img-top: https://avatars.githubusercontent.com/u/14077947?v=4

Maintainer
[@meghanrjones](https://github.com/meghanrjones)
::::

::::{grid-item-card} Michael Grund
:img-top: https://avatars.githubusercontent.com/u/23025878?v=4

Maintainer
[@michaelgrund](https://github.com/michaelgrund)
::::

::::{grid-item-card} Paul Wessel
:img-top: https://avatars.githubusercontent.com/u/26473567?v=4

Founder
[@PaulWessel](https://github.com/PaulWessel)
::::

::::{grid-item-card} Wei Ji Leong
:img-top: https://avatars.githubusercontent.com/u/23487320?v=4

Maintainer
[@weiji14](https://github.com/weiji14)
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
Maintainer
[@weiji14](https://github.com/weiji14)
[@weiji14](https://github.com/weiji14)
+++
Maintainer
Before After

|
image | image |

Copy link
Member Author

Choose a reason for hiding this comment

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

Good suggestion! I've used the footer option for labels and also use sphinx-design's badge directive to highlight different roles.

image

::::
::::{grid-item-card} Will Schlitzer
:img-top: https://avatars.githubusercontent.com/u/29518865?v=4

Maintainer
[@willschlitzer](https://github.com/willschlitzer)
::::
:::::
1 change: 1 addition & 0 deletions environment.yml
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,6 @@ dependencies:
- myst-parser
- sphinx
- sphinx-copybutton
- sphinx-design
- sphinx-gallery
- sphinx_rtd_theme