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

Restructuring 1

Browse Source
This commit is contained in:
Tetrakern 2024-05-12 11:57:28 +02:00
parent f5e4da7115
commit 370462518a
5 changed files with 121 additions and 66 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
partials/_latest-chapters-compact.php
View File

@ -175,7 +175,7 @@ remove_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
}
?>
<li class="post-<?php echo $post->ID; ?> card watch-last-clicked _small _info _chapter <?php echo implode( ' ', $card_classes ); ?>" <?php echo $card_attributes; ?>>
<li class="post-<?php echo $post->ID; ?> card watch-last-clicked _small _info _chapter _no-footer <?php echo implode( ' ', $card_classes ); ?>" <?php echo $card_attributes; ?>>
<div class="card__body polygon">
<button class="card__info-toggle toggle-last-clicked" aria-label="<?php esc_attr_e( 'Open info box', 'fictioneer' ); ?>"><i class="fa-solid fa-chevron-down"></i></button>

110
partials/_latest-chapters.php
View File

@ -148,6 +148,10 @@ remove_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
$card_classes[] = '_' . get_theme_mod( 'card_style' );
}
if ( $args['simple'] ) {
$card_classes[] = '_no-footer';
}
if ( $args['vertical'] ) {
$card_classes[] = '_vertical';
}
@ -258,61 +262,61 @@ remove_filter( 'posts_where', 'fictioneer_exclude_protected_posts' );
</div>
</div>
<?php if ( ! $args['simple'] ) : ?>
<div class="card__footer cell-footer _small">
<div class="card__footer-box _left text-overflow-ellipsis"><?php
// Build footer items
$footer_items = [];
$footer_items['words'] = '<i class="card-footer-icon fa-solid fa-font" title="' .
esc_attr__( 'Words', 'fictioneer' ) . '"></i> ' .
fictioneer_shorten_number( fictioneer_get_word_count( $post->ID ) );
if ( $args['orderby'] == 'modified' ) {
$footer_items['modified_date'] = '<i class="card-footer-icon fa-regular fa-clock" title="' .
esc_attr__( 'Last Updated', 'fictioneer' ) . '"></i> ' .
get_the_modified_date( FICTIONEER_LATEST_CHAPTERS_FOOTER_DATE, $post );
} else {
$footer_items['publish_date'] = '<i class="card-footer-icon fa-solid fa-clock" title="' .
esc_attr__( 'Published', 'fictioneer' ) . '"></i> ' .
get_the_date( FICTIONEER_LATEST_CHAPTERS_FOOTER_DATE, $post );
}
$footer_items['comments'] = '<i class="card-footer-icon fa-solid fa-message" title="' .
esc_attr__( 'Comments', 'fictioneer' ) . '"></i> ' . get_comments_number();
if ( $story ) {
$footer_items['status'] = '<i class="card-footer-icon ' . $story['icon'] . '"></i> ' .
fcntr( $story['status'] );
}
// Filter footer items
$footer_items = apply_filters(
'fictioneer_filter_shortcode_latest_chapters_card_footer',
$footer_items,
$post,
$args,
$story
);
// Implode and render footer items
echo implode( ' ', $footer_items );
?></div>
<?php if ( ! empty( $chapter_rating ) ) : ?>
<div class="card__footer-box _right rating-letter-label tooltipped" data-tooltip="<?php echo fcntr( $chapter_rating, true ); ?>">
<?php echo fcntr( $chapter_rating[0] ); ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php if ( ! $args['simple'] ) : ?>
<div class="card__footer _small">
<div class="card__footer-box _left text-overflow-ellipsis"><?php
// Build footer items
$footer_items = [];
$footer_items['words'] = '<i class="card-footer-icon fa-solid fa-font" title="' .
esc_attr__( 'Words', 'fictioneer' ) . '"></i> ' .
fictioneer_shorten_number( fictioneer_get_word_count( $post->ID ) );
if ( $args['orderby'] == 'modified' ) {
$footer_items['modified_date'] = '<i class="card-footer-icon fa-regular fa-clock" title="' .
esc_attr__( 'Last Updated', 'fictioneer' ) . '"></i> ' .
get_the_modified_date( FICTIONEER_LATEST_CHAPTERS_FOOTER_DATE, $post );
} else {
$footer_items['publish_date'] = '<i class="card-footer-icon fa-solid fa-clock" title="' .
esc_attr__( 'Published', 'fictioneer' ) . '"></i> ' .
get_the_date( FICTIONEER_LATEST_CHAPTERS_FOOTER_DATE, $post );
}
$footer_items['comments'] = '<i class="card-footer-icon fa-solid fa-message" title="' .
esc_attr__( 'Comments', 'fictioneer' ) . '"></i> ' . get_comments_number();
if ( $story ) {
$footer_items['status'] = '<i class="card-footer-icon ' . $story['icon'] . '"></i> ' .
fcntr( $story['status'] );
}
// Filter footer items
$footer_items = apply_filters(
'fictioneer_filter_shortcode_latest_chapters_card_footer',
$footer_items,
$post,
$args,
$story
);
// Implode and render footer items
echo implode( ' ', $footer_items );
?></div>
<?php if ( ! empty( $chapter_rating ) ) : ?>
<div class="card__footer-box _right rating-letter-label tooltipped" data-tooltip="<?php echo fcntr( $chapter_rating, true ); ?>">
<?php echo fcntr( $chapter_rating[0] ); ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</li>

