Fix CSS in results page

OpenRedSoftware · Feb 25, 2024 · 5f599e3 · 5f599e3
1 parent 66ab00f
commit 5f599e3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 33 deletions.
diff --git a/index.css b/index.css
@@ -7,7 +7,7 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  position: relative; /* Set position to relative for absolute child positioning */
+  position: relative; /* Ensure footer placement at the bottom */
 }
 
 #content {
@@ -62,25 +62,26 @@ ul {
 }
 
 li {
-  position: relative;
   background: #ecf0f1;
   margin-bottom: 10px;
   border-radius: 5px;
-  overflow: hidden;
+  padding: 10px; /* Adjusted for spacing */
+  position: relative; /* For bar positioning */
 }
 
 li > div {
-  background-color: #3498db;
+  background-color: #e67e22; /* Adjusted to match button hover color for consistency */
   height: 100%;
-  border-radius: 5px 0 0 5px; /* Match the li border radius */
+  border-radius: 5px 0 0 5px;
+  position: absolute; /* Full width of vote percentage */
+  left: 0;
+  top: 0;
 }
 
 li > span {
-  position: absolute;
-  z-index: 2;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
+  position: relative; /* Ensure text is readable on top of the bar */
+  z-index: 2; /* Above the bar */
+  padding-left: 10px; /* Spacing from the edge of the bar */
   color: #000;
   font-weight: bold;
 }
@@ -109,7 +110,7 @@ footer {
   background-color: #f0f0f0;
   border-radius: 5px;
   cursor: pointer;
-  border: 2px solid transparent; /* To maintain layout on focus */
+  border: 2px solid transparent; /* Maintain layout on focus */
 }
 
 .vote-option:hover {
@@ -120,7 +121,7 @@ footer {
   margin-right: 10px;
 }
 
-/* Style adjustments for when the radio is checked, optional */
+/* Additional Styles for Checked Radio */
 .vote-option input[type="radio"]:checked + span {
   font-weight: bold;
 }
diff --git a/index.html b/index.html
@@ -90,43 +90,58 @@
           // Check if totalVotes is greater than zero
           if (totalVotes > 0) {
             // Create results header
-            const header = document.createElement('h2');
+            const header = document.createElement('h1');
             header.textContent = data.question;
             contentDiv.appendChild(header);
 
             // Create a list to display poll results
             const list = document.createElement('ul');
             for (const [option, votes] of Object.entries(data.votes)) {
               const item = document.createElement('li');
-              item.style.position = 'relative'; // Make the li container relative for absolute positioning of children
-              item.style.minHeight = '24px'; // Ensure item has a minimum height
-
+              item.style.cssText = `
+  display: flex;
+  align-items: center; /* Vertically centers the flex items */
+  position: relative;
+  min-height: 36px;
+  background: #fff7e6;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+`;
+              const percentage = votes * 100 / totalVotes;
               const bar = document.createElement('div');
-              bar.style.width = `${votes * 100 / totalVotes}%`;
-              bar.style.backgroundColor = 'blue';
-              bar.style.position = 'absolute'; // Position bar absolutely to fill the item from behind
-              bar.style.top = '0';
-              bar.style.left = '0';
-              bar.style.height = '100%';
-              bar.style.zIndex = '1'; // Ensure bar is behind the text
-
-              const text = document.createElement('span'); // Use span for text to overlay on bar
-              text.textContent = `${option}: ${votes} votes (${(votes * 100 / totalVotes).toFixed(2)}%)`;
-              text.style.position = 'relative'; // Position text relatively to ensure it's on top of the bar
-              text.style.zIndex = '2'; // Ensure text appears above the bar
-              text.style.whiteSpace = 'nowrap'; // Prevent text from wrapping
-
+              bar.style.cssText = `
+    width: ${percentage}%;
+    background-color: #f0f0f0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 1;
+    border-radius: 5px 0 0 5px; /* Rounded corners on the left side */
+  `; // Adjusted color and added border-radius
+
+              const text = document.createElement('span');
+              text.textContent = `${option}: ${votes} votes (${percentage.toFixed(2)}%)`;
+              text.style.cssText = `
+  z-index: 2;
+  margin-left: 10px; /* Replaces the 'left' property */
+  color: #000;
+  font-weight: normal;
+  white-space: nowrap;
+`;
               item.appendChild(bar);
-              item.appendChild(text); // Ensure text is added after bar so it appears on top
+              item.appendChild(text); // Ensure text is added after the bar so it appears on top
               list.appendChild(item);
             }
+
             contentDiv.appendChild(list);
+            contentDiv.innerHTML += `<button id="goVotePageButton" onclick="window.location.href='/${pollId}/vote'">Vote</button>`;
           } else {
             // Display a message if there are no votes
             contentDiv.innerHTML = 'No votes have been cast yet.';
           }
-
-          html += `<button id="goVotePageButton" onclick="window.location.href='/${pollId}/vote'">Vote</button>`;
         } else {
           contentDiv.innerHTML = 'Poll not found.';
         }