diff --git a/thread/css/style.css b/thread/css/style.css index d0c0652..1f086a8 100644 --- a/thread/css/style.css +++ b/thread/css/style.css @@ -110,6 +110,23 @@ section:hover { color: inherit; } +.cardWrapper, +.cardWrapper:visited { + color: inherit; + overflow: hidden; + display: block; + margin: 2vw; + padding: 1vw; + border-radius: 2vh; + text-decoration: inherit; + background-color: var(--accent-bg); +} + +.cardWrapper:hover, +.cardWrapper:visited:hover { + background-color: var(--bg); +} + #pageFooter { grid-row: 3; } \ No newline at end of file diff --git a/thread/js/main.js b/thread/js/main.js index dc453d2..768e7e3 100644 --- a/thread/js/main.js +++ b/thread/js/main.js @@ -146,6 +146,30 @@ const threadUnroll = { }); } + if (status.card && status.card.image) { + var cardWrapper = document.createElement("a"); + cardWrapper.className = "cardWrapper"; + cardWrapper.href = status.card.url; + + var cardImage = document.createElement("img"); + cardImage.src = status.card.image; + cardWrapper.appendChild(cardImage); + + var cardImageSubline = document.createElement("p"); + cardImageSubline.innerHTML = status.card.provider_name + " - " + new Date(status.card.published_at).toLocaleString();; + cardWrapper.appendChild(cardImageSubline); + + var cardHeadline = document.createElement("h4"); + cardHeadline.innerHTML = status.card.title; + cardWrapper.appendChild(cardHeadline); + + var cardAutor = document.createElement("p"); + cardAutor.innerHTML = status.card.author_name; + cardWrapper.appendChild(cardAutor); + + statusBox.appendChild(cardWrapper); + } + mb.appendChild(statusBoxWrapper); postCnt++; }