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/index.html.tmpl
+88 -22
View File
@@ -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>
static/result.html.tmpl
+79 -56
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
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))
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 => {
.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>