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

Improve chapter CSS selectors

Browse Source 
I know it helps, but I lack a way to actually benchmark this, which is annoying.
This commit is contained in:
Tetrakern 2023-08-30 12:27:58 +02:00
parent adcb3edb0f
commit 044632a0c6
6 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
DEVELOPMENT.md
View File

@ -49,7 +49,7 @@ However, there are a few guidelines:
Fictioneer was originally styled with [BEM](https://getbem.com/) — and still is, although with some modifications. While BEM offers great structure and prevents cascading issues, this comes with a bag of redundancy and heavy markup. You easily end up with extremely long class signatures and lists that break several lines. BEM also does not work well with utility classes which escape the idea of scoped concerns, causing cascading issues again. But adding redundant modifiers for each and every block is not great either.
To alleviate these drawbacks, Fictioneer makes two changes to the default BEM methodology. Modifiers are no longer suffixes but classes that start with an underscore (`._modifier`), always within a block scope. Modifiers are chained to the block parent (`.block._modifier` or `.block__element._modifier`), granting them a higher specificity to override parent styles and single-specificity utility classes. Of course this is no silver bullet, but it has proven itself to work flawlessly during the refactoring.
To alleviate these drawbacks, Fictioneer makes two changes to the default BEM methodology. Modifiers are no longer suffixes but classes that start with an underscore (`._modifier`), always within a block scope. Modifiers are chained to the block parent (`.block._modifier` or `.block__element._modifier`), granting them a higher specificity to override parent styles and single-specificity utility classes. Of course this is no silver bullet either, as it is slightly less efficient.
```html
<section class="block">

2
css/chapter.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

9
includes/functions/hooks/_chapter_hooks.php
View File

@ -213,13 +213,9 @@ function fictioneer_chapter_nav_buttons( $args, $location ) {
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" title="<?php echo get_the_title( $args['chapter_ids'][ $args['prev_index'] ] ); ?>" class="button _secondary _navigation _prev"><?php echo fcntr( 'previous' ) ?></a>
<?php endif; ?>
<?php if ( $location === 'top' ) : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Scroll to bottom', 'fictioneer' ); ?>">
<a href="#bottom" data-block="center" aria-label="<?php _e( 'Scroll to bottom of the chapter', 'fictioneer' ); ?>" name="top" class="anchor button _secondary"><i class="fa-solid fa-caret-down"></i></a>
</div>
<a href="#bottom" data-block="center" aria-label="<?php _e( 'Scroll to bottom of the chapter', 'fictioneer' ); ?>" name="top" class="anchor button _secondary tooltipped" data-tooltip="<?php esc_attr_e( 'Scroll to bottom', 'fictioneer' ); ?>"><i class="fa-solid fa-caret-down"></i></a>
<?php else : ?>
<div class="tooltipped" data-tooltip="<?php esc_attr_e( 'Scroll to top', 'fictioneer' ); ?>">
<a href="#top" data-block="center" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" name="bottom" class="anchor button _secondary"><i class="fa-solid fa-caret-up"></i></a>
</div>
<a href="#top" data-block="center" aria-label="<?php _e( 'Scroll to top of the chapter', 'fictioneer' ); ?>" name="bottom" class="anchor button _secondary tooltipped" data-tooltip="<?php esc_attr_e( 'Scroll to top', 'fictioneer' ); ?>"><i class="fa-solid fa-caret-up"></i></a>
<?php endif; ?>
<?php if ( $args['next_index'] ) : ?>
<a href="<?php echo get_permalink( $args['chapter_ids'][ $args['next_index'] ] ); ?>" title="<?php echo get_the_title( $args['chapter_ids'][ $args['next_index'] ] ); ?>" class="button _secondary _navigation _next"><?php echo fcntr( 'next' ); ?></a>
@ -338,7 +334,6 @@ function fictioneer_chapter_index_popup_menu( $args ) {
<i class="fa-solid fa-caret-left"></i>
<span><?php _e( 'Back to Story', 'fictioneer' ); ?></span>
</a>
<hr>
<div class="popup-menu__section" data-target="popup-chapter-list"></div>
</div>
</div>

24
single-fcn_chapter.php
View File

@ -122,9 +122,15 @@ get_header( null, $header_args );
<article id="ch-<?php the_ID(); ?>" data-author-id="<?php echo get_the_author_meta( 'ID' ); ?>" class="chapter__article padding-left padding-right <?php echo post_password_required() ? '_password' : ''; ?>">
<div class="chapter__actions chapter__actions--top">
<div class="chapter__actions-left"><?php do_action( 'fictioneer_chapter_actions_top_left', $hook_args, 'top' ); ?></div>
<div class="chapter__actions-center"><?php do_action( 'fictioneer_chapter_actions_top_center', $hook_args, 'top' ); ?></div>
<div class="chapter__actions-right"><?php do_action( 'fictioneer_chapter_actions_top_right', $hook_args, 'top' ); ?></div>
<div class="chapter__actions-container chapter__actions-left"><?php
do_action( 'fictioneer_chapter_actions_top_left', $hook_args, 'top' );
?></div>
<div class="chapter__actions-container chapter__actions-center"><?php
do_action( 'fictioneer_chapter_actions_top_center', $hook_args, 'top' );
?></div>
<div class="chapter__actions-container chapter__actions-right"><?php
do_action( 'fictioneer_chapter_actions_top_right', $hook_args, 'top' );
?></div>
</div>
<?php
@ -156,9 +162,15 @@ get_header( null, $header_args );
?>
<footer class="chapter__footer chapter__actions chapter__actions--bottom padding-bottom chapter-end">
<div class="chapter__actions-left"><?php do_action( 'fictioneer_chapter_actions_bottom_left', $hook_args, 'bottom' ); ?></div>
<div class="chapter__actions-center"><?php do_action( 'fictioneer_chapter_actions_bottom_center', $hook_args, 'bottom' ); ?></div>
<div class="chapter__actions-right"><?php do_action( 'fictioneer_chapter_actions_bottom_right', $hook_args, 'bottom' ); ?></div>
<div class="chapter__actions-container chapter__actions-left"><?php
do_action( 'fictioneer_chapter_actions_bottom_left', $hook_args, 'bottom' );
?></div>
<div class="chapter__actions-container chapter__actions-center"><?php
do_action( 'fictioneer_chapter_actions_bottom_center', $hook_args, 'bottom' );
?></div>
<div class="chapter__actions-container chapter__actions-right"><?php
do_action( 'fictioneer_chapter_actions_bottom_right', $hook_args, 'bottom' );
?></div>
</footer>
</article>

16
src/scss/_chapter.scss
View File

@ -55,12 +55,12 @@
}
}
> div {
&-container {
display: flex;
gap: 3px;
}
&-center:is(div) {
&-center {
justify-content: center;
column-gap: 6px;
}
@ -75,7 +75,7 @@
}
}
> :not(.chapter__actions-center) > * {
> :not(.chapter__actions-center) > .button {
border-radius: 0;
&:first-child {
@ -87,16 +87,6 @@
border-top-right-radius: var(--layout-border-radius-small);
border-bottom-right-radius: var(--layout-border-radius-small);
}
&:not(:first-child) .button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) .button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.button {