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

Update show/hide-below classes for cards

Browse Source
This commit is contained in:
Tetrakern 2024-01-19 23:43:31 +01:00
parent 81ee562c0d
commit fcbc0c9402
5 changed files with 49 additions and 21 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

16
partials/_card-chapter.php
View File

@ -80,8 +80,8 @@ $show_type = $args['show_type'] ?? false;
// Make sure there are no whitespaces in-between!
if ( $list_title ) {
echo "<span class='show-below-480'>{$list_title}</span>";
echo "<span class='hide-below-480'>{$title}</span>";
echo "<span class='cq-show-below-460'>{$list_title}</span>";
echo "<span class='cq-hide-below-460'>{$title}</span>";
} else {
echo $title;
}
@ -135,7 +135,7 @@ $show_type = $args['show_type'] ?? false;
printf(
'<div class="card__content cell-desc"><div class="truncate _4-4">%1$s<span>%2$s</span>%3$s</div></div>',
$hide_author ? '' : sprintf(
'<span class="card__by-author show-below-desktop">%s</span> ',
'<span class="card__by-author cq-show-below-640">%s</span> ',
sprintf(
_x( 'by %s —', 'Large card: by {Author} —.', 'fictioneer' ),
fictioneer_get_author_node()
@ -158,7 +158,7 @@ $show_type = $args['show_type'] ?? false;
<div class="card__right">
<?php
printf(
'%1$s<span class="hide-below-480"> %2$s</span><span class="separator-dot">&#8196;&bull;&#8196;</span>%3$s',
'%1$s<span class="cq-hide-below-460"> %2$s</span><span class="separator-dot">&#8196;&bull;&#8196;</span>%3$s',
$story_data['word_count_short'],
__( 'Words', 'fictioneer' ),
$story_data['status']
@ -206,8 +206,8 @@ $show_type = $args['show_type'] ?? false;
}
if ( get_option( 'fictioneer_show_authors' ) && ! $hide_author ) {
$footer_items['author'] = '<i class="card-footer-icon fa-solid fa-circle-user hide-below-desktop"></i> ' .
fictioneer_get_author_node( get_the_author_meta( 'ID' ), 'hide-below-desktop' );
$footer_items['author'] = '<i class="card-footer-icon fa-solid fa-circle-user cq-hide-below-640"></i> ' .
fictioneer_get_author_node( get_the_author_meta( 'ID' ), 'cq-hide-below-640' );
}
$footer_items['comments'] = '<i class="card-footer-icon fa-solid fa-message" title="' .
@ -222,8 +222,8 @@ $show_type = $args['show_type'] ?? false;
<?php if ( ! empty( $chapter_rating ) ) : ?>
<div class="card__footer-box _right rating-letter-label _large tooltipped" data-tooltip="<?php echo fcntr( $chapter_rating, true ); ?>">
<span class="hide-below-480"><?php echo fcntr( $chapter_rating ); ?></span>
<span class="show-below-480"><?php echo fcntr( $chapter_rating[0] ); ?></span>
<span class="cq-hide-below-460"><?php echo fcntr( $chapter_rating ); ?></span>
<span class="cq-show-below-460"><?php echo fcntr( $chapter_rating[0] ); ?></span>
</div>
<?php endif; ?>

18
partials/_card-story.php
View File

@ -94,9 +94,9 @@ $is_sticky = FICTIONEER_ENABLE_STICKY_CARDS &&
// Content
printf(
'<div class="card__content cell-desc"><div class="truncate %1$s">%2$s<span>%3$s</span></div></div>',
$chapter_count > 2 ? '_3-4' : '_4-4',
$chapter_count > 2 ? '_cq-3-4' : '_4-4',
$hide_author ? '' : sprintf(
'<span class="card__by-author show-below-desktop">%s</span> ',
'<span class="card__by-author cq-show-below-640">%s</span> ',
sprintf(
_x( 'by %s —', 'Large card: by {Author} —.', 'fictioneer' ),
fictioneer_get_author_node()
@ -140,7 +140,7 @@ $is_sticky = FICTIONEER_ENABLE_STICKY_CARDS &&
<div class="card__right">
<?php
printf(
'%1$s<span class="hide-below-480"> %2$s</span><span class="separator-dot">&#8196;&bull;&#8196;</span>%3$s',
'%1$s<span class="cq-hide-below-460"> %2$s</span><span class="separator-dot">&#8196;&bull;&#8196;</span>%3$s',
fictioneer_shorten_number( fictioneer_get_word_count( $chapter->ID ) ),
__( 'Words', 'fictioneer' ),
strtotime( '-1 days' ) < strtotime( get_the_date( '', $chapter->ID ) ) ?
@ -194,12 +194,12 @@ $is_sticky = FICTIONEER_ENABLE_STICKY_CARDS &&
}
if ( ! $hide_author ) {
$footer_items['author'] = '<i class="card-footer-icon fa-solid fa-circle-user hide-below-desktop"></i> ' .
fictioneer_get_author_node( get_the_author_meta( 'ID' ), 'hide-below-desktop' );
$footer_items['author'] = '<i class="card-footer-icon fa-solid fa-circle-user cq-hide-below-640"></i> ' .
fictioneer_get_author_node( get_the_author_meta( 'ID' ), 'cq-hide-below-640' );
}
$footer_items['comments'] = '<i class="card-footer-icon fa-solid fa-message hide-below-480" title="' .
esc_attr__( 'Comments', 'fictioneer' ) . '"></i> <span class="hide-below-480" title="' .
$footer_items['comments'] = '<i class="card-footer-icon fa-solid fa-message cq-hide-below-460" title="' .
esc_attr__( 'Comments', 'fictioneer' ) . '"></i> <span class="cq-hide-below-460" title="' .
esc_attr__( 'Comments', 'fictioneer' ) . '">' . $story['comment_count'] . '</span>';
$footer_items['status'] = '<i class="card-footer-icon ' . $story['icon'] . '"></i> ' . fcntr( $story['status'] );
@ -212,8 +212,8 @@ $is_sticky = FICTIONEER_ENABLE_STICKY_CARDS &&
?></div>
<div class="card__footer-box _right rating-letter-label _large tooltipped" data-tooltip="<?php echo fcntr( $story['rating'], true ); ?>">
<span class="hide-below-480"><?php echo fcntr( $story['rating'] ); ?></span>
<span class="show-below-480"><?php echo fcntr( $story['rating_letter'] ); ?></span>
<span class="cq-hide-below-460"><?php echo fcntr( $story['rating'] ); ?></span>
<span class="cq-show-below-460"><?php echo fcntr( $story['rating_letter'] ); ?></span>
</div>
</div>

32
src/scss/_card.scss
View File

@ -221,7 +221,7 @@
font: var(--card-type-font-weight) 62.5%/1 var(--ff-base);
text-shadow: none;
text-transform: uppercase;
padding: .25rem .375rem;
padding: .35em .55em;
border-radius: var(--layout-border-radius-small);
}
@ -232,7 +232,7 @@
opacity: .375;
&:not(:last-child) {
margin-right: .25rem;
margin-right: .35em;
}
}
@ -728,6 +728,34 @@
}
}
.cq-hide-below-460 {
@container (max-width: 459.99px) {
display: none !important;
content-visibility: hidden;
}
}
.cq-hide-below-640 {
@container (max-width: 639.99px) {
display: none !important;
content-visibility: hidden;
}
}
.cq-show-below-460 {
@container (min-width: 460px) {
display: none !important;
content-visibility: hidden;
}
}
.cq-show-below-640 {
@container (min-width: 640px) {
display: none !important;
content-visibility: hidden;
}
}
&._skeleton {
box-shadow: none;
filter: none;