Merge pull request #1 from peptiderepo/feature/list-layout
feat: switch article display from grid to list layout
This commit is contained in:
peptiderepo
@@ -75,7 +75,7 @@ class Peptide_News_Public {
|
|||||||
public function render_shortcode( $atts ) {
|
public function render_shortcode( $atts ) {
|
||||||
$atts = shortcode_atts( array(
|
$atts = shortcode_atts( array(
|
||||||
'count' => get_option( 'peptide_news_articles_count', 10 ),
|
'count' => get_option( 'peptide_news_articles_count', 10 ),
|
||||||
'layout' => 'card', // card | compact | list
|
'layout' => 'list', // card | compact | list
|
||||||
), $atts, 'peptide_news' );
|
), $atts, 'peptide_news' );
|
||||||
|
|
||||||
$articles = $this->get_articles( absint( $atts['count'] ) );
|
$articles = $this->get_articles( absint( $atts['count'] ) );
|
||||||
@@ -130,13 +130,14 @@ class Peptide_News_Public {
|
|||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p class="pn-article-excerpt">
|
<?php
|
||||||
<?php
|
// Prefer AI summary over raw excerpt.
|
||||||
// Prefer AI summary over raw excerpt.
|
$display_text = ! empty( $article->ai_summary ) ? $article->ai_summary : ( $article->excerpt ?? '' );
|
||||||
$display_text = ! empty( $article->ai_summary ) ? $article->ai_summary : $article->excerpt;
|
if ( ! empty( $display_text ) ) : ?>
|
||||||
echo esc_html( $display_text );
|
<p class="pn-article-excerpt">
|
||||||
?>
|
<?php echo esc_html( $display_text ); ?>
|
||||||
</p>
|
</p>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if ( ! empty( $article->author ) ) : ?>
|
<?php if ( ! empty( $article->author ) ) : ?>
|
||||||
<span class="pn-author">
|
<span class="pn-author">
|
||||||
|
|||||||
@@ -4,67 +4,212 @@
|
|||||||
* Styles for the front-end display of peptide news articles.
|
* Styles for the front-end display of peptide news articles.
|
||||||
*
|
*
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
|
* @since 1.2.2 Rewritten for list layout with thumbnail left / text right.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Article grid / card layout */
|
/* ── Feed container ────────────────────────────────────────────── */
|
||||||
.peptide-news-container {
|
.pn-news-feed {
|
||||||
display: grid;
|
display: flex;
|
||||||
gap: 1.5rem;
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-card {
|
.pn-no-articles p {
|
||||||
background: #fff;
|
text-align: center;
|
||||||
border: 1px solid #e0e0e0;
|
color: #666;
|
||||||
padding: 1.25rem;
|
padding: 2rem 1rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Individual article row ────────────────────────────────────── */
|
||||||
|
.pn-article {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1.25rem;
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
transition: background-color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-article:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-article:hover {
|
||||||
|
background-color: #fafbfc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Thumbnail (left column, fixed width) ──────────────────────── */
|
||||||
|
.pn-article-thumb {
|
||||||
|
flex: 0 0 160px;
|
||||||
|
width: 160px;
|
||||||
|
min-height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
transition: box-shadow 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-card:hover {
|
.pn-article-thumb a {
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
display: block;
|
||||||
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-title {
|
.pn-article-thumb img {
|
||||||
font-size: 1.125rem;
|
width: 100%;
|
||||||
font-weight: 600;
|
height: 110px;
|
||||||
color: #1a1a1a;
|
object-fit: cover;
|
||||||
margin: 0 0 0.5rem;
|
border-radius: 6px;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-article:hover .pn-article-thumb img {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Content (right column, flexible) ──────────────────────────── */
|
||||||
|
.pn-article-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Meta line (source · date) ─────────────────────────────────── */
|
||||||
|
.pn-article-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #777;
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-title a {
|
.pn-source {
|
||||||
color: inherit;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
color: #555;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
font-size: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-title a:hover {
|
.pn-separator {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-date {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Title ─────────────────────────────────────────────────────── */
|
||||||
|
.pn-article-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0 0 0.4rem;
|
||||||
|
color: #1a1a2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-article-title a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-article-title a:hover {
|
||||||
color: #0073aa;
|
color: #0073aa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-meta {
|
.pn-article-title a:focus,
|
||||||
font-size: 0.8125rem;
|
.pn-article-thumb a:focus {
|
||||||
color: #666;
|
outline: 2px solid #0073aa;
|
||||||
margin-bottom: 0.75rem;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-excerpt {
|
/* ── Excerpt / AI summary ──────────────────────────────────────── */
|
||||||
font-size: 0.9375rem;
|
.pn-article-excerpt {
|
||||||
|
font-size: 0.875rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-source {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
background: #f0f0f0;
|
|
||||||
padding: 0.2rem 0.5rem;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #555;
|
color: #555;
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-thumbnail {
|
/* ── Author ────────────────────────────────────────────────────── */
|
||||||
width: 100%;
|
.pn-author {
|
||||||
height: auto;
|
display: inline-block;
|
||||||
border-radius: 4px;
|
font-size: 0.775rem;
|
||||||
margin-bottom: 0.75rem;
|
color: #888;
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-author::before {
|
||||||
|
content: "By ";
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Tags ──────────────────────────────────────────────────────── */
|
||||||
|
.pn-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.35rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-tag {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
background: #f0f4f8;
|
||||||
|
color: #4a6fa5;
|
||||||
|
padding: 0.15rem 0.55rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Compact layout override (for widgets) ─────────────────────── */
|
||||||
|
.pn-layout-compact .pn-article {
|
||||||
|
gap: 0.85rem;
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-layout-compact .pn-article-thumb {
|
||||||
|
flex: 0 0 80px;
|
||||||
|
width: 80px;
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-layout-compact .pn-article-thumb img {
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-layout-compact .pn-article-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-layout-compact .pn-article-excerpt,
|
||||||
|
.pn-layout-compact .pn-author,
|
||||||
|
.pn-layout-compact .pn-tags {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Responsive: stack on small screens ────────────────────────── */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.pn-article {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-article-thumb {
|
||||||
|
flex: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pn-article-thumb img {
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user