Add padding to card list links

Makes them easier to click on mobile.
This commit is contained in:
Tetrakern 2023-09-18 13:20:45 +02:00
parent 979c8d54f5
commit 6bbf017405
9 changed files with 18 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -144,7 +144,9 @@ $show_type = $args['show_type'] ?? false;
<li class="card__link-list-item">
<div class="card__left text-overflow-ellipsis">
<i class="fa-solid fa-caret-right"></i>
<a href="<?php the_permalink( $story_id ); ?>"><?php echo $story_data['title']; ?></a>
<a href="<?php the_permalink( $story_id ); ?>" class="card__link-list-link"><?php
echo $story_data['title'];
?></a>
</div>
<div class="card__right">
<?php

View File

@ -186,7 +186,7 @@ $comment_count = get_comments( $comment_args );
<li class="card__link-list-item">
<div class="card__left text-overflow-ellipsis">
<i class="fa-solid fa-caret-right"></i>
<a href="<?php the_permalink( $item->ID ); ?>"><?php
<a href="<?php the_permalink( $item->ID ); ?>" class="card__link-list-link"><?php
$list_title = $item->post_type == 'fcn_chapter' ?
fictioneer_get_field( 'fictioneer_chapter_list_title', $item->ID ) : 0;

View File

@ -100,7 +100,9 @@ $show_type = $args['show_type'] ?? false;
$tuple = explode( '|', $url );
$tuple = array_map( 'trim', $tuple );
?>
<a href="<?php echo esc_url( $tuple[1] ); ?>" rel="noopener" target="_blank"><?php echo $tuple[0]; ?></a>
<a href="<?php echo esc_url( $tuple[1] ); ?>" rel="noopener" target="_blank" class="card__link-list-link"><?php
echo $tuple[0];
?></a>
</div>
</li>
<?php endforeach; ?>

View File

@ -118,7 +118,7 @@ $is_sticky = FICTIONEER_ENABLE_STICKY_CARDS &&
<li class="card__link-list-item">
<div class="card__left text-overflow-ellipsis">
<i class="fa-solid fa-caret-right"></i>
<a href="<?php the_permalink( $chapter->ID ); ?>"><?php
<a href="<?php the_permalink( $chapter->ID ); ?>" class="card__link-list-link"><?php
$list_title = fictioneer_get_field( 'fictioneer_chapter_list_title', $chapter->ID );
if ( empty( $list_title ) ) {

View File

@ -190,7 +190,9 @@ remove_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
<li class="card__link-list-item">
<div class="card__left text-overflow-ellipsis">
<i class="fa-solid fa-caret-right"></i>
<a href="<?php the_permalink( $chapter_id ); ?>"><?php echo $chapter_title; ?></a>
<a href="<?php the_permalink( $chapter_id ); ?>" class="card__link-list-link"><?php
echo $chapter_title;
?></a>
</div>
<div class="card__right">
<?php

View File

@ -180,7 +180,7 @@ remove_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
<li class="card__link-list-item">
<div class="card__left text-overflow-ellipsis">
<i class="fa-solid fa-caret-right"></i>
<a href="<?php the_permalink( $chapter_id ); ?>"><?php
<a href="<?php the_permalink( $chapter_id ); ?>" class="card__link-list-link"><?php
// Chapter title
$list_title = fictioneer_get_field( 'fictioneer_chapter_list_title', $chapter_id );

View File

@ -392,6 +392,10 @@
}
}
&-link {
padding: 4px 0; // Increase link click target
}
.card__left {
flex: 1 1 auto;
line-height: 18px; // For vertical centering