71
src/scss/_card.scss
View File

@ -18,9 +18,9 @@
}
.card {
list-style: none;
--layout-link-color-hover: var(--card-link-color-hover, var(--fg-300));
--this-padding: min(var(--card-body-container-padding, clamp(0.75rem, 3.25cqw, 1.25rem)), 16px);
list-style: none;
position: relative;
border-radius: var(--layout-border-radius-small);
max-width: calc(100vw - 20px);
@ -124,7 +124,9 @@
justify-content: space-between;
background-color: var(--card-bg-color);
font-family: var(--ff-card-body);
padding: var(--this-padding);
padding-top: var(--this-padding);
padding-bottom: var(--this-padding);
// padding: var(--this-padding);
border-radius: var(--layout-border-radius-small);
height: 100%; // Fill to align with siblings
transition: filter var(--transition-duration);
@ -136,6 +138,8 @@
align-items: center;
gap: .5em;
font-size: var(--card-title-font-size, clamp(15px, 4.1cqw, 18px));
margin-left: var(--this-padding);
margin-right: var(--this-padding);
margin-bottom: 0.75em; // Based on font-size
}
@ -434,12 +438,15 @@
}
&__footer {
grid-area: foot;
display: flex;
gap: 3px;
color: var(--card-footer-color, var(--fg-700));
font-size: var(--card-footer-font-size, clamp(12px, 2.75cqw, 13px));
line-height: 1;
margin-top: var(--card-footer-margin-top, 1em);
margin-left: var(--this-padding);
margin-right: var(--this-padding);
&-box {
background-color: var(--card-footer-bg-color);
@ -527,6 +534,30 @@
}
}
:where(.cell-title, .cell-footer) {
// margin-top: var(--this-padding);
margin-left: var(--this-padding);
margin-right: var(--this-padding);
}
:where(.cell-meta, .cell-desc, .cell-list, .cell-tax) {
margin-left: var(--this-padding);
margin-right: var(--this-padding);
}
// :where(.cell-desc, .cell-list, .cell-tax):last-child {
// margin-bottom: var(--this-padding);
// }
.cell-img {
// margin-top: var(--this-padding);
margin-left: var(--this-padding);
}
.cell-footer {
// margin-bottom: var(--this-padding);
}
&._story-unpublished {
&::before {
content: attr(data-unavailable);
@ -607,7 +638,7 @@
.cell-img {
grid-area: img;
// Easy to hide in .minimal compared to column-gap!
margin: var(--card-cover-margin, 0 clamp(0.75rem, 3.25cqw, 1.25rem) 0 0);
// margin: var(--card-cover-margin, 0 clamp(0.75rem, 3.25cqw, 1.25rem) 0 0);
width: calc(var(--card-cover-width, 60px) * var(--card-cover-width-mod, 1));
@container (min-width: 450px) {
@ -637,7 +668,7 @@
}
.cell-tax {
grid-area: tax;
grid-area: foot;
margin-top: var(--card-tags-margin-top, 1em);
}
}
@ -647,13 +678,13 @@
grid-template-areas:
'img desc'
'list list'
'tax tax';
'foot foot';
@container (min-width: 560px) {
grid-template-areas:
'img desc'
'img list'
'tax tax';
'foot foot';
}
.cell-img {
@ -678,21 +709,21 @@
'img meta'
'img desc'
'img list'
'tax tax';
'foot foot';
.cell-title {
font-size: var(--card-title-font-size, clamp(15px, 3.065cqw, 18px));
margin: var(--small-card-title-margin, 0 0 .4em);
margin-bottom: var(--small-card-title-margin-bottom, .4em);
}
}
._small {
.cell-title {
margin: var(--small-card-title-margin, 0 0 .5em);
margin-bottom: var(--small-card-title-margin-bottom, .5em);
}
.cell-meta {
margin: var(--small-card-meta-margin, 0 0 .4em);
margin-bottom: var(--small-card-meta-margin-bottom, .4em);
}
.cell-list {
@ -965,3 +996,23 @@
opacity: var(--bookmark-progress-opacity);
}
}
// .card._small:not(._vertical) {
// .card__image {
// margin-top: calc(-1 * var(--this-padding)) !important;
// margin-bottom: calc(-1 * var(--this-padding)) !important;
// margin-left: calc(-1 * var(--this-padding)) !important;
// border-top-right-radius: 0 !important;
// border-bottom-right-radius: 0 !important;
// width: calc((var(--card-cover-width, 60px) + var(--this-padding)) * var(--card-cover-width-mod, 1)) !important;
// }
// ._grid._small {
// grid-template-areas:
// "img title"
// "img meta"
// "img desc"
// "img list"
// "img foot";
// }
// }