From 55dced7547d4e884f3cf6774666a3e4d507494c2 Mon Sep 17 00:00:00 2001
From: aceberg <1502200+aceberg@users.noreply.github.com>
Date: Mon, 22 Jan 2024 18:18:37 +0700
Subject: [PATCH] Horizontal scroll for heatmap

---
 CHANGELOG.md                      |  5 +++++
 internal/web/public/css/index.css |  6 ++++++
 internal/web/templates/index.html | 36 ++++++++++++++++---------------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a369ed..5077f6b 100644
--- 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
index dc0d117..dabd6da 100644
--- 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;
+    }
 }
\ No newline at end of file
diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html
index ba07b93..87da1ae 100644
--- a/internal/web/templates/index.html
+++ b/internal/web/templates/index.html
@@ -40,26 +40,28 @@ <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>
@@ -67,8 +69,8 @@ <h4><i class="bi bi-window-plus"></i></h4>
           </div>
         </div>
       </div>
-      </div>
     </div>
+  </div>
     <br>
     <div class="row">
         <div class="col-md">