From 9b2daca0e63564bbb4b75dfdda7dce1cd5394f26 Mon Sep 17 00:00:00 2001
From: Jona Heitzer <jona.heitzer@wa5p.eu>
Date: Sat, 4 Jan 2025 16:51:35 +0100
Subject: [PATCH] Make app responsive to different screen sizes

---
 static/index.html.tmpl  | 110 ++++++++++++++++++++++------
 static/result.html.tmpl | 157 +++++++++++++++++++++++-----------------
 2 files changed, 178 insertions(+), 89 deletions(-)

diff --git a/static/index.html.tmpl b/static/index.html.tmpl
index 7935279..86409e3 100644
--- a/static/index.html.tmpl
+++ b/static/index.html.tmpl
@@ -9,6 +9,9 @@
         body {
             font-family: Arial, sans-serif;
             text-align: center;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
         .calendar {
@@ -45,11 +48,65 @@
             /* Change color when clicked */
         }
 
-        // TODO(jona) This should be specific for the sumbit-name-lable id!
-        label {
+        #submit-name {
+            width: 90%;
+            max-width: 300px;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        #submit-btn {
+            padding: 10px 20px;
+            font-size: 16px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        #submit-btn:hover {
+            background-color: #45a049;
+        }
+
+        #submit-name-label {
             color: red;
             visibility: hidden;
         }
+
+        @media (max-width: 768px) {
+            .calendar {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .hour-block {
+                font-size: 12px;
+                padding: 8px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .calendar {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 5px;
+            }
+
+            .day-column {
+                padding: 5px;
+            }
+
+            .hour-block {
+                font-size: 10px;
+                padding: 5px;
+            }
+
+            #submit-btn {
+                font-size: 14px;
+                padding: 8px 15px;
+            }
+        }
     </style>
 </head>
 
@@ -99,22 +156,24 @@
             calendar.appendChild(dayColumn);
         });
 
-        const submitName = document.getElementById("submit-name")
-        const submitBtn = document.getElementById("submit-btn")
-        const submitNameLabel = document.getElementById("submit-name-label")
+        const submitName = document.getElementById("submit-name");
+        const submitBtn = document.getElementById("submit-btn");
+        const submitNameLabel = document.getElementById("submit-name-label");
 
         submitBtn.onclick = function () {
             if (submitName.value == "") {
-                submitNameLabel.style.visibility = "visible"
-                return
+                submitNameLabel.style.visibility = "visible";
+                return;
             }
 
-            const days = calendar.children
-            const choices = Array.from(days).map(
-                day => Array.from(day.children).slice(1, 25).map(
-                    hour => hour.classList.contains("clicked")))
-            console.log(`Submitting dates for ${submitName.value}`)
-            console.log(JSON.stringify(choices))
+            const days = calendar.children;
+            const choices = Array.from(days).map(day =>
+                Array.from(day.children)
+                    .slice(1, 25)
+                    .map(hour => hour.classList.contains("clicked"))
+            );
+            console.log(`Submitting dates for ${submitName.value}`);
+            console.log(JSON.stringify(choices));
 
             const url = "/api/submit";
 
@@ -123,27 +182,34 @@
                 headers: {
                     "Content-Type": "application/json", // Inform the server about the data format
                 },
-                body: JSON.stringify({pollId: {{ .PollId }}, username: submitName.value, choices: choices}), // Convert the data to JSON string
+                body: JSON.stringify({
+                    pollId: {{ .PollId }},
+                    username: submitName.value,
+                    choices: choices
+                }), // Convert the data to JSON string
             })
                 .then(response => {
                     if (!response.ok) {
-                        console.log(response)
+                        console.log(response);
                     }
                 })
                 .then(data => {
-                    calendar.remove()
-                    submitName.remove()
-                    submitBtn.remove()
-                    submitNameLabel.remove()
+                    calendar.remove();
+                    submitName.remove();
+                    submitBtn.remove();
+                    submitNameLabel.remove();
 
-                    const textNode = document.createTextNode("Your choices have been submitted, thx :)");
+                    const textNode = document.createTextNode(
+                        "Your choices have been submitted, thx :)"
+                    );
                     document.body.appendChild(textNode);
                 })
                 .catch(error => {
-                    console.error('Error:', error); // Handle errors
+                    console.error("Error:", error); // Handle errors
                 });
-        }
+        };
     </script>
 </body>
 
 </html>
