Horizontal scroll for heatmap

aceberg · Jan 22, 2024 · 55dced7 · 55dced7
1 parent 81d6375
commit 55dced7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [0.1.5] - 2024-01-
+### Added
+- Horizontal scroll for heatmap on mobile
+- Heatmap and weight in two different cards
+
 ## [0.1.4] - 2024-01-22
 ### Added
 - Statistics page

diff --git a/internal/web/public/css/index.css b/internal/web/public/css/index.css
@@ -28,4 +28,10 @@
 }
 .del-set-button:hover {
     background-color: #0000001a;
+}
+
+@media (max-width: 1399px) {
+    .horiz-scroll {
+        overflow-x: scroll;
+    }
 }
diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html
@@ -40,35 +40,37 @@ <h5 class="modal-title">Add weight</h5>
 </div>
 <!-- End Modal -->
 <div class="container-lg">
-    <div class="row">
-      <div class="col-md">
-        <div class="card border-primary">
-          <div class="card-body">
-          <!-- <div class="hstack gap-2"> -->
-          <div class="row justify-content-evenly">
+  <div class="row">
+    <div class="col-md-8">
+      <div class="card border-primary">
+        <div class="card-body">
+          <div class="horiz-scroll">
+              <div style="max-height: 100px; width: 1150px;">
+                  <canvas id="matrix-chart" style="height: 100%; width: 100%;"></canvas>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="card border-primary">
+        <div class="card-body" style="overflow-x: scroll;">
+          <div class="d-flex justify-content-evenly">
             <div class="col-md-8">
-              <!-- <div class="chart-container" style="max-width: fit-content;">
-                  <canvas id="matrix-chart" style="max-height: 100px; width: 760px;"></canvas>
-              </div> -->
-            <div id="matrix-container" class="chart-container" style="max-height: 100px; width: 1150px;overflow-x: scroll;">
-                <canvas id="matrix-chart" style="height: 100%; width: 100%;"></canvas>
-            </div>
-            </div>
-            <div class="col-md-3">
               <div class="chart-container" style="max-width: fit-content">
-                  <canvas id="weight-chart" style="max-height: 100px;"></canvas>
+                <canvas id="weight-chart" style="max-height: 100px;"></canvas>
               </div>
             </div>
-            <div class="col-md">
+            <div class="col-md-2">
               <button class="btn del-set-button" title="Add weight" data-bs-toggle="modal" data-bs-target="#mWeight" onclick='setWeightDate()'>
                 <h4><i class="bi bi-window-plus"></i></h4>
               </button>
             </div>
           </div>
         </div>
       </div>
-      </div>
     </div>
+  </div>
     <br>
     <div class="row">
         <div class="col-md">