diff --git a/screenshot-thumbnail.jpg b/screenshot-thumbnail.jpg index d06cc3099be34b0bdb29808b5951cbcbeb717ddc..bd586fbd5cb4120680e3bc54961d8fdc336caa25 100644 Binary files a/screenshot-thumbnail.jpg and b/screenshot-thumbnail.jpg differ diff --git a/screenshot.png b/screenshot.png index b84c38d55f00b5116d0f6417b640c24dc3f29267..4de38dc1a09ff14993369e2024ce01149fb7f6b9 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/src/components/Table.vue b/src/components/Table.vue index c3ec3b4073a1a73238c559fb2c5b071abfa8d19b..5d25f985c21e1b91f8a652756016ce2b1c132bc8 100644 --- a/src/components/Table.vue +++ b/src/components/Table.vue @@ -49,7 +49,7 @@ <td class="nameColumn" @click="changeRoute(`/browse/show/${episode.podcast_id}/${episode.id}`)"> - <i-amp-video-eq> + <eq-animation> <div class="-amp-video-eq-col"> <div class="-amp-video-eq-1-1" /> <div class="-amp-video-eq-1-2" /> @@ -66,7 +66,7 @@ <div class="-amp-video-eq-4-1" /> <div class="-amp-video-eq-4-2" /> </div> - </i-amp-video-eq> + </eq-animation> <b>{{ episode.title }}</b> <vue-show-more-text :text="escapedEpisodeDescription(episode.description)" @@ -243,9 +243,13 @@ table.episodeTable { padding-right: 0px; padding-left: 35px; - div { + .episodeImage { width: 74px; height: 74px; + background: #ccc; + background-size: cover; + background-position: center; + transition: background-image 0.2s ease-in-out; } } @@ -305,7 +309,7 @@ table.episodeTable { } } -i-amp-video-eq { +eq-animation { align-items: flex-end; display: none; width: 20px; @@ -318,14 +322,14 @@ i-amp-video-eq { margin-right: 5px; } -i-amp-video-eq .-amp-video-eq-col { +eq-animation .-amp-video-eq-col { flex: 1; position: relative; height: 100%; margin-right: 1px; } -i-amp-video-eq .-amp-video-eq-col div { +eq-animation .-amp-video-eq-col div { animation-name: amp-video-eq-animation; animation-timing-function: linear; animation-iteration-count: infinite; @@ -379,7 +383,7 @@ i-amp-video-eq .-amp-video-eq-col div { } } -table.episodeTable tr.selected i-amp-video-eq { +table.episodeTable tr.selected eq-animation { display: flex; } </style>