Skip to content

Commit

Permalink
Update chapter list (#305)
Browse files Browse the repository at this point in the history 
* Restyle chapter list

* Revert updating chevron image

* Adjust responsive layout of handbooks

- Reduce width of chapter list and ToC
- Retain column layout for chapter list and content on tablet

* Update chapter list style to match new design

Smaller icons and tighter spacing

* Fix overflow of article content on smaller screens

* Update left padding to match new design
  • Loading branch information
@adamwoodnz
adamwoodnz committed Nov 1, 2023
1 parent 80bd1e4 commit 1892b50
Show file tree
Hide file tree
Showing 8 changed files with 86 additions and 60 deletions.
3 changes: 3 additions & 0 deletions source/wp-content/themes/wporg-developer-2023/images/chevron-small.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/wp-content/themes/wporg-developer-2023/images/dot.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php
View file
Expand Up @@ -58,8 +58,8 @@ function render( $attributes, $content, $block ) {
$content = wp_list_pages( $args );

$title = do_blocks(
'<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}}},"fontFamily":"inter"} -->
<h2 class="wp-block-heading has-inter-font-family" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20)">' . __( 'Chapters', 'wporg' ) . '</h2>
'<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small","fontFamily":"inter"} -->
<h2 class="wp-block-heading has-inter-font-family has-small-font-size" style="font-style:normal;font-weight:400">' . __( 'Chapters', 'wporg' ) . '</h2>
<!-- /wp:heading -->'
);

Expand Down
95 changes: 55 additions & 40 deletions source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss
View file
@@ -1,6 +1,6 @@
.wp-block-wporg-chapter-list {
--local--line-height: var(--wp--custom--body--small--typography--line-height);
--local--button-size: calc(var(--local--line-height) * 1em);
--local--icon-size: calc(var(--local--line-height) * 1em);
line-height: var(--local--line-height);

ul {
Expand All @@ -10,13 +10,30 @@
}

ul ul {
margin-left: calc(var(--local--button-size) / 2);
padding-left: calc(var(--wp--preset--spacing--20) / 4);
border-left: 1px solid var(--wp--preset--color--light-grey-1);
padding-left: 0;

li {
padding-left: var(--local--icon-size);
position: relative;

&::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
width: var(--local--icon-size);
height: var(--local--icon-size);
mask-image: url(../../images/dot.svg);
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--wp--preset--color--charcoal-4);
}
}
}

li {
margin-block: calc(var(--wp--preset--spacing--20) / 4);
color: var(--wp--preset--color--charcoal-4);
}

> ul {
Expand All @@ -27,59 +44,49 @@
}
}

a {
text-decoration: none;
}

&.has-js-control ul ul {
display: none;
padding-left: 14px;

.page_item_has_children {
padding-left: 0;

&::before {
display: none;
}
}

&.is-open {
display: revert;
}
}

// Style the dash & chevron, most of the styles can be shared.
&.has-js-control li:not(.page_item_has_children),
.wporg-chapter-list--button-group {
display: flex;
align-items: flex-start;
}

&:not(.has-js-control) li::before,
&.has-js-control li:not(.page_item_has_children)::before,
.wporg-chapter-list--button-group > button {
// Add space between button & link.
margin-inline-end: 0.25em;
font-size: inherit;
height: var(--local--button-size);
width: var(--local--button-size);
}

&:not(.has-js-control) li::before {
height: 0.8em;
}

&:not(.has-js-control) li::before,
&.has-js-control li:not(.page_item_has_children)::before,
.wporg-chapter-list--button-group > button::before {
content: "";
display: inline-block;
mask-image: url(../../images/line.svg);
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--wp--preset--color--light-grey-1);
}

