Change the display of vote results

epicyon-profile.css

@@ -159,6 +159,12 @@
     --header-font: 'Arial, Helvetica, sans-serif';
     --button-bottom-margin: 10px;
     --rendering: normal;
+    --voteresult-color: #dddddd;
+    --voteresult-border-color: #aaaaaa;
+    --voteresult-height: 32px;
+    --voteresult-height-mobile: 32px;
+    --voteresult-width: 80%;
+    --voteresult-width-mobile: 80%;
 }
 
 @font-face {
@@ -1724,6 +1730,16 @@ div.container {
     }
     .pageslist {
     }
+    .voteresult {
+	width: var(--voteresult-width);
+	height: var(--voteresult-height);
+    }
+    .voteresultbar {
+	height: var(--voteresult-height);
+	fill: var(--voteresult-color);
+	stroke-width: 10;
+	stroke: var(--voteresult-border-color)
+    }
 }
 
 @media screen and (min-width: 2200px) {
@@ -2429,4 +2445,14 @@ div.container {
     }
     .pageslist {
     }
+    .voteresult {
+	width: var(--voteresult-width-mobile);
+	height: var(--voteresult-height-mobile);
+    }
+    .voteresultbar {
+	height: var(--voteresult-height-mobile);
+	fill: var(--voteresult-color);
+	stroke-width: 10;
+	stroke: var(--voteresult-border-color)
+    }
 }

webapp_question.py

@@ -75,7 +75,6 @@ def insertQuestion(baseDir: str, translate: {},
                 votes = int(questionOption['replies']['totalItems'])
             except BaseException:
                 print('EX: insertQuestion unable to convert to int')
-                pass
             if votes > maxVotes:
                 maxVotes = int(votes+1)
 
@@ -91,18 +90,19 @@ def insertQuestion(baseDir: str, translate: {},
                 votes = int(questionOption['replies']['totalItems'])
             except BaseException:
                 print('EX: insertQuestion unable to convert to int 2')
-                pass
             votesPercent = str(int(votes * 100 / maxVotes))
+
             content += \
-                '<p><input type="text" title="' + str(votes) + \
-                '" name="skillName' + str(questionCtr) + \
-                '" value="' + questionOption['name'] + \
-                ' (' + str(votes) + ')" style="width:40%">\n'
-            content += \
-                '<input type="range" min="1" max="100" ' + \
-                'class="slider" title="' + \
-                str(votes) + '" name="skillValue' + str(questionCtr) + \
-                '" value="' + votesPercent + '"></p>\n'
+                '<p>\n' + \
+                '  <label class="labels">' + \
+                questionOption['name'] + '</label><br>\n' + \
+                '  <svg class="voteresult">\n' + \
+                '    <rect width="' + votesPercent + \
+                '%" class="voteresultbar" />\n' + \
+                '  </svg>' + \
+                '  <label class="labels">' + votesPercent + '%</label>\n' + \
+                '</p>\n'
+
             questionCtr += 1
         content += '</div>\n'
     return content