improvement: refonte page articles
This commit is contained in:
parent
6f5b37029d
commit
05848519af
5 changed files with 74 additions and 11 deletions
|
@ -1,19 +1,22 @@
|
|||
<?php include(TEMPLATEPATH . '/components/article/breadcrumb.php'); ?>
|
||||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/article/flags.php'); ?>
|
||||
|
||||
<article class="article container-article" id="post-<?php the_ID(); ?>">
|
||||
<article class="article container-article mb-1" id="post-<?php the_ID(); ?>">
|
||||
<?php if ($haveTitle) { ?>
|
||||
<h1 class="page-title"><?php the_title(); ?></h1>
|
||||
<?php } ?>
|
||||
|
||||
<div class="thumbnail mb-half" aria-hidden="true">
|
||||
<?php the_post_thumbnail( ); ?>
|
||||
</div>
|
||||
|
||||
<div class="article-entry">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="card card-noheader">
|
||||
<section class="card card-noheader article-meta">
|
||||
<div class="author-area">
|
||||
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
|
||||
<div class="author-metadata">
|
||||
|
@ -22,14 +25,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/article/description.php'); ?>
|
||||
|
||||
<div class="article-category">
|
||||
<?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php comments_template(); ?>
|
||||
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
|
|
|
@ -2,18 +2,18 @@
|
|||
if (has_category('chapters')) {
|
||||
$romans = get_the_terms($post->ID, 'roman');
|
||||
foreach( $romans as $roman ) {
|
||||
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-book'></i> " . $roman->name . "</a>";
|
||||
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-book'></i> " . $roman->name . "</a>";
|
||||
}
|
||||
} else {
|
||||
$categories = get_the_category();
|
||||
foreach( $categories as $category ) {
|
||||
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
|
||||
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
|
||||
}
|
||||
}
|
||||
$tags = get_the_tags();
|
||||
if ($tags) {
|
||||
foreach( $tags as $tag ) {
|
||||
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-secondary'><i class='fa fa-tag'></i> " . $tag->name . "</a> ";
|
||||
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary'><i class='fa fa-tag'></i> " . $tag->name . "</a> ";
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
|
@ -4,3 +4,4 @@
|
|||
|
||||
@import 'custom/global';
|
||||
@import 'custom/previews';
|
||||
@import 'custom/article';
|
37
scss/custom/_article.scss
Normal file
37
scss/custom/_article.scss
Normal file
|
@ -0,0 +1,37 @@
|
|||
.article {
|
||||
img {
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width:100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: $card-radius;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
.author-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $lineheight / 2;
|
||||
|
||||
img {
|
||||
border-radius: 9999px;
|
||||
width: $lineheight * 3;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
margin-right: $lineheight / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.article-category {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-bottom: $lineheight / 4;
|
||||
}
|
||||
}
|
||||
}
|
26
style.css
26
style.css
|
@ -2775,3 +2775,29 @@ footer {
|
|||
font-size: 0.8rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgba(33, 37, 41, 0.8); }
|
||||
|
||||
.article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: auto; }
|
||||
|
||||
.article .thumbnail img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 8px;
|
||||
object-fit: cover; }
|
||||
|
||||
.article-meta .author-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.8rem; }
|
||||
.article-meta .author-area img {
|
||||
border-radius: 9999px;
|
||||
width: 4.8rem;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
margin-right: 0.8rem; }
|
||||
|
||||
.article-meta .article-category .badge {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.4rem; }
|
||||
|
|
Reference in a new issue