UI tweaks

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

@@ -181,7 +181,7 @@ window.watchOverviewI18n = {
             <tr>
                 {%- set link_order = "desc" if sort_order  == 'asc' else "asc" -%}
                 {%- set arrow_span = "" -%}
-                <th><input style="vertical-align: middle" type="checkbox" id="check-all" > <a class="{{ 'active '+link_order if sort_attribute == 'date_created' else 'inactive' }}"  href="{{url_for('watchlist.index', sort='date_created', order=link_order, tag=active_tag_uuid)}}"># <span class='arrow {{link_order}}'></span></a></th>
+                <th style="white-space: nowrap;"><input style="vertical-align: middle" type="checkbox" id="check-all" > <a class="{{ 'active '+link_order if sort_attribute == 'date_created' else 'inactive' }}"  href="{{url_for('watchlist.index', sort='date_created', order=link_order, tag=active_tag_uuid)}}"># <span class='arrow {{link_order}}'></span></a></th>
                 <th id="mute-pause">
                     <div>
                         <a class="{{ 'active '+link_order if sort_attribute == 'paused' else 'inactive' }}" href="{{url_for('watchlist.index', sort='paused', order=link_order, tag=active_tag_uuid)}}"><i data-feather="pause" style="vertical-align: bottom; width: 16px; height: 16px;"></i><span class='arrow {{link_order}}'></span></a>
@@ -192,8 +192,8 @@ window.watchOverviewI18n = {
              {%- if any_has_restock_price_processor -%}
                 <th>{{ _('Restock & Price') }}</th>
              {%- endif -%}
-                <th><a class="{{ 'active '+link_order if sort_attribute == 'last_checked' else 'inactive' }}" href="{{url_for('watchlist.index', sort='last_checked', order=link_order, tag=active_tag_uuid)}}"><span class="hide-on-mobile">{{ _('Last Checked') }}</span><span class="hide-on-desktop">{{ _('Checked') }}</span> <span class='arrow {{link_order}}'></span></a></th>
-                <th><a class="{{ 'active '+link_order if sort_attribute == 'last_changed' else 'inactive' }}" href="{{url_for('watchlist.index', sort='last_changed', order=link_order, tag=active_tag_uuid)}}"><span class="hide-on-mobile">{{ _('Last Changed') }}</span><span class="hide-on-desktop">{{ _('Changed') }}</span> <span class='arrow {{link_order}}'></span></a></th>
+                <th id="h-lastchecked"><a class="{{ 'active '+link_order if sort_attribute == 'last_checked' else 'inactive' }}" href="{{url_for('watchlist.index', sort='last_checked', order=link_order, tag=active_tag_uuid)}}"><span class="hide-on-mobile">{{ _('Last Checked') }}</span><span class="hide-on-desktop">{{ _('Checked') }}</span> <span class='arrow {{link_order}}'></span></a></th>
+                <th id="h-lastchanged"><a class="{{ 'active '+link_order if sort_attribute == 'last_changed' else 'inactive' }}" href="{{url_for('watchlist.index', sort='last_changed', order=link_order, tag=active_tag_uuid)}}"><span class="hide-on-mobile">{{ _('Last Changed') }}</span><span class="hide-on-desktop">{{ _('Changed') }}</span> <span class='arrow {{link_order}}'></span></a></th>
                 <th class="empty-cell"></th>
             </tr>
             </thead>
@@ -267,6 +267,10 @@ window.watchOverviewI18n = {
                                 {% endif %}
                                <a class="external" target="_blank" rel="noopener" href="{{ watch.link.replace('source:','') }}">&nbsp;</a>
                             </span>
+
+                            {%- for watch_tag_uuid, watch_tag in datastore.get_all_tags_for_watch(watch['uuid']).items() -%}
+                              <a href="{{url_for('watchlist.index', tag=watch_tag_uuid) }}" class="watch-tag-list tag-{{ watch_tag.title|sanitize_tag_class }}">{{ watch_tag.title }}</a>
+                            {%- endfor -%}
                             <div class="error-text" style="display:none;">{{ error_texts|safe }}</div>
                             {%- if watch['processor'] == 'text_json_diff'  -%}
                                 {%- if watch['has_ldjson_price_data'] and not watch['track_ldjson_price_data']  -%}
@@ -274,9 +278,6 @@ window.watchOverviewI18n = {
                                 {%- endif -%}
                             {%- endif -%}
 
-                            {%- for watch_tag_uuid, watch_tag in datastore.get_all_tags_for_watch(watch['uuid']).items() -%}
-                              <a href="{{url_for('watchlist.index', tag=watch_tag_uuid) }}" class="watch-tag-list tag-{{ watch_tag.title|sanitize_tag_class }}">{{ watch_tag.title }}</a>
-                            {%- endfor -%}
                         </div>
                     <div class="status-icons">
                             <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>
@@ -286,7 +287,6 @@ window.watchOverviewI18n = {
                             {%- endif -%}
                             {%- 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 -%}
                             {%- 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 -%}
-
                     </div>
 
                     <div class="restock-info-wrap">

changedetectionio/static/styles/scss/parts/_watch_table.scss

@@ -44,6 +44,10 @@ body.has-queue {
 
   td {
     padding: $table-cell-padding;
+    &.buttons {
+      font-size: 12px;
+      white-space: nowrap;
+    }
     &.title-col {
       word-break: break-all;
       white-space: normal;
@@ -51,6 +55,11 @@ body.has-queue {
         margin-left: auto;
       }
     }
+
+    &.last-changed,&.last-checked {
+      text-align: center;
+    }
+
     a.external::after {
       content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
       margin: 0 3px 0 5px;
@@ -66,9 +75,10 @@ body.has-queue {
 
 
   th {
-    white-space: nowrap;
     padding: $table-cell-padding;
-
+    &#h-lastchanged, &#h-lastchecked {
+      text-align: center;
+    }
     a {
       font-weight: normal;
 
@@ -82,7 +92,8 @@ body.has-queue {
         }
       }
     }
-    #mute-pause {
+    &#mute-pause {
+      white-space: nowrap;
       > div {
         display: flex;
         justify-content: space-between;
@@ -154,10 +165,9 @@ body.has-queue {
 
 
   tr.has-error {
-    color: var(--color-watch-table-error);
-
     .error-text {
       display: block !important;
+      color: var(--color-watch-table-error);
     }
   }
 

changedetectionio/templates/base.html

@@ -66,12 +66,6 @@
         {% if current_diff_url and is_safe_valid_url(current_diff_url) %}
           <a class="current-diff-url" href="{{ current_diff_url }}">
             <span style="max-width: 30%; overflow: hidden">{{ current_diff_url }}</span></a>
-        {% else %}
-          {% if new_version_available and not(has_password and not current_user.is_authenticated) %}
-            <span id="new-version-text" class="pure-menu-heading">
-              <a href="https://changedetection.io">{{ _('A new version is available') }}</a>
-            </span>
-          {% endif %}
         {% endif %}
 
         <ul class="pure-menu-list" id="top-right-menu">

changedetectionio/templates/sidebar-nav.html

@@ -131,4 +131,13 @@
           <div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div>
         {% endif %}
     </li>
+
+      {% if new_version_available and not(has_password and not current_user.is_authenticated) %}
+      <li class="action-sidebar-li">
+        <span id="new-version-text">
+          <a href="https://changedetection.io">{{ _('A new version is available') }}</a>
+        </span>
+      </li>
+      {% endif %}
+
 </ul>