Skip to content

Commit 665b1e6

Browse files
committed
misc tweaks for thumbnail
1 parent ba102ed commit 665b1e6

File tree

5 files changed

+59
-57
lines changed

5 files changed

+59
-57
lines changed

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

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@
112112
{% if watch.uuid in queued_uuids %}queued{% endif %}
113113
{% if checking_now %}checking-now{% endif %}
114114
{% if watch.notification_muted %}notification_muted{% endif %}
115+
{% if watch.get_screenshot() %}has-thumbnail{% endif %}
115116
">
116117
<td class="inline checkbox-uuid" ><input name="uuids" type="checkbox" value="{{ watch.uuid}} " > <span>{{ loop.index+pagination.skip }}</span></td>
117118
<td class="inline watch-controls">
@@ -121,26 +122,24 @@
121122
<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>
122123
<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>
123124
</td>
124-
<td class="title-col inline">{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
125-
<a class="external" target="_blank" rel="noopener" href="{{ watch.link.replace('source:','') }}"></a>
126-
<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>
127-
128-
{% if watch.get_screenshot() %}
129-
<img class="thumbnail" src="{{url_for('static_content', group='thumbnail', filename=watch.uuid)}}" alt="thumbnail screenshot" title="thumbnail screenshot" >
130-
{% endif %}
131-
132-
{% if watch.get_fetch_backend == "html_webdriver"
133-
or ( watch.get_fetch_backend == "system" and system_default_fetcher == 'html_webdriver' )
134-
or "extra_browser_" in watch.get_fetch_backend
135-
%}
136-
<img class="status-icon" src="{{url_for('static_content', group='images', filename='google-chrome-icon.png')}}" alt="Using a Chrome browser" title="Using a Chrome browser" >
137-
{% endif %}
138-
139-
{% if watch.is_pdf %}<img class="status-icon" src="{{url_for('static_content', group='images', filename='pdf-icon.svg')}}" alt="Converting PDF to text" >{% endif %}
140-
{% if watch.has_browser_steps %}<img class="status-icon status-browsersteps" src="{{url_for('static_content', group='images', filename='steps.svg')}}" alt="Browser Steps is enabled" >{% endif %}
125+
<td class="title-col inline">
126+
127+
<div class="title-col-inner">
128+
<img style="display: none" class="thumbnail" {% if watch.get_screenshot() %} src="{{url_for('static_content', group='thumbnail', filename=watch.uuid)}}"{% endif %} alt="thumbnail screenshot" title="thumbnail screenshot" >
129+
{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
130+
<a class="external" target="_blank" rel="noopener" href="{{ watch.link.replace('source:','') }}"></a>
131+
<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>
132+
{% if watch.get_fetch_backend == "html_webdriver"
133+
or ( watch.get_fetch_backend == "system" and system_default_fetcher == 'html_webdriver' )
134+
or "extra_browser_" in watch.get_fetch_backend
135+
%}
136+
<img class="status-icon" src="{{url_for('static_content', group='images', filename='google-chrome-icon.png')}}" alt="Using a Chrome browser" title="Using a Chrome browser" >
137+
{% endif %}
138+
{% if watch.is_pdf %}<img class="status-icon" src="{{url_for('static_content', group='images', filename='pdf-icon.svg')}}" alt="Converting PDF to text" >{% endif %}
139+
{% if watch.has_browser_steps %}<img class="status-icon status-browsersteps" src="{{url_for('static_content', group='images', filename='steps.svg')}}" alt="Browser Steps is enabled" >{% endif %}
140+
</div>
141141

142142
<div class="error-text" style="display:none;">{{ watch.compile_error_texts(has_proxies=datastore.proxy_list)|safe }}</div>
143-
144143
{% if watch['processor'] == 'text_json_diff' %}
145144
{% if watch['has_ldjson_price_data'] and not watch['track_ldjson_price_data'] %}
146145
<div class="ldjson-price-track-offer">Switch to Restock & Price watch mode? <a href="{{url_for('price_data_follower.accept', uuid=watch.uuid)}}" class="pure-button button-xsmall">Yes</a> <a href="{{url_for('price_data_follower.reject', uuid=watch.uuid)}}" class="">No</a></div>

changedetectionio/realtime/socket_server.py

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -145,19 +145,20 @@ def handle_watch_update(socketio, **kwargs):
145145
# Create a simplified watch data object to send to clients
146146
watch_data = {
147147
'checking_now': True if watch.get('uuid') in running_uuids else False,
148+
'error_text': error_texts,
149+
'event_timestamp': time.time(),
148150
'fetch_time': watch.get('fetch_time'),
149151
'has_error': True if error_texts else False,
150152
'last_changed': watch.get('last_changed'),
153+
'last_changed_text': timeago.format(int(watch['last_changed']), time.time()) if watch.history_n >= 2 and int(watch.get('last_changed', 0)) > 0 else 'Not yet',
151154
'last_checked': watch.get('last_checked'),
152-
'error_text': error_texts,
153155
'last_checked_text': _jinja2_filter_datetime(watch),
154-
'last_changed_text': timeago.format(int(watch['last_changed']), time.time()) if watch.history_n >= 2 and int(watch.get('last_changed', 0)) > 0 else 'Not yet',
155-
'queued': True if watch.get('uuid') in queue_list else False,
156-
'paused': True if watch.get('paused') else False,
157156
'notification_muted': True if watch.get('notification_muted') else False,
157+
'paused': True if watch.get('paused') else False,
158+
'queued': True if watch.get('uuid') in queue_list else False,
158159
'unviewed': watch.has_unviewed,
160+
'thumbnail': watch.get_screenshot_as_thumbnail,
159161
'uuid': watch.get('uuid'),
160-
'event_timestamp': time.time()
161162
}
162163

163164
errored_count =0

changedetectionio/static/js/realtime.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,10 @@ $(document).ready(function () {
8787
$($watchRow).toggleClass('has-error', watch.has_error);
8888
$($watchRow).toggleClass('notification_muted', watch.notification_muted);
8989
$($watchRow).toggleClass('paused', watch.paused);
90+
$($watchRow).toggleClass('has-thumbnail', watch.thumbnail !== undefined);
9091

9192
$('td.title-col .error-text', $watchRow).html(watch.error_text)
93+
$('img.thumbnail', $watchRow).attr('src', watch.thumbnail);
9294

9395
$('td.last-changed', $watchRow).text(watch.last_checked_text)
9496

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
.watch-table {
22

3-
43
td,
54
th {
65
vertical-align: middle;
76

87
}
9-
10-
td.inline.title-col {
11-
display: flex;
12-
align-items: center;
13-
gap: 0.5em;
14-
flex-wrap: wrap;
15-
16-
* {
17-
display: inline-block;
8+
tr.has-thumbnail {
9+
img.thumbnail {
10+
display: inline-block !important;
1811
}
19-
12+
}
13+
td.title-col {
14+
.title-col-inner >*{
15+
vertical-align: middle;
16+
}
17+
}
18+
td.inline.title-col {
2019
img.thumbnail {
21-
width: 32px;
20+
width: 50px;
2221
object-fit: cover; /* crop/fill if needed */
23-
border-radius: 8px; /* subtle rounded corners */
22+
border-radius: 4px; /* subtle rounded corners */
23+
padding: 4px;
2424
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* soft shadow */
2525
border: 1px solid #ddd; /* light border for contrast */
2626
filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
2727
background-color: #fff; /* fallback bg for SVGs without bg */
2828
}
2929
}
30-
}
30+
}

changedetectionio/static/styles/styles.css

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -684,26 +684,26 @@ ul#conditions_match_logic {
684684
.watch-table th {
685685
vertical-align: middle; }
686686

687-
.watch-table td.inline.title-col {
688-
display: flex;
689-
align-items: center;
690-
gap: 0.5em;
691-
flex-wrap: wrap; }
692-
.watch-table td.inline.title-col * {
693-
display: inline-block; }
694-
.watch-table td.inline.title-col img.thumbnail {
695-
width: 32px;
696-
object-fit: cover;
697-
/* crop/fill if needed */
698-
border-radius: 8px;
699-
/* subtle rounded corners */
700-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
701-
/* soft shadow */
702-
border: 1px solid #ddd;
703-
/* light border for contrast */
704-
filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
705-
background-color: #fff;
706-
/* fallback bg for SVGs without bg */ }
687+
.watch-table tr.has-thumbnail img.thumbnail {
688+
display: inline-block !important; }
689+
690+
.watch-table td.title-col .title-col-inner > * {
691+
vertical-align: middle; }
692+
693+
.watch-table td.inline.title-col img.thumbnail {
694+
width: 50px;
695+
object-fit: cover;
696+
/* crop/fill if needed */
697+
border-radius: 4px;
698+
/* subtle rounded corners */
699+
padding: 4px;
700+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
701+
/* soft shadow */
702+
border: 1px solid #ddd;
703+
/* light border for contrast */
704+
filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
705+
background-color: #fff;
706+
/* fallback bg for SVGs without bg */ }
707707

708708
body.checking-now #checking-now-fixed-tab {
709709
display: block !important; }

0 commit comments

Comments
 (0)