Minor style fixes

README.md

@@ -30,3 +30,32 @@ services:
       USERNAME_MAP: username:realname,
 ```
 
+## Example setup with openbox autostart
+
+```
+#!/bin/bash
+
+unclutter -idle 0.1 -grab -root &
+
+while :
+do
+  until curl --output /dev/null --silent --head --fail "http://10.17.21.81:5000"; do
+    printf '.'
+    sleep 5
+  done
+
+  xrandr --auto
+  chromium \
+    --no-first-run \
+    --start-maximized \
+    --disable \
+    --disable-translate \
+    --disable-infobars \
+    --disable-suggestions-service \
+    --disable-save-password-bubble \
+    --disable-session-crashed-bubble \
+    --incognito \
+    --kiosk "http://10.17.21.81:5000"
+  sleep 5
+done &
+```

app/__init__.py

@@ -71,7 +71,7 @@ def fetch_github_data():
                             if (milestone.closed_issues + milestone.open_issues) > 0
                             else 0
                         ),
-                        "issues": milestone.open_issues,
+                        "issues": milestone.open_issues + milestone.closed_issues,
                     }
                 )
 

app/static/style.css

@@ -42,13 +42,28 @@ body {
   margin: 5px 0;
 }
 
+.milestone-text {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+  text-shadow: 1px 1px 2px #000;
+  display: block;
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+/* Progress Bar */
 .progress-bar {
   background: #555;
   height: 60px;
   border: 1px solid #777;
   overflow: hidden;
+  position: relative;
 }
 
+/* Progress Fill */
 .progress {
   background: #28a745;
   height: 100%;
@@ -58,16 +73,26 @@ body {
   font-weight: bold;
 }
 
-.milestone-text {
-  color: #fff;
-  font-size: 24px;
-  font-weight: bold;
-  text-shadow: 1px 1px 2px #000;
-  display: block;
+/* Marker Container */
+.milestone-markers {
+  position: absolute;
+  top: 0; /* Align with the top of the progress bar */
+  left: 0;
   width: 100%;
-  text-align: center;
-  white-space: nowrap;
-  overflow: visible;
+  height: 100%; /* Constrained to progress-bar height */
+  pointer-events: none;
+  z-index: 2; /* Ensure markers are above progress fill */
+}
+
+/* Individual Markers */
+.marker {
+  position: absolute;
+  top: 0%;
+  bottom: 0%;
+  width: 4px;
+  background: #fff;
+  opacity: 0.6;
+  border-radius: 1px;
 }
 
 /* ========================= */

app/templates/index.html

@@ -14,21 +14,24 @@
     <section id="milestones">
         {% for milestone in milestones %}
         <div class="milestone">
-            <div class="milestone-subtitle"><span class="repo-name">{{ milestone.repo_name }}</span></div>
+            <div class="milestone-subtitle">
+                <span class="repo-name">{{ milestone.repo_name }}</span>
+            </div>
             <div class="progress-bar">
                 <div class="progress" style="width: {{ milestone.progress }}%;">
                     <span class="milestone-text">{{ milestone.name }} ({{ milestone.progress }}%)</span>
-                    <div class="milestone-markers">
-                        {% for i in range(milestone.issues) %}
-                        <div class="marker" style="left: {{ (i + 1) * (100 / milestone.issues) }}%;"></div>
-                        {% endfor %}
-                    </div>
+                </div>
+                <div class="milestone-markers">
+                    {% for i in range(milestone.issues) %}
+                    <div class="marker" style="left: {{ (i + 1) * (100 / milestone.issues) }}%;"></div>
+                    {% endfor %}
                 </div>
             </div>
         </div>
         {% endfor %}
     </section>
 
+
     <!-- Issues and Pull Requests -->
     <section id="stats">
         <!-- Issues Section -->