separate information into multiple main-containers

financeplanner/templates/financeplanner/index.html

@@ -19,6 +19,7 @@
 
 <div class="main-container flex-col-centering">
     {% if graph_data %}
+        <p>Data from {{ range_start }} til {{ range_end }}:</p>
         <div id="graph">
             {% for date, stat in graph_data.items %}
                 {% if stat.div_percentage is None %}
@@ -34,14 +35,12 @@
             {% endfor %}
         </div>
     {% else %}
-        <p>No graph data available.</p>
+        <p>No data available from {{ range_start }} til {{ range_end }}.</p>
     {% endif %}
 </div>
 
 <div class="main-container">
-    <p>Showing data from {{ range_start }} til {{ range_end }}:</p>
-
-    <p>Balances:</p>
+    <p>relevant balances:</p>
 
     {% if balance_list %}
         <ul>
@@ -50,10 +49,12 @@
             {% endfor %}
         </ul>
     {% else %}
-        <p>No balances available.</p>
+        <p>-</p>
     {% endif %}
+</div>
 
-    <p>Transactions:</p>
+<div class="main-container">
+    <p>relevant stored transactions:</p>
 
     {% if transaction_list %}
         <ul>
@@ -62,10 +63,12 @@
             {% endfor %}
         </ul>
     {% else %}
-        <p>No transactions available.</p>
+        <p>-</p>
     {% endif %}
+</div>
 
-    <p>Calculated Transactions:</p>
+<div class="main-container">
+    <p>calculated actual transactions:</p>
 
     {% if actual_transactions %}
         <ul>
@@ -74,7 +77,7 @@
             {% endfor %}
         </ul>
     {% else %}
-        <p>No calculated transactions available.</p>
+        <p>-</p>
     {% endif %}
 </div>