WIP

changedetectionio/blueprint/watchlist/templates/watch-overview.html

@@ -137,7 +137,11 @@ document.addEventListener('DOMContentLoaded', function() {
                     <a class="ajax-op state-off mute-toggle" data-op="mute" href="{{url_for('watchlist.index', op='mute', uuid=watch.uuid, tag=active_tag_uuid)}}"><img src="{{url_for('static_content', group='images', filename='bell-off.svg')}}" alt="Mute notification" title="Mute notification" class="icon icon-mute" ></a>
                     <a class="ajax-op state-on mute-toggle" data-op="mute"  style="display: none" href="{{url_for('watchlist.index', op='mute', uuid=watch.uuid, tag=active_tag_uuid)}}"><img src="{{url_for('static_content', group='images', filename='bell-off.svg')}}" alt="UnMute notification" title="UnMute notification" class="icon icon-mute" ></a>
                 </td>
-                <td class="title-col inline">{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
+
+                <td class="title-col inline">
+
+                    <img style="display: none;" class="thumbnail" src="{{url_for('static_content', group='thumbnail', filename=watch.uuid)}}">
+                    {{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
                     <a class="external" target="_blank" rel="noopener" href="{{ watch.link.replace('source:','') }}">&nbsp;</a>
                     <a class="link-spread" href="{{url_for('ui.form_share_put_watch', uuid=watch.uuid)}}"><img src="{{url_for('static_content', group='images', filename='spread.svg')}}" class="status-icon icon icon-spread" title="Create a link to share watch config with others" ></a>
 

changedetectionio/static/styles/scss/parts/_lister_extra.scss

@@ -24,9 +24,11 @@
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* soft shadow */
       filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
       object-fit: cover; /* crop/fill if needed */
-      opacity: 0.5;
+      opacity: 0.7;
       height: 100%;
-      max-height: 100%;
+      vertical-align: middle;
+      max-width: 40px;
+      max-height: 60px;
     }
   }
 }

changedetectionio/static/styles/styles.css

@@ -707,9 +707,11 @@ ul#conditions_match_logic {
   filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
   object-fit: cover;
   /* crop/fill if needed */
-  opacity: 0.5;
+  opacity: 0.7;
   height: 100%;
-  max-height: 100%; }
+  vertical-align: middle;
+  max-width: 40px;
+  max-height: 60px; }
 
 .title-col {
   /* Optional, for spacing */