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

Jump to bottom

Improve styling of the Previous / Next buttons #473

Merged
merged 6 commits into from
Sep 24, 2021
Merged

Improve styling of the Previous / Next buttons #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c89bb77
Prev Next buttons center
choldgraf Sep 23, 2021
35fe34d
Updating to include previous/next
choldgraf Sep 23, 2021
d2f5395
Merge remote-tracking branch 'upstream/master' into prev_next
jorisvandenbossche Sep 24, 2021
f25a07d
only underline the title
jorisvandenbossche Sep 24, 2021
ad82501
smaller line height
jorisvandenbossche Sep 24, 2021
92948e1
smaller line height
jorisvandenbossche Sep 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 21 additions & 0 deletions pydata_sphinx_theme/_templates/prev-next.html
View file
Open in desktop
@@ -0,0 +1,21 @@
<!-- Previous / next buttons -->
<div class='prev-next-area'>
{%- if prev %}
<a class='left-prev' id="prev-link" href="{{ prev.link|e }}" title="{{ _('previous page')}}">
<i class="fas fa-angle-left"></i>
<div class="prev-next-info">
<p class="prev-next-subtitle">{{ _("Previous") }}</p>
<p class="prev-next-title">{{ prev_title or prev.title }}</p>
</div>
</a>
{%- endif %}
{%- if next %}
<a class='right-next' id="next-link" href="{{ next.link|e }}" title="{{ _('next page')}}">
<div class="prev-next-info">
<p class="prev-next-subtitle">{{ _("Next") }}</p>
<p class="prev-next-title">{{ next_title or next.title }}</p>
</div>
<i class="fas fa-angle-right"></i>
</a>
{%- endif %}
</div>
14 changes: 1 addition & 13 deletions pydata_sphinx_theme/layout.html
View file
Open in desktop
@@ -1,16 +1,6 @@
{%- extends "basic/layout.html" %}
{%- import "static/webpack-macros.html" as _webpack with context %}

{# prev/next buttons #}
{% macro prev_next(prev, next, prev_title='', next_title='') %}
{%- if prev %}
<a class='left-prev' id="prev-link" href="{{ prev.link|e }}" title="{{ _('previous page')}}">{{ prev_title or prev.title }}</a>
{%- endif %}
{%- if next %}
<a class='right-next' id="next-link" href="{{ next.link|e }}" title="{{ _('next page')}}">{{ next_title or next.title }}</a>
{%- endif %}
{% endmacro %}

{%- block css %}
{{ _webpack.head_pre_bootstrap() }}
{{ _webpack.head_pre_icons() }}
Expand Down Expand Up @@ -95,9 +85,7 @@
</div>
{% endblock %}
{% if theme_show_prev_next %}
<div class='prev-next-bottom'>
{{ prev_next(prev, next) }}
</div>
{% include "prev-next.html" %}
{% endif %}
</main>
{% endblock %}
Expand Down
2 changes: 1 addition & 1 deletion ...ndex.6e10c153a2603d22c27ec22d8b47e205.css → ...ndex.193492646ce36602d287d5d23c98cd4a.css
View file
Open in desktop

Large diffs are not rendered by default.

0 ...e/static/js/index.19cc40f899469686cb5c.js → ...e/static/js/index.0f3584fff3176fd4ac0e.js
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions pydata_sphinx_theme/static/webpack-macros.html
View file
Open in desktop
Expand Up @@ -13,13 +13,13 @@

{% macro head_pre_bootstrap() %}
<link href="{{ pathto('_static/css/theme.css', 1) }}" rel="stylesheet">
<link href="{{ pathto('_static/css/index.6e10c153a2603d22c27ec22d8b47e205.css', 1) }}" rel="stylesheet">
<link href="{{ pathto('_static/css/index.193492646ce36602d287d5d23c98cd4a.css', 1) }}" rel="stylesheet">
{% endmacro %}

{% macro head_js_preload() %}
<link rel="preload" as="script" href="{{ pathto('_static/js/index.19cc40f899469686cb5c.js', 1) }}">
<link rel="preload" as="script" href="{{ pathto('_static/js/index.0f3584fff3176fd4ac0e.js', 1) }}">
{% endmacro %}

{% macro body_post() %}
<script src="{{ pathto('_static/js/index.19cc40f899469686cb5c.js', 1) }}"></script>
<script src="{{ pathto('_static/js/index.0f3584fff3176fd4ac0e.js', 1) }}"></script>
{% endmacro %}
53 changes: 37 additions & 16 deletions src/scss/index.scss
View file
Open in desktop
Expand Up @@ -399,34 +399,55 @@ nav.bd-links {

/* Previous / Next buttons */

.prev-next-bottom {
.prev-next-area {
margin: 20px 0px;

p {
margin: 0 0.3em;
line-height: 1.3em;
}

i {
font-size: 1.2em;
}

a {
&.left-prev,
&.right-next {
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
max-width: 45%;
overflow-x: hidden;
color: rgba(0, 0, 0, 0.65);
// So that buttons align with icons
display: flex;
align-items: center;
border: none;
padding: 10px;
max-width: 45%;
overflow-x: hidden;
color: rgba(0, 0, 0, 0.65);
text-decoration: none;

p.prev-next-title {
color: rgba(var(--pst-color-link), 1);
font-weight: 600;
font-size: 1.1em;
}

&:hover p.prev-next-title {
text-decoration: underline;
}

.prev-next-info {
flex-direction: column;
margin: 0 .5em;
}

&.left-prev {
float: left;

&:before {
content: '<< ';
}
}

&.right-next {
float: right;

&:after {
content: ' >>';
div.prev-next-info {
text-align: right;
}
}
}
}
}

Expand Down