iantrich/list-card

Not so much an issue, but something fun made with your work!

mpelham opened this issue · 0 comments

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:

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;
    }

Output:
2022-04-20 20_37_37-Overview – Home Assistant