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 { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-align: center; text-align: center;
margin: 0;
padding: 0;
box-sizing: border-box;
} }
.calendar { .calendar {
@@ -45,11 +48,65 @@
/* Change color when clicked */ /* Change color when clicked */
} }
// TODO(jona) This should be specific for the sumbit-name-lable id! #submit-name {
label { 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; color: red;
visibility: hidden; 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> </style>
</head> </head>
@@ -99,22 +156,24 @@
calendar.appendChild(dayColumn); calendar.appendChild(dayColumn);
}); });
const submitName = document.getElementById("submit-name") const submitName = document.getElementById("submit-name");
const submitBtn = document.getElementById("submit-btn") const submitBtn = document.getElementById("submit-btn");
const submitNameLabel = document.getElementById("submit-name-label") const submitNameLabel = document.getElementById("submit-name-label");
submitBtn.onclick = function () { submitBtn.onclick = function () {
if (submitName.value == "") { if (submitName.value == "") {
submitNameLabel.style.visibility = "visible" submitNameLabel.style.visibility = "visible";
return return;
} }
const days = calendar.children const days = calendar.children;
const choices = Array.from(days).map( const choices = Array.from(days).map(day =>
day => Array.from(day.children).slice(1, 25).map( Array.from(day.children)
hour => hour.classList.contains("clicked"))) .slice(1, 25)
console.log(`Submitting dates for ${submitName.value}`) .map(hour => hour.classList.contains("clicked"))
console.log(JSON.stringify(choices)) );
console.log(`Submitting dates for ${submitName.value}`);
console.log(JSON.stringify(choices));
const url = "/api/submit"; const url = "/api/submit";
@@ -123,27 +182,34 @@
headers: { headers: {
"Content-Type": "application/json", // Inform the server about the data format "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 => { .then(response => {
if (!response.ok) { if (!response.ok) {
console.log(response) console.log(response);
} }
}) })
.then(data => { .then(data => {
calendar.remove() calendar.remove();
submitName.remove() submitName.remove();
submitBtn.remove() submitBtn.remove();
submitNameLabel.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); document.body.appendChild(textNode);
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); // Handle errors console.error("Error:", error); // Handle errors
}); });
} };
</script> </script>
</body> </body>
</html> </html>
static/result.html.tmpl
+90 -67
View File
@@ -9,12 +9,14 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-align: center; text-align: center;
margin: 0;
padding: 0;
box-sizing: border-box;
} }
.calendar { .calendar {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
/* 7 columns for 7 days */
gap: 10px; gap: 10px;
margin: 20px auto; margin: 20px auto;
width: 90%; width: 90%;
@@ -35,20 +37,71 @@
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 10px; padding: 10px;
margin: 2px 0; margin: 2px 0;
cursor: pointer;
background-color: #fff; background-color: #fff;
text-align: center; text-align: center;
position: relative;
cursor: pointer;
}
.hour-block:hover {
border-color: #87CEEB;
} }
.hour-block.clicked { .hour-block.clicked {
background-color: #87CEEB; background-color: #87CEEB;
/* Change color when clicked */
} }
// TODO(jona) This should be specific for the sumbit-name-lable id! .tooltip {
label { position: absolute;
color: red; padding: 5px;
background-color: black;
color: white;
border-radius: 4px;
font-size: 12px;
visibility: hidden; 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> </style>
</head> </head>
@@ -58,35 +111,27 @@
<h2>{{ .PollName }}</h2> <h2>{{ .PollName }}</h2>
<div class="calendar" id="calendar"></div> <div class="calendar" id="calendar"></div>
<script> <script>
function getColorBetween(upperColor, num, upperBound) { function getColorBetween(upperColor, num, upperBound) {
// Parse the upperColor into RGB values
const parseColor = (color) => { const parseColor = (color) => {
const bigint = parseInt(color.slice(1), 16); const bigint = parseInt(color.slice(1), 16);
return { return {
r: (bigint >> 16) & 255, r: (bigint >> 16) & 255,
g: (bigint >> 8) & 255, g: (bigint >> 8) & 255,
b: bigint & 255 b: bigint & 255,
}; };
}; };
const upperRGB = parseColor(upperColor); const upperRGB = parseColor(upperColor);
const whiteRGB = { r: 255, g: 255, b: 255 }; 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)); const clampedNum = Math.max(0, Math.min(num, upperBound));
// Calculate the weight (proportion of `num` relative to `upperBound`)
const weight = clampedNum / upperBound; const weight = clampedNum / upperBound;
// Interpolate between white and upperColor
const interpolatedRGB = { const interpolatedRGB = {
r: Math.round(whiteRGB.r + weight * (upperRGB.r - whiteRGB.r)), r: Math.round(whiteRGB.r + weight * (upperRGB.r - whiteRGB.r)),
g: Math.round(whiteRGB.g + weight * (upperRGB.g - whiteRGB.g)), 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"); const toHex = (val) => val.toString(16).padStart(2, "0");
return `#${toHex(interpolatedRGB.r)}${toHex(interpolatedRGB.g)}${toHex(interpolatedRGB.b)}`; return `#${toHex(interpolatedRGB.r)}${toHex(interpolatedRGB.g)}${toHex(interpolatedRGB.b)}`;
} }
@@ -111,62 +156,40 @@
hourBlock.textContent = `${hour}:00`; hourBlock.textContent = `${hour}:00`;
const tooltip = document.createElement("div"); const tooltip = document.createElement("div");
tooltip.textContent = result.votes[day][hour].usernames; tooltip.classList.add("tooltip");
tooltip.style.position = "absolute"; tooltip.textContent = result.votes[day][hour].usernames.join(", ");
tooltip.style.padding = "5px"; hourBlock.appendChild(tooltip);
tooltip.style.backgroundColor = "black";
tooltip.style.color = "white"; hourBlock.style.backgroundColor = getColorBetween(
tooltip.style.borderRadius = "4px"; "#87CEEB",
tooltip.style.fontSize = "12px"; result.votes[day][hour].votes,
tooltip.style.visibility = "hidden"; maxVotes
tooltip.style.whiteSpace = "nowrap"; );
tooltip.style.zIndex = "1000";
document.body.appendChild(tooltip);
dayColumn.appendChild(hourBlock); 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); calendar.appendChild(dayColumn);
} }
} }
const url = "/api/result/{{ .PollId }}" const url = "/api/result/{{ .PollId }}";
fetch(url, {method: "GET"}) fetch(url, { method: "GET" })
.then(response => { .then((response) => {
if (!response.ok) { if (!response.ok) {
console.log(response) console.log(response);
} }
return response.json() return response.json();
}) })
.then(data => { .then((data) => {
createResultView(data) createResultView(data);
}) })
.catch(error => { .catch((error) => {
console.error("Fetch error:", error); console.error("Fetch error:", error);
}) });
</script> </script>
</body> </body>
</html> </html>