Skip to content

Commit ae7475f

Browse files
parloughparlough
authored
Add new design for previous and next page buttons (#11770)
Implements a new design for the previous and next page buttons. Includes distinctive hover, focus, and active styles for visual accessibility. --- **Wide layout:**<br> <img width="640" alt="Screenshot of the wide-layout version of the buttons" src="https://github.com/user-attachments/assets/91f85ac2-d005-4cb1-b453-f08c303efb4e" /> **Narrow layout:**<br> <img width="400" alt="Screenshot of the narrow-layout version of the buttons" src="https://github.com/user-attachments/assets/2d3a347c-e5fa-4b91-908e-17fb40ddd3f0" />
1 parent 73bbaf9 commit ae7475f

File tree

4 files changed

+76
-68
lines changed

4 files changed

+76
-68
lines changed

‎src/_includes/next-prev-nav.html

+20-19
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
{% if include.next or include.prev -%}
2-
{% if include.next and include.prev -%}
3-
{% assign nav_class = 'site-nextprev-nav' -%}
4-
{% else -%}
5-
{% assign nav_class = 'site-nextprev-nav__single' -%}
6-
{% endif -%}
7-
<nav class="{{nav_class}}">
8-
<ul>
9-
{% if include.prev.path -%}
10-
<li class="prev">
11-
<a href="{{ include.prev.path }}">{{ include.prev.title }}</a>
12-
</li>
13-
{% endif -%}
14-
{% if include.next.path -%}
15-
<li class="next">
16-
<a href="{{ include.next.path }}">{{ include.next.title }}</a>
17-
</li>
18-
{% endif -%}
19-
</ul>
1+
{% if next or prev -%}
2+
<nav id="site-prev-next">
3+
{% if prev.path -%}
4+
<a class="prev" href="{{ prev.path }}">
5+
<span class="material-symbols" aria-hidden="true">chevron_left</span>
6+
<div>
7+
<span class="prev-next-subtitle" aria-label="Previous page:">Previous</span>
8+
<span class="prev-next-title">{{ prev.title}}</span>
9+
</div>
10+
</a>
11+
{% endif -%}
12+
{% if next.path -%}
13+
<a class="next" href="{{ next.path }}">
14+
<div>
15+
<span class="prev-next-subtitle" aria-label="Next page:">Next</span>
16+
<span class="prev-next-title">{{ next.title}}</span>
17+
</div>
18+
<span class="material-symbols" aria-hidden="true">chevron_right</span>
19+
</a>
20+
{% endif -%}
2021
</nav>
2122
{% endif -%}

‎src/_layouts/base.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
{% assign cache_bust = '?v=4' %}
1+
{% assign cache_bust = '?v=5' %}
22
{% assign page_url = page.url | regex_replace: '/index$|/index.html$|\.html$|/$' -%}
33

44
<!DOCTYPE html>
55
<html lang="en">
66
<head>
77
<meta charset="utf-8">
88
<title>{% if short-title %}{{short-title}}{% else %}{{title}}{% endif %} | {{site.title}}</title>
9-
<link rel="icon" href="/assets/images/branding/flutter/icon/64.png" eleventy:ignore>
10-
<link rel="apple-touch-icon" href="/assets/images/branding/flutter/logo/flutter-logomark-320px.png" eleventy:ignore>
9+
<link rel="icon" href="/assets/images/branding/flutter/icon/64.png">
10+
<link rel="apple-touch-icon" href="/assets/images/branding/flutter/logo/flutter-logomark-320px.png">
1111
<meta name="viewport" content="width=device-width,initial-scale=1">
1212
<meta name="theme-color" content="#ffffff">
1313

@@ -18,7 +18,6 @@
1818

1919
{%- if isProduction == true -%}
2020
<meta name="google-site-verification" content="{{ site.google_site_verification }}">
21-
{% endif -%}
2221
<script>
2322
window.dataLayer = window.dataLayer || [];
2423
</script>
@@ -37,6 +36,7 @@
3736
ga('create', '{{ site.google_analytics_id }}', 'auto');
3837
ga('send', 'pageview');
3938
</script>
39+
{% endif -%}
4040

4141
{% assign desc = description | default: site.description | strip_html | strip_newlines | truncate: 160 -%}
4242
{% unless desc and desc != '' -%}
@@ -53,7 +53,7 @@
5353
<meta property="og:title" content="{{title | escape}}">
5454
<meta property="og:url" content="{{site.url | append: page_url}}">
5555
<meta property="og:description" content="{{desc | escape}}">
56-
<meta property="og:image" content="{{site.url | append: og_image_path}}" eleventy:ignore>
56+
<meta property="og:image" content="{{site.url | append: og_image_path}}">
5757

5858
{% unless strip_fonts == true -%}
5959
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">

‎src/_layouts/default.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h1 id="document-title">{{ title }}</h1>
3030
</header>
3131
{{ content }}
3232

33-
{% include next-prev-nav.html prev=prev, next=next %}
33+
{% render next-prev-nav.html, prev:prev, next:next %}
3434

3535
{% include trailing.html %}
3636
</article>

‎src/_sass/components/_next-prev-nav.scss

+50-43
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,65 @@
1+
@use '../base/mixins';
12
@use '../base/variables' as *;
23

3-
.site-nextprev-nav, // Nav with both links
4-
.site-nextprev-nav__single // Nav with single link
5-
{
6-
clear: both;
4+
#site-prev-next {
5+
display: flex;
6+
flex-direction: row;
7+
flex-wrap: wrap;
8+
justify-content: space-between;
9+
gap: 1rem;
10+
margin-block-end: 1rem;
711

8-
ul {
9-
$spacer-base: 0.75rem;
12+
.prev {
13+
text-align: left;
14+
justify-content: flex-start;
15+
}
1016

11-
list-style-type: none;
12-
margin: 0;
13-
padding: 0;
17+
.next {
18+
text-align: right;
19+
justify-content: flex-end;
20+
margin-left: auto;
21+
}
1422

15-
li {
16-
display: flex;
17-
margin-bottom: $spacer-base;
18-
white-space: nowrap;
23+
@media (min-width: 576px) {
24+
flex-wrap: nowrap;
1925

20-
a {
21-
text-overflow: ellipsis;
22-
overflow: hidden;
23-
}
26+
.prev, .next {
27+
max-width: 50%;
28+
}
29+
}
2430

25-
&.prev:before {
26-
color: $site-color-primary;
27-
content: "\2329"; // &lang;
28-
padding-right: $spacer-base * 0.5;
29-
}
31+
a {
32+
overflow-x: hidden;
33+
flex-basis: 100%;
3034

31-
&.next {
32-
justify-content: flex-end;
33-
text-align: right;
34-
}
35+
text-decoration: none;
36+
color: $site-color-body;
37+
border: 1px solid rgba(0, 0, 0, 0.125);
38+
border-radius: 0.25rem;
3539

36-
&.next:after {
37-
color: $site-color-primary;
38-
content: "\232A"; // &rang;
39-
padding-left: $spacer-base * 0.5;
40-
}
41-
}
42-
}
43-
}
40+
display: flex;
41+
flex-direction: row;
42+
align-items: center;
43+
padding: 0.5rem;
44+
min-height: 100%;
4445

45-
.site-nextprev-nav > ul > li {
46-
width: 49%;
46+
> div {
47+
display: flex;
48+
flex-direction: column;
49+
padding: 0.5rem;
4750

48-
&.prev { float: left; }
49-
}
51+
.prev-next-subtitle {
52+
font-size: 0.75rem;
53+
line-height: 0.75rem;
54+
}
55+
}
5056

51-
.site-nextprev-nav__single > ul > li {
52-
&.prev { width: 100%; }
57+
&:hover {
58+
@include mixins.interaction-style(3%);
59+
}
5360

54-
&.next {
55-
float: right;
56-
width: 100%;
61+
&:active {
62+
@include mixins.interaction-style(5%);
63+
}
5764
}
5865
}

0 commit comments

Comments
 (0)