WordPress-C/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-02-22 06:29:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Twenty Seventeen: Fix broken and crowded pagination navigation on small screens

Browse Source 
* Hides page numbers visually at smaller screen sizes.
* Reduced padding around `.wrap` class on smaller screens.
* Fixed issue with the page numbers not displaying the underline on `:hover`. This has been updated in the custom colors files, too.

Props laurelfulford, caspie.

Fixes #38394.

Built from https://develop.svn.wordpress.org/trunk@38996


git-svn-id: http://core.svn.wordpress.org/trunk@38938 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
David A. Kennedy 2016-10-28 17:38:42 +00:00
parent 529ca4d134
commit a8b19ca223
4 changed files with 65 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
wp-content/themes/twentyseventeen/assets/css/colors-dark.css
View File

@ -51,6 +51,10 @@
.colors-dark .entry-footer .tags-links a:hover,
.colors-dark .post-navigation a:focus,
.colors-dark .post-navigation a:hover,
.colors-dark .pagination a:not(.prev):not(.next):focus,
.colors-dark .pagination a:not(.prev):not(.next):hover,
.colors-dark .comments-pagination a:not(.prev):not(.next):focus,
.colors-dark .comments-pagination a:not(.prev):not(.next):hover,
.colors-dark .logged-in-as a:focus,
.colors-dark .logged-in-as a:hover,
.colors-dark a:focus .nav-title,
@ -102,10 +106,10 @@
.colors-dark .entry-footer .tags-links a:hover,
.colors-dark .post-navigation a:focus,
.colors-dark .post-navigation a:hover,
.colors-dark .pagination a:focus,
.colors-dark .pagination a:hover,
.colors-dark .comments-pagination a:focus,
.colors-dark .comments-pagination a:hover,
.colors-dark .pagination a:not(.prev):not(.next):focus,
.colors-dark .pagination a:not(.prev):not(.next):hover,
.colors-dark .comments-pagination a:not(.prev):not(.next):focus,
.colors-dark .comments-pagination a:not(.prev):not(.next):hover,
.colors-dark .logged-in-as a:focus,
.colors-dark .logged-in-as a:hover,
.colors-dark a:focus .nav-title,
@ -460,6 +464,7 @@ body.colors-dark,
.colors-dark .comment-reply-link,
.colors-dark a .nav-title,
.colors-dark .pagination a,
.colors-dark .comments-pagination a,
.colors-dark .widget .widget-title a,
.colors-dark .widget ul li a,
.colors-dark .site-footer .widget-area ul li a,
@ -501,11 +506,7 @@ body.colors-dark,
.colors-dark .wp_widget_tag_cloud a:focus,
.colors-dark .wp_widget_tag_cloud a:hover,
.colors-dark .entry-footer .edit-link a.post-edit-link:focus,
.colors-dark .entry-footer .edit-link a.post-edit-link:hover,
.colors-dark .prev.page-numbers:focus,
.colors-dark .prev.page-numbers:hover,
.colors-dark .next.page-numbers:focus,
.colors-dark .next.page-numbers:hover {
.colors-dark .entry-footer .edit-link a.post-edit-link:hover {
-webkit-box-shadow: none;
box-shadow: none;
}

18
wp-content/themes/twentyseventeen/inc/color-patterns.php
View File

@ -70,6 +70,10 @@ function twentyseventeen_custom_colors_css() {
.colors-custom .entry-footer .tags-links a:hover,
.colors-custom .post-navigation a:focus,
.colors-custom .post-navigation a:hover,
.colors-custom .pagination a:not(.prev):not(.next):focus,
.colors-custom .pagination a:not(.prev):not(.next):hover,
.colors-custom .comments-pagination a:not(.prev):not(.next):focus,
.colors-custom .comments-pagination a:not(.prev):not(.next):hover,
.colors-custom .logged-in-as a:focus,
.colors-custom .logged-in-as a:hover,
.colors-custom a:focus .nav-title,
@ -180,10 +184,10 @@ function twentyseventeen_custom_colors_css() {
.colors-custom .entry-footer .tags-links a:hover,
.colors-custom .post-navigation a:focus,
.colors-custom .post-navigation a:hover,
.colors-custom .pagination a:focus,
.colors-custom .pagination a:hover,
.colors-custom .comments-pagination a:focus,
.colors-custom .comments-pagination a:hover,
.colors-custom .pagination a:not(.prev):not(.next):focus,
.colors-custom .pagination a:not(.prev):not(.next):hover,
.colors-custom .comments-pagination a:not(.prev):not(.next):focus,
.colors-custom .comments-pagination a:not(.prev):not(.next):hover,
.colors-custom .logged-in-as a:focus,
.colors-custom .logged-in-as a:hover,
.colors-custom a:focus .nav-title,
@ -477,11 +481,7 @@ body.colors-custom,
.colors-custom .wp_widget_tag_cloud a:focus,
.colors-custom .wp_widget_tag_cloud a:hover,
.colors-custom .entry-footer .edit-link a.post-edit-link:focus,
.colors-custom .entry-footer .edit-link a.post-edit-link:hover,
.colors-custom .prev.page-numbers:focus,
.colors-custom .prev.page-numbers:hover,
.colors-custom .next.page-numbers:focus,
.colors-custom .next.page-numbers:hover {
.colors-custom .entry-footer .edit-link a.post-edit-link:hover {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

50
wp-content/themes/twentyseventeen/style.css
View File

@ -1210,6 +1210,7 @@ a:active {
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
@ -1256,6 +1257,10 @@ a .nav-title,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
@ -1360,7 +1365,7 @@ a:hover .nav-title,
.main-navigation > div > ul {
border-top: 1px solid #eee;
padding: 0.75em 3.375em;
padding: 0.75em 1.695em;
}
.js .main-navigation.toggled-on > div > ul {
@ -1529,8 +1534,8 @@ body {
margin-left: auto;
margin-right: auto;
max-width: 700px;
padding-left: 3em;
padding-right: 3em;
padding-left: 2em;
padding-right: 2em;
}
.wrap:after {
@ -1902,11 +1907,21 @@ body.page:not(.twentyseventeen-front-page) .entry-title {
}
.page-numbers {
padding: 0.5em 1em;
display: none;
padding: 0.5em 0.75em;
}
.page-numbers.current {
color: #767676;
display: inline-block;
}
.page-numbers.current .screen-reader-text {
clip: auto;
height: auto;
overflow: auto;
position: relative !important;
width: auto;
}
.prev.page-numbers,
@ -1914,10 +1929,10 @@ body.page:not(.twentyseventeen-front-page) .entry-title {
background-color: #ddd;
-webkit-border-radius: 2px;
border-radius: 2px;
display: inline-block;
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
margin-top: -0.3em;
padding: 0.25em 0.5em 0.4em;
}
@ -3162,6 +3177,10 @@ object {
font-size: 0.875rem;
}
.page-numbers.current {
font-size: 16px;
font-size: 1rem;
}
/* Site Footer */
@ -3217,6 +3236,8 @@ object {
.wrap {
max-width: 1000px;
padding-left: 3em;
padding-right: 3em;
}
.has-sidebar:not(.error404) #primary {
@ -3929,6 +3950,25 @@ object {
width: 32px;
}
/* Pagination */
.page-numbers {
display: inline-block;
}
.page-numbers.current {
font-size: 15px;
font-size: 0.9375rem;
}
.page-numbers.current .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
/* Comments */
.comment-body {

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-beta1-38995';
$wp_version = '4.7-beta1-38996';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.