Not so much an issue, but something fun made with your work!
mpelham opened this issue · 0 comments
mpelham commented
Reasoning:
I wanted to align the Title / Summary to the right of the image and truncate the text if it got too long (the truncating proved to be a mistep, but bear with me). I started CSS Gridding it out!
This might not be perfect but might be a decent starting point, meh?
Thanks for making a great repo!
Requirements:
- List Card
- FeedParser
- RSS Example (Just an example)
- Card Mod
Sensor Config:
- platform: feedparser
name: NYT News
feed_url: 'https://rss.nytimes.com/services/xml/rss/nyt/US.xml'
date_format: '%a, %d %b %Y %H:%M:%S %Z'
show_topn: 5
scan_interval:
hours: 1
Custom List Card Code:
type: custom:list-card
entity: sensor.nyt_news
title: ''
feed_attribute: entries
row_limit: 3
columns:
- title: ''
type: image
field: media_content
add_link: link
- title: ''
field: title
add_link: link
- title: ''
field: summary
add_link: link
- title: ''
field: published
card_mod:
style: |
ha-card table tbody tr {
display: grid;
grid-column-gap: 0.5rem;
grid-row-gap: 0.2rem;
grid-template-rows: auto 1fr;
grid-template-areas:
"image title"
"image summary"
"image published";
justify-content: start;
}
.media_content {
grid-area: image;
}
.title {
font-size: 0.9rem;
font-weight: 700;
grid-area: title;
line-height: 1rem;
}
.summary {
font-size: 0.8rem;
grid-area: summary;
line-height: 1rem;
}
.published {
font-size: 0.7rem;
grid-area: published;
opacity: 0.5;
}