Re #118 - Make 'show current version' more obvious

backend/__init__.py

@@ -612,7 +612,8 @@ def changedetection_app(config=None, datastore_o=None):
                                  newest_version_timestamp=dates[0],
                                  current_previous_version=str(previous_version),
                                  current_diff_url=watch['url'],
-                                 extra_title=" - Diff - {}".format(watch['title'] if watch['title'] else watch['url']))
+                                 extra_title=" - Diff - {}".format(watch['title'] if watch['title'] else watch['url']),
+                                 left_sticky= True )
 
         return output
 

backend/static/styles/styles.css

@@ -184,7 +184,7 @@ body:after, body:before {
 #diff-jump {
   position: fixed;
   left: 0px;
-  top: 80px;
+  top: 120px;
   background: #fff;
   padding: 10px;
   border-top-right-radius: 5px;
@@ -209,13 +209,16 @@ footer {
 #feed-icon {
   vertical-align: middle; }
 
-#version {
+.sticky-tab {
   position: absolute;
   top: 80px;
-  right: 0px;
   font-size: 8px;
   background: #fff;
   padding: 10px; }
+  .sticky-tab#left-sticky {
+    left: 0px; }
+  .sticky-tab#right-sticky {
+    right: 0px; }
 
 #new-version-text a {
   color: #e07171; }

backend/static/styles/styles.scss

@@ -246,7 +246,7 @@ body:after, body:before {
 #diff-jump {
   position: fixed;
   left: 0px;
-  top: 80px;
+  top: 120px;
   background: #fff;
   padding: 10px;
   border-top-right-radius: 5px;
@@ -275,13 +275,18 @@ footer {
   vertical-align: middle;
 }
 
-#version {
+.sticky-tab {
   position: absolute;
   top: 80px;
-  right: 0px;
   font-size: 8px;
   background: #fff;
   padding: 10px;
+  &#left-sticky {
+    left: 0px;
+  }
+  &#right-sticky {
+    right: 0px;
+  }
 }
 
 #new-version-text a {

backend/templates/base.html

@@ -68,7 +68,9 @@
         </ul>
     </div>
 </div>
-<div id="version">v{{ version }}</div>
+
+{% if left_sticky %}<div class="sticky-tab" id="left-sticky"><a href="{{url_for('preview_page', uuid=uuid)}}">Show current snapshot</a></div> {% endif %}
+{% if right_sticky %}<div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div> {% endif %}
 <section class="content">
     <header>
         {% block header %}{% endblock %}

backend/templates/diff.html

@@ -30,7 +30,6 @@
     </form>
     <del>Removed text</del>
     <ins>Inserted Text</ins>
-    <a href="{{ url_for('preview_page', uuid=uuid) }}">Show current snapshot</a>
 </div>
 
 <div id="diff-jump">