malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Improve chapter group labels

Browse Source
This commit is contained in:
Tetrakern 2023-01-23 21:49:08 +01:00
parent 2946147645
commit e51af33a4c
3 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
includes/functions/_shortcodes.php
View File

@ -628,12 +628,10 @@ function fictioneer_shortcode_chapter_list( $attr ) {
<?php if ( $heading ) : ?>
<?php $discriminator = md5( $heading . microtime() ); ?>
<input id="group-toggle-<?php echo $discriminator; ?>" class="chapter-group__toggle" type="checkbox" hidden>
<h5 class="chapter-group__heading truncate truncate--1-1">
<label for="group-toggle-<?php echo $discriminator; ?>">
<i class="fa-solid fa-chevron-down chapter-group__heading-icon"></i>
<span><?php echo $heading; ?></span>
</label>
</h5>
<label class="chapter-group__label" for="group-toggle-<?php echo $discriminator; ?>" tabindex="0" aria-role="button" aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>">
<i class="fa-solid fa-chevron-down chapter-group__heading-icon"></i>
<span><?php echo $heading; ?></span>
</label>
<?php endif; ?>
<ol class="chapter-group__list">
<?php

10
partials/_story-content.php
View File

@ -239,12 +239,10 @@ $blog_posts = new WP_Query(
<?php if ( $has_groups ) : ?>
<input id="group-toggle-<?php echo $group_index; ?>" class="chapter-group__toggle" type="checkbox" hidden>
<h5 class="chapter-group__heading truncate truncate--1-1">
<label for="group-toggle-<?php echo $group_index; ?>">
<i class="fa-solid fa-chevron-down chapter-group__heading-icon"></i>
<span><?php echo $group['group']; ?></span>
</label>
</h5>
<label class="chapter-group__label" for="group-toggle-<?php echo $group_index; ?>" tabindex="0" aria-role="button" aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>">
<i class="fa-solid fa-chevron-down chapter-group__heading-icon"></i>
<span><?php echo $group['group']; ?></span>
</label>
<?php endif; ?>
<ol class="chapter-group__list">

22
src/scss/common/_base.scss
View File

@ -518,7 +518,7 @@ html:not(.logged-in) body:not(.logged-in) {
padding-left: 2px;
}
.chapter-group__heading label {
.chapter-group__label {
padding-left: 2px;
}
}
@ -531,31 +531,31 @@ html:not(.logged-in) body:not(.logged-in) {
}
}
&__heading {
&__label {
display: flex;
align-items: flex-start;
gap: 12px;
background: none;
color: var(--fg-800);
font-size: var(--fs-dxs);
font-weight: var(--font-weight-semi-strong);
letter-spacing: calc(0.02em + var(--font-letter-spacing-base));
margin: 0 !important;
label {
display: block;
padding: 0 0 12px 6px;
}
padding: 0 6px;
margin-bottom: 12px;
width: fit-content;
:is(i, .icon) {
margin-right: 6px;
transition-duration: var(--transition-duration);
transition-property: opacity, transform;
transform: translateY(4px);
}
}
&__toggle {
&:checked {
+ h5 {
+ label {
:is(i, .icon) {
transform: rotate(-180deg);
transform: translateY(4px) rotate(-180deg);
}
}