jona/datefinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make app responsive to different screen sizes

Browse Source
This commit is contained in:
Jona Heitzer
2025-01-04 16:51:35 +01:00
parent 00cb33d542
commit 9b2daca0e6
2 changed files with 178 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/result.html.tmpl
+90 -67
View File
@@ -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>