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

Move card header into grid container

Browse Source
This commit is contained in:
Tetrakern 2024-05-14 10:05:05 +02:00
parent 99ae6098c8
commit 268fefe4d1
9 changed files with 87 additions and 84 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

66
partials/_card-chapter.php
View File

@ -89,41 +89,41 @@ $thumbnail_args = array(
>
<div class="card__body polygon">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Chapter', 'Chapter card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title">
<a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php
$list_title = wp_strip_all_tags( get_post_meta( $post->ID, 'fictioneer_chapter_list_title', true ) );
$list_title = trim( $list_title );
if ( ! empty( $post->post_password ) ) {
echo '<i class="fa-solid fa-lock protected-icon"></i> ';
}
// Make sure there are no whitespaces in-between!
if ( $list_title ) {
echo "<span class='cq-show-below-460'>{$list_title}</span>";
echo "<span class='cq-hide-below-460'>{$title}</span>";
} else {
echo $title;
}
?></a>
</h3>
<?php
if ( ! empty( $story_id ) && ! empty( $story_data ) ) {
echo fictioneer_get_card_controls( $story_id, $post->ID );
}
?>
</div>
<div class="card__main _grid _large">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Chapter', 'Chapter card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title">
<a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php
$list_title = wp_strip_all_tags( get_post_meta( $post->ID, 'fictioneer_chapter_list_title', true ) );
$list_title = trim( $list_title );
if ( ! empty( $post->post_password ) ) {
echo '<i class="fa-solid fa-lock protected-icon"></i> ';
}
// Make sure there are no whitespaces in-between!
if ( $list_title ) {
echo "<span class='cq-show-below-460'>{$list_title}</span>";
echo "<span class='cq-hide-below-460'>{$title}</span>";
} else {
echo $title;
}
?></a>
</h3>
<?php
if ( ! empty( $story_id ) && ! empty( $story_data ) ) {
echo fictioneer_get_card_controls( $story_id, $post->ID );
}
?>
</div>
<?php
// Action hook
do_action( 'fictioneer_large_card_body_chapter', $post, $story_data, $args );

20
partials/_card-collection.php
View File

@ -97,18 +97,18 @@ $thumbnail_args = array(
<li id="collection-card-<?php echo $post->ID; ?>" class="post-<?php echo $post->ID; ?> card _large _collection <?php echo implode( ' ', $card_classes ); ?>" <?php echo $card_attributes; ?>>
<div class="card__body polygon">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Collection', 'Collection card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<div class="card__main _grid _large">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Collection', 'Collection card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<?php
// Action hook
do_action( 'fictioneer_large_card_body_collection', $post, $items, $args );

14
partials/_card-page.php
View File

@ -45,15 +45,15 @@ $thumbnail_args = array(
<li id="post-card-<?php echo $post->ID; ?>" class="post-<?php echo $post->ID; ?> card _large _page <?php echo implode( ' ', $card_classes ); ?>" <?php echo $card_attributes; ?>>
<div class="card__body polygon">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Page', 'Blog card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<div class="card__main _grid _large">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Page', 'Blog card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<?php
// Action hook
do_action( 'fictioneer_large_card_body_page', $post, $args );

14
partials/_card-post.php
View File

@ -46,15 +46,15 @@ $thumbnail_args = array(
<li id="post-card-<?php echo $post->ID; ?>" class="post-<?php echo $post->ID; ?> card _large _post <?php echo implode( ' ', $card_classes ); ?>" <?php echo $card_attributes; ?>>
<div class="card__body polygon">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Blog', 'Blog card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<div class="card__main _grid _large">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Blog', 'Blog card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<?php
// Action hook
do_action( 'fictioneer_large_card_body_post', $post, $args );

14
partials/_card-recommendation.php
View File

@ -74,15 +74,15 @@ $thumbnail_args = array(
<li id="recommendation-card-<?php echo $post->ID; ?>" class="post-<?php echo $post->ID; ?> card _recommendation _large _no-footer <?php echo implode( ' ', $card_classes ); ?>" <?php echo $card_attributes; ?>>
<div class="card__body polygon">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Recommendation', 'Recommendation card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<div class="card__main _grid _large">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Recommendation', 'Recommendation card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php the_permalink(); ?>" class="truncate _1-1"><?php echo $title; ?></a></h3>
</div>
<?php
// Action hook
do_action( 'fictioneer_large_card_body_recommendation', $post, $args );

36
partials/_card-story.php
View File

@ -80,26 +80,26 @@ $thumbnail_args = array(
>
<div class="card__body polygon">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Story', 'Story card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php echo $story_link; ?>" class="truncate _1-1"><?php
if ( ! empty( $post->post_password ) ) {
echo '<i class="fa-solid fa-lock protected-icon"></i> ';
}
echo $story['title'];
?></a></h3>
<?php echo fictioneer_get_card_controls( $post->ID ); ?>
</div>
<div class="card__main _grid _large">
<div class="card__header _large">
<?php if ( $args['show_type'] ?? false ) : ?>
<div class="card__label"><?php _ex( 'Story', 'Story card label.', 'fictioneer' ); ?></div>
<?php endif; ?>
<h3 class="card__title"><a href="<?php echo $story_link; ?>" class="truncate _1-1"><?php
if ( ! empty( $post->post_password ) ) {
echo '<i class="fa-solid fa-lock protected-icon"></i> ';
}
echo $story['title'];
?></a></h3>
<?php echo fictioneer_get_card_controls( $post->ID ); ?>
</div>
<?php
// Action hook
do_action( 'fictioneer_large_card_body_story', $post, $story, $args );

3
src/scss/_card.scss
View File

@ -131,6 +131,7 @@
}
&__header {
grid-area: head;
display: flex;
align-items: center;
gap: .5em;
@ -687,6 +688,7 @@
._grid._large {
grid-template-rows: 1fr auto auto;
grid-template-areas:
'head head'
'img desc'
'list list'
'tax tax'
@ -694,6 +696,7 @@
@container (min-width: 560px) {
grid-template-areas:
'head head'
'img desc'
'img list'
'tax tax'