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

Reduce DOM elements

Browse Source
This commit is contained in:
Tetrakern 2023-06-04 01:49:00 +02:00
parent 5b8ae2d31b
commit 6d93b1d77b
14 changed files with 104 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.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

2
includes/functions/_content_helpers.php
View File

@ -1167,7 +1167,7 @@ if ( ! function_exists( 'fictioneer_get_post_meta_items' ) ) {
// Start HTML ---> ?>
<time datetime="<?php the_time( 'c' ); ?>" class="post__date">
<i class="fa-solid fa-clock" title="<?php esc_attr_e( 'Publishing Date', 'fictioneer' ) ?>"></i>
<span title="<?php esc_attr_e( 'Publishing Date', 'fictioneer' ) ?>"><?php echo get_the_date(); ?></span>
<?php echo get_the_date(); ?>
</time>
<?php // <--- End HTML
$output['date'] = ob_get_clean();

15
partials/_card-chapter.php
View File

@ -138,31 +138,36 @@ $show_type = isset( $args['show_type'] ) && $args['show_type'];
<?php endif; ?>
<?php if ( $show_taxonomies ) : ?>
<div class="card__tag-list dot-separator cell-tax">
<div class="card__tag-list cell-tax">
<?php
$output = [];
if ( $fandoms ) {
foreach ( $fandoms as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
}
}
if ( $genres ) {
foreach ( $genres as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
}
}
if ( $characters ) {
foreach ( $characters as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
?>
</div>
<?php endif; ?>

15
partials/_card-collection.php
View File

@ -135,31 +135,36 @@ $comment_count = get_comments( $comment_args );
<?php endif; ?>
<?php if ( $show_taxonomies ) : ?>
<div class="card__tag-list dot-separator cell-tax">
<div class="card__tag-list cell-tax">
<?php
$output = [];
if ( $fandoms ) {
foreach ( $fandoms as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
}
}
if ( $genres ) {
foreach ( $genres as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
}
}
if ( $characters ) {
foreach ( $characters as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
?>
</div>
<?php endif; ?>

11
partials/_card-post.php
View File

@ -45,19 +45,24 @@ $show_type = isset( $args['show_type'] ) && $args['show_type'];
<div class="card__content cell-desc truncate _4-4"><span><?php echo get_the_excerpt(); ?></span></div>
<?php if ( $categories || $tags ) : ?>
<div class="card__tag-list dot-separator cell-tax">
<div class="card__tag-list cell-tax">
<?php
$output = [];
if ( $categories ) {
foreach ( $categories as $cat ) {
echo '<span><a href="' . get_category_link( $cat ) . '" class="tag-pill _inline _category">' . get_category( $cat )->name . '</a></span>';
$output[] = '<span><a href="' . get_category_link( $cat ) . '" class="tag-pill _inline _category">' . get_category( $cat )->name . '</a></span>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
?>
</div>
<?php endif; ?>

15
partials/_card-recommendation.php
View File

@ -88,31 +88,36 @@ $show_type = isset( $args['show_type'] ) && $args['show_type'];
<?php endif; ?>
<?php if ( $show_taxonomies ) : ?>
<div class="card__tag-list dot-separator cell-tax">
<div class="card__tag-list cell-tax">
<?php
$output = [];
if ( $fandoms ) {
foreach ( $fandoms as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
}
}
if ( $genres ) {
foreach ( $genres as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
}
}
if ( $characters ) {
foreach ( $characters as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
?>
</div>
<?php endif; ?>

15
partials/_card-story.php
View File

@ -116,31 +116,36 @@ $show_type = isset( $args['show_type'] ) && $args['show_type'];
<?php endif; ?>
<?php if ( $show_taxonomies ) : ?>
<div class="card__tag-list dot-separator cell-tax">
<div class="card__tag-list cell-tax">
<?php
$output = [];
if ( $story['fandoms'] ) {
foreach ( $story['fandoms'] as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
}
}
if ( $story['genres'] ) {
foreach ( $story['genres'] as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
}
}
if ( $story['characters'] ) {
foreach ( $story['characters'] as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
?>
</div>
<?php endif; ?>

15
partials/_latest-recommendations-compact.php
View File

@ -115,32 +115,37 @@ $entries = new WP_Query( $query_args );
<?php if ( $show_taxonomies ) : ?>
<div class="card__overlay-infobox escape-last-click">
<div class="card__tag-list _small truncate _3-3 dot-separator">
<div class="card__tag-list _small truncate _3-3">
<?php
if ( $fandoms || $characters || $genres || $tags ) {
$output = [];
if ( $fandoms ) {
foreach ( $fandoms as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a>';
}
}
if ( $genres ) {
foreach ( $genres as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a>';
}
}
if ( $characters ) {
foreach ( $characters as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
} else {
?><span class="card__no-taxonomies"><?php _e( 'No taxonomies specified yet.', 'fictioneer' ); ?></span><?php
}

15
partials/_latest-recommendations.php
View File

@ -136,32 +136,37 @@ $entries = new WP_Query( $query_args );
<?php if ( $show_taxonomies ) : ?>
<div class="card__tag-list _small _scrolling cell-tax">
<div class="dot-separator">
<div>
<?php
if ( $fandoms || $characters || $genres || $tags ) {
$output = [];
if ( $fandoms ) {
foreach ( $fandoms as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a>';
}
}
if ( $genres ) {
foreach ( $genres as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a>';
}
}
if ( $characters ) {
foreach ( $characters as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
} else {
?><span class="card__no-taxonomies"><?php _e( 'No taxonomies specified yet.', 'fictioneer' ); ?></span><?php
}

15
partials/_latest-stories-compact.php
View File

@ -121,32 +121,37 @@ $entries = new WP_Query( $query_args );
<div class="card__overlay-infobox escape-last-click">
<?php if ( ! get_option( 'fictioneer_hide_taxonomies_on_story_cards' ) ) : ?>
<div class="card__tag-list _small truncate _2-2 dot-separator">
<div class="card__tag-list _small truncate _2-2">
<?php
if ( $story['has_taxonomies'] || $tags ) {
$output = [];
if ( $story['fandoms'] ) {
foreach ( $story['fandoms'] as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a>';
}
}
if ( $story['genres'] ) {
foreach ( $story['genres'] as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a>';
}
}
if ( $story['characters'] ) {
foreach ( $story['characters'] as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
} else {
?><span class="card__no-taxonomies"><?php _e( 'No taxonomies specified yet.', 'fictioneer' ); ?></span><?php
}

15
partials/_latest-stories.php
View File

@ -114,32 +114,37 @@ $entries = new WP_Query( $query_args );
<?php if ( ! get_option( 'fictioneer_hide_taxonomies_on_story_cards' ) ) : ?>
<div class="card__tag-list _small _scrolling cell-tax">
<div class="dot-separator">
<div>
<?php
if ( $story['has_taxonomies'] || $tags ) {
$output = [];
if ( $story['fandoms'] ) {
foreach ( $story['fandoms'] as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a>';
}
}
if ( $story['genres'] ) {
foreach ( $story['genres'] as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a>';
}
}
if ( $story['characters'] ) {
foreach ( $story['characters'] as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
} else {
?><span class="card__no-taxonomies"><?php _e( 'No taxonomies specified yet.', 'fictioneer' ); ?></span><?php
}

15
partials/_latest-updates.php
View File

@ -171,32 +171,37 @@ $entries = new WP_Query( $query_args );
<?php if ( ! get_option( 'fictioneer_hide_taxonomies_on_story_cards' ) && ! $args['simple'] ) : ?>
<div class="card__tag-list _small _scrolling cell-tax">
<div class="dot-separator">
<div>
<?php
if ( $story['has_taxonomies'] || $tags ) {
$output = [];
if ( $story['fandoms'] ) {
foreach ( $story['fandoms'] as $fandom ) {
echo '<span><a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $fandom ) . '" class="tag-pill _inline _fandom">' . $fandom->name . '</a>';
}
}
if ( $story['genres'] ) {
foreach ( $story['genres'] as $genre ) {
echo '<span><a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $genre ) . '" class="tag-pill _inline _genre">' . $genre->name . '</a>';
}
}
if ( $tags ) {
foreach ( $tags as $tag ) {
echo '<span><a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $tag ) . '" class="tag-pill _inline">' . $tag->name . '</a>';
}
}
if ( $story['characters'] ) {
foreach ( $story['characters'] as $character ) {
echo '<span><a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a></span>';
$output[] = '<a href="' . get_tag_link( $character ) . '" class="tag-pill _inline _character">' . $character->name . '</a>';
}
}
// Implode with three-per-em spaces around a bullet
echo implode( '&emsp13;&bull;&emsp13;', $output );
} else {
?><span class="card__no-taxonomies"><?php _e( 'No taxonomies specified yet.', 'fictioneer' ); ?></span><?php
}

3
src/scss/_card.scss
View File

@ -334,7 +334,10 @@
}
&__tag-list {
color: var(--fg-800); // Separators, tags have own color
font-family: var(--ff-base);
font-size: var(--fs-dxs); // 13px (desktop) to 12px (mobile)
line-height: 1.5;
padding: 0 1px; // Visually more "embedded"
&._small,