.wporg-chapter-list--button-group > button {
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;

&::before {
height: var(--local--button-size);
width: var(--local--button-size);
mask-image: url(../../images/chevron.svg);
mask-size: 0.8em 0.4em;
transform: rotate(180deg);
background-color: var(--wp--preset--color--blueberry-1);
content: "";
display: inline-block;
height: var(--local--icon-size);
width: var(--local--icon-size);
mask-image: url(../../images/chevron-small.svg);
mask-repeat: no-repeat;
mask-position: center;
transform: rotate(-90deg);
background-color: var(--wp--preset--color--charcoal-4);
}

&[aria-expanded="true"]::before {
Expand All @@ -92,10 +99,18 @@
}

// Descendent is `span` if there are children, or `a` if not.
.current_page_ancestor > span,
.current_page_ancestor > a,
.current_page_item > span,
.current_page_item,
.current_page_item > span a,
.current_page_item > a {
font-weight: 600;
color: var(--wp--preset--color--charcoal-1);
}

.current_page_item > span a,
.current_page_item > a {
font-weight: 700;
}

.current_page_item > span button::before {
background-color: var(--wp--preset--color--charcoal-1);
}
}
31 changes: 18 additions & 13 deletions source/wp-content/themes/wporg-developer-2023/src/style/style.scss
View file
Expand Up @@ -51,32 +51,37 @@ body[class] {
}
}

@media (min-width: 1320px) {
.has-three-columns {
--wp--style--global--wide-size: 1760px;

--local--block-start-sidebar--width: 300px;
.has-three-columns {
--local--sidebar--width: 232px;
--local--column-gap: 40px;

@media (min-width: 768px) {
--wp--style--global--wide-size: 1760px;

display: grid;
grid-template-columns: var(--local--block-start-sidebar--width) 1fr;
/* stylelint-disable-next-line max-line-length */
grid-template-columns: var(--local--sidebar--width) calc(100% - var(--local--sidebar--width) - var(--local--column-gap));
grid-template-rows: auto auto;
column-gap: 40px;
column-gap: var(--local--column-gap);

.wp-block-wporg-sidebar-container {
--local--block-end-sidebar--width: 300px;
}

article {
--wp--style--global--content-size: 1080px;

width: clamp(30rem, -52.5rem + 100vw, 67.5rem);
--local--block-end-sidebar--width: var(--local--sidebar--width);
}

.has-three-columns__pagination {
grid-row-start: 2;
grid-column-start: 2;
}
}

@media (min-width: 1200px) {
article {
// Width must be calculated to fit absolute positioned ToC.
// Scales between 496px at 1200px wide and 1216px at 1920px wide, based on sidebar and gap dimensions above.
width: clamp(31rem, -44rem + 100vw, 76rem);
}
}
}

.is-toc-heading a::after {
Expand Down
4 changes: 2 additions & 2 deletions source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html
View file
Expand Up @@ -5,7 +5,7 @@

<!-- wp:pattern {"slug":"wporg-developer-2023/search-field"} /-->

<!-- wp:group {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--40)">

<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
Expand All @@ -16,7 +16,7 @@

<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->
<!-- wp:post-content /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/article-meta-github"} /-->
</article>
Expand Down
4 changes: 2 additions & 2 deletions source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html
View file
Expand Up @@ -5,7 +5,7 @@

<!-- wp:pattern {"slug":"wporg-developer-2023/search-field"} /-->

<!-- wp:group {"className":"has-three-columns","layout":{"type":"constrained","justifyContent":"left"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
<!-- wp:group {"className":"has-three-columns","align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group alignwide has-three-columns" style="margin-top:var(--wp--preset--spacing--40)">

<!-- wp:wporg/chapter-list {"style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
Expand All @@ -16,7 +16,7 @@

<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->
<!-- wp:post-content /-->

<!-- wp:pattern {"slug":"wporg-developer-2023/article-meta"} /-->
</article>
Expand Down
2 changes: 1 addition & 1 deletion source/wp-content/themes/wporg-developer-2023/theme.json
View file
Expand Up @@ -202,7 +202,7 @@
},
"link": {
"color": {
"text": "var(--wp--preset--color--blueberry-1)"
"text": "var(--wp--preset--color--charcoal-4)"
}
}
}
Expand Down

0 comments on commit 1892b50

Please sign in to comment.