Skip to content

Commit b8cbf9d

Browse files
dgtlmoondgtlmoon
committed
layout tweaks
1 parent cc82b86 commit b8cbf9d

File tree

4 files changed

+62
-34
lines changed

4 files changed

+62
-34
lines changed

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

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -123,19 +123,27 @@
123123
<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>
124124
</td>
125125
<td class="title-col inline">
126-
<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" >
127-
<div class="title-col-inner">
128-
{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
129-
<a class="external" target="_blank" rel="noopener" href="{{ watch.link.replace('source:','') }}"></a>
130-
<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>
131-
{% if watch.get_fetch_backend == "html_webdriver"
132-
or ( watch.get_fetch_backend == "system" and system_default_fetcher == 'html_webdriver' )
133-
or "extra_browser_" in watch.get_fetch_backend
134-
%}
135-
<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" >
136-
{% endif %}
137-
{% 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 %}
138-
{% 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 %}
126+
<div class="title-wrapper">
127+
<span style="height: 52px;">
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+
</span>
130+
131+
<div class="title-col-inner">
132+
{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
133+
<a class="external" target="_blank" rel="noopener" href="{{ watch.link.replace('source:','') }}"></a>
134+
<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>
135+
{% if watch.get_fetch_backend == "html_webdriver"
136+
or ( watch.get_fetch_backend == "system" and system_default_fetcher == 'html_webdriver' )
137+
or "extra_browser_" in watch.get_fetch_backend
138+
%}
139+
<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" >
140+
{% endif %}
141+
{% 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 %}
142+
{% 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 %}
143+
</div>
144+
{% for watch_tag_uuid, watch_tag in datastore.get_all_tags_for_watch(watch['uuid']).items() %}
145+
<span class="watch-tag-list">{{ watch_tag.title }}</span>
146+
{% endfor %}
139147
</div>
140148

141149
<div class="error-text" style="display:none;">{{ watch.compile_error_texts(has_proxies=datastore.proxy_list)|safe }}</div>
@@ -147,9 +155,7 @@
147155
{% if watch['processor'] == 'restock_diff' %}
148156
<span class="tracking-ldjson-price-data" title="Automatically following embedded price information"><img src="{{url_for('static_content', group='images', filename='price-tag-icon.svg')}}" class="status-icon price-follow-tag-icon" > Price</span>
149157
{% endif %}
150-
{% for watch_tag_uuid, watch_tag in datastore.get_all_tags_for_watch(watch['uuid']).items() %}
151-
<span class="watch-tag-list">{{ watch_tag.title }}</span>
152-
{% endfor %}
158+
153159
</td>
154160
<!-- @todo make it so any watch handler obj can expose this --->
155161
{% if any_has_restock_price_processor %}

‎changedetectionio/model/Watch.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -465,7 +465,7 @@ def get_screenshot_as_thumbnail(self, max_age=3200):
465465
img = img.crop((left, 0, left + square_size, square_size))
466466

467467
# Final resize to exact thumbnail size with better filter
468-
img = img.resize((150, 150), Image.BILINEAR)
468+
img = img.resize((350, 350), Image.BILINEAR)
469469

470470
# Save with optimized settings
471471
img.save(thumbnail_path, "JPEG", quality=75, optimize=True)

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

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,36 @@
1515
}
1616
}
1717
}
18-
td.title-col {
19-
.title-col-inner {
20-
display: inline-block;
21-
* {
22-
vertical-align: middle;
23-
}
24-
}
25-
}
18+
2619
td.inline.title-col {
2720
img.thumbnail {
2821
background-color: #fff; /* fallback bg for SVGs without bg */
2922
border-radius: 4px; /* subtle rounded corners */
3023
border: 1px solid #ddd; /* light border for contrast */
3124
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* soft shadow */
3225
filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
33-
margin-right: 1rem;
3426
object-fit: cover; /* crop/fill if needed */
3527
opacity: 0.5;
36-
width: 50px;
28+
height: 100%;
29+
max-height: 100%;
3730
}
3831
}
3932
}
33+
34+
35+
.title-col {
36+
/* Optional, for spacing */
37+
padding: 10px;
38+
}
39+
40+
.title-wrapper {
41+
display: flex;
42+
align-items: center; /* Vertical centering */
43+
gap: 10px; /* Space between image and text */
44+
}
45+
46+
/* Make sure .title-col-inner doesn't collapse or misalign */
47+
.title-col-inner {
48+
display: inline-block;
49+
vertical-align: middle;
50+
}

‎changedetectionio/static/styles/styles.css

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -690,11 +690,6 @@ ul#conditions_match_logic {
690690
.watch-table tr.has-thumbnail.unviewed img.thumbnail {
691691
opacity: 1.0 !important; }
692692

693-
.watch-table td.title-col .title-col-inner {
694-
display: inline-block; }
695-
.watch-table td.title-col .title-col-inner * {
696-
vertical-align: middle; }
697-
698693
.watch-table td.inline.title-col img.thumbnail {
699694
background-color: #fff;
700695
/* fallback bg for SVGs without bg */
@@ -705,11 +700,27 @@ ul#conditions_match_logic {
705700
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
706701
/* soft shadow */
707702
filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
708-
margin-right: 1rem;
709703
object-fit: cover;
710704
/* crop/fill if needed */
711705
opacity: 0.5;
712-
width: 50px; }
706+
height: 100%;
707+
max-height: 100%; }
708+
709+
.title-col {
710+
/* Optional, for spacing */
711+
padding: 10px; }
712+
713+
.title-wrapper {
714+
display: flex;
715+
align-items: center;
716+
/* Vertical centering */
717+
gap: 10px;
718+
/* Space between image and text */ }
719+
720+
/* Make sure .title-col-inner doesn't collapse or misalign */
721+
.title-col-inner {
722+
display: inline-block;
723+
vertical-align: middle; }
713724

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

0 commit comments

Comments
 (0)