Make the summary previews "sticky" when scrolling.

Closes #48

Author: MaybeJustJames

server/static/styles.css

@@ -133,6 +133,9 @@ span.marked {
     margin-bottom: 2rem;
     padding-left: 3rem;
     padding-right: 3rem;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
 }
 
 .ttfd-bottom-nav {
@@ -152,8 +155,8 @@ span.marked {
     align-items: center;
     gap: 5px;
     position: absolute;
-    left: 20px;
-    top: 170px;
+    left: 0;
+    top: 1rem;
 }
 
 .ttfd-button {

server/templates/_base.html

@@ -82,6 +82,7 @@
       {% if ttfd.maintenance_mode %}
       <div class="ttfd-warning" role="alert">The application is in maintenance mode.</div>
       {% else %}
+      {% include "_summary.html" %}
       <div class="ttfd-main-app" id="ttfd-main-app">
         {% block main required %}
         {% endblock %}

server/templates/atoms-view.html

@@ -1,5 +1,4 @@
 {% from "_stepper.html" import stepper %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 <div class="flex-center ttfd-metabolite-container">
   {{ image | safe }}

server/templates/empty.html

@@ -2,7 +2,6 @@
 {% extends "_base.html" %}
 {% set step = step %}
 {% block main %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 
 <p>{{ message }}</p>

server/templates/gauge.html

@@ -1,7 +1,6 @@
 {% from "_stepper.html" import stepper %}
 {% extends "_base.html" %}
 {% block main %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 <ul class="ttfd-grid">
 {% for gauge in gauges %}

server/templates/index.html

@@ -1,7 +1,6 @@
 {% from "_stepper.html" import stepper %}
 {% extends "_base.html" %}
 {% block main %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 <ul class="ttfd-grid">
 {% for tracer in tracers %}

server/templates/list.html

@@ -3,8 +3,6 @@
 {% set step = step %}
 {% block main %}
 
-{% include '_summary.html' %}
-
 {{ stepper(current=step.current, history=step.history) }}
 
 <div class="ttfd-list">

server/templates/results.html

@@ -1,7 +1,6 @@
 {% from "_stepper.html" import stepper %}
 {% extends "_base.html" %}
 {% block main %}
-{% include "_summary.html" %}
 {{ stepper(current=step.current, history=step.history) }}
 
 <div class="ttfd-results-container">

server/templates/table.html

@@ -25,7 +25,5 @@
   {% endfor %}
 </div>
 
-{% include '_summary.html' %}
-
 {% include '_bottom_nav_buttons.html' %}
 {% endblock %}