+
diff --git a/static/result.html.tmpl b/static/result.html.tmpl
index 4de2e59..3b64708 100644
--- a/static/result.html.tmpl
+++ b/static/result.html.tmpl
@@ -9,12 +9,14 @@
         body {
             font-family: Arial, sans-serif;
             text-align: center;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
         .calendar {
             display: grid;
             grid-template-columns: repeat(7, 1fr);
-            /* 7 columns for 7 days */
             gap: 10px;
             margin: 20px auto;
             width: 90%;
@@ -35,20 +37,71 @@
             border: 1px solid #ddd;
             padding: 10px;
             margin: 2px 0;
-            cursor: pointer;
             background-color: #fff;
             text-align: center;
+            position: relative;
+            cursor: pointer;
+        }
+
+        .hour-block:hover {
+            border-color: #87CEEB;
         }
 
         .hour-block.clicked {
             background-color: #87CEEB;
-            /* Change color when clicked */
         }
 
-        // TODO(jona) This should be specific for the sumbit-name-lable id!
-        label {
-            color: red;
+        .tooltip {
+            position: absolute;
+            padding: 5px;
+            background-color: black;
+            color: white;
+            border-radius: 4px;
+            font-size: 12px;
             visibility: hidden;
+            white-space: nowrap;
+            z-index: 1000;
+            transform: translate(-50%, -150%);
+        }
+
+        .hour-block:hover .tooltip {
+            visibility: visible;
+        }
+
+        @media (max-width: 768px) {
+            .calendar {
+                grid-template-columns: repeat(3, 1fr);
+                gap: 8px;
+            }
+
+            .hour-block {
+                font-size: 12px;
+                padding: 8px;
+            }
+
+            .tooltip {
+                font-size: 10px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .calendar {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 5px;
+            }
+
+            .day-column {
+                padding: 5px;
+            }
+
+            .hour-block {
+                font-size: 10px;
+                padding: 5px;
+            }
+
+            .tooltip {
+                font-size: 9px;
+            }
         }
     </style>
 </head>
@@ -58,35 +111,27 @@
     <h2>{{ .PollName }}</h2>
     <div class="calendar" id="calendar"></div>
     <script>
-
         function getColorBetween(upperColor, num, upperBound) {
-            // Parse the upperColor into RGB values
             const parseColor = (color) => {
-              const bigint = parseInt(color.slice(1), 16);
-              return {
-                r: (bigint >> 16) & 255,
-                g: (bigint >> 8) & 255,
-                b: bigint & 255
-              };
+                const bigint = parseInt(color.slice(1), 16);
+                return {
+                    r: (bigint >> 16) & 255,
+                    g: (bigint >> 8) & 255,
+                    b: bigint & 255,
+                };
             };
-          
+
             const upperRGB = parseColor(upperColor);
             const whiteRGB = { r: 255, g: 255, b: 255 };
-          
-            // Clamp the number to the range [0, upperBound]
             const clampedNum = Math.max(0, Math.min(num, upperBound));
-          
-            // Calculate the weight (proportion of `num` relative to `upperBound`)
             const weight = clampedNum / upperBound;
-          
-            // Interpolate between white and upperColor
+
             const interpolatedRGB = {
-              r: Math.round(whiteRGB.r + weight * (upperRGB.r - whiteRGB.r)),
-              g: Math.round(whiteRGB.g + weight * (upperRGB.g - whiteRGB.g)),
-              b: Math.round(whiteRGB.b + weight * (upperRGB.b - whiteRGB.b))
+                r: Math.round(whiteRGB.r + weight * (upperRGB.r - whiteRGB.r)),
+                g: Math.round(whiteRGB.g + weight * (upperRGB.g - whiteRGB.g)),
+                b: Math.round(whiteRGB.b + weight * (upperRGB.b - whiteRGB.b)),
             };
-          
-            // Convert the result back to a hex color
+
             const toHex = (val) => val.toString(16).padStart(2, "0");
             return `#${toHex(interpolatedRGB.r)}${toHex(interpolatedRGB.g)}${toHex(interpolatedRGB.b)}`;
         }
@@ -111,62 +156,40 @@
                     hourBlock.textContent = `${hour}:00`;
 
                     const tooltip = document.createElement("div");
-                    tooltip.textContent = result.votes[day][hour].usernames;
-                    tooltip.style.position = "absolute";
-                    tooltip.style.padding = "5px";
-                    tooltip.style.backgroundColor = "black";
-                    tooltip.style.color = "white";
-                    tooltip.style.borderRadius = "4px";
-                    tooltip.style.fontSize = "12px";
-                    tooltip.style.visibility = "hidden";
-                    tooltip.style.whiteSpace = "nowrap";
-                    tooltip.style.zIndex = "1000";
-                    document.body.appendChild(tooltip);
+                    tooltip.classList.add("tooltip");
+                    tooltip.textContent = result.votes[day][hour].usernames.join(", ");
+                    hourBlock.appendChild(tooltip);
+
+                    hourBlock.style.backgroundColor = getColorBetween(
+                        "#87CEEB",
+                        result.votes[day][hour].votes,
+                        maxVotes
+                    );
 
                     dayColumn.appendChild(hourBlock);
-
-                    hourBlock.addEventListener("mouseover", (event) => {
-                      tooltip.style.left = `${event.pageX + 10}px`; // Position near the cursor
-                      tooltip.style.top = `${event.pageY + 10}px`;
-                      tooltip.style.visibility = result.votes[day][hour].usernames.length > 0 ? "visible" : "hidden";
-                    });
-
-                    // Move tooltip with mouse
-                    hourBlock.addEventListener("mousemove", (event) => {
-                      tooltip.style.left = `${event.pageX + 10}px`;
-                      tooltip.style.top = `${event.pageY + 10}px`;
-                    });
-
-                    // Hide tooltip on mouseout
-                    hourBlock.addEventListener("mouseout", () => {
-                      tooltip.style.visibility = "hidden";
-                    });
-
-                    hourBlock.style.backgroundColor =
-                        getColorBetween("#87CEEB", result.votes[day][hour].votes, maxVotes)
-                
                 }
 
                 calendar.appendChild(dayColumn);
             }
         }
 
-        const url = "/api/result/{{ .PollId }}"
+        const url = "/api/result/{{ .PollId }}";
 
-        fetch(url, {method: "GET"})
-            .then(response => {
+        fetch(url, { method: "GET" })
+            .then((response) => {
                 if (!response.ok) {
-                    console.log(response)
+                    console.log(response);
                 }
-                return response.json()
+                return response.json();
             })
-            .then(data => {
-                createResultView(data)
+            .then((data) => {
+                createResultView(data);
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error("Fetch error:", error);
-            })
+            });
     </script>
 </body>
 
 </html>
+