Skip to content

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

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

Merged
seisman merged 8 commits into from
Jun 2, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
42b519b
Redesign the team gallery using sphinx-design's card directive
seisman May 31, 2022
8dc163b
Update doc/team.md
May 31, 2022
560b01e
Apply suggestions from code review
seisman Jun 1, 2022
8344bbc
Use footer options for founder/maintainer labels
seisman Jun 1, 2022
ed31398
Use badges to highlight different roles
seisman Jun 1, 2022
1fa407b
Increase the vertical spacing between cards
seisman Jun 1, 2022
f51d5ab
Centering texts
seisman Jun 1, 2022
3fd0dcc
Merge branch 'main' into redeisgn-team-gallry
seisman Jun 1, 2022
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
View file
Open in desktop
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
View file
Open in desktop
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;
}
5 changes: 4 additions & 1 deletion doc/conf.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,18 @@
"sphinx.ext.extlinks",
"sphinx.ext.intersphinx",
"sphinx.ext.napoleon",
"sphinx_gallery.gen_gallery",
"sphinx_copybutton",
"sphinx_design",
"sphinx_gallery.gen_gallery",
]

# 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
# Allow code fences using colons
myst_enable_extensions = ["colon_fence"]

# Make the list of returns arguments and attributes render the same as the
# parameters list
Expand Down
163 changes: 88 additions & 75 deletions doc/team.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,78 +22,91 @@ 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

@weiji14 weiji14 May 31, 2022

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

@seisman seisman Jun 1, 2022

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
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/3974108?v=4

[@seisman](https://github.com/seisman)
+++
{bdg-primary}`Maintainer`
::::

::::{grid-item-card} Jiayuan Yao
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/50591376?v=4

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

::::{grid-item-card} Leonardo Uieda
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/290082?v=4

[@leouieda](https://github.com/leouieda)
+++
{bdg-success}`Founder`
::::

::::{grid-item-card} Liam Toney
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/38269494?v=4

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

::::{grid-item-card} Max Jones
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/14077947?v=4

[@meghanrjones](https://github.com/meghanrjones)
+++
{bdg-primary}`Maintainer`
::::

::::{grid-item-card} Michael Grund
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/23025878?v=4

[@michaelgrund](https://github.com/michaelgrund)
+++
{bdg-primary}`Maintainer`
::::

::::{grid-item-card} Paul Wessel
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/26473567?v=4

[@PaulWessel](https://github.com/PaulWessel)
+++
{bdg-success}`Founder`
::::

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

[@weiji14](https://github.com/weiji14)
+++
{bdg-primary}`Maintainer`
::::

::::{grid-item-card} Will Schlitzer
:margin: 0 3 0 0
:text-align: center
:img-top: https://avatars.githubusercontent.com/u/29518865?v=4

[@willschlitzer](https://github.com/willschlitzer)
+++
{bdg-primary}`Maintainer`
::::
:::::
1 change: 1 addition & 0 deletions environment.yml
View file
Open in desktop
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