improve UX of progress bar

[xsuchy]

This should improve UX of progress bar and make clear, what the progress display, what is 100% and links to documentation.

Note that this is completely untested as I unable to run pre-commit hook and neither run podman-compose (it again does not display the central box for me).

[FrostyX]

There were some errors preventing the code to run. But also a couple styling issues - everything not being at the same line and the text being below the progress bar.

I made a couple of changes to your code:

diff --git a/frontend/public/css/style.css b/frontend/public/css/style.css
index 440f81a..e773480 100644
--- a/frontend/public/css/style.css
+++ b/frontend/public/css/style.css
@@ -290,3 +290,13 @@ a:hover {
   color: var(--darkblue);
   overflow-wrap: normal;
 }
+
+#progressbar-text {
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 3px;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
diff --git a/frontend/src/app/homepage.cljs b/frontend/src/app/homepage.cljs
index 55e1363..802ec0d 100644
--- a/frontend/src/app/homepage.cljs
+++ b/frontend/src/app/homepage.cljs
@@ -102,12 +102,14 @@

 (defn render-stats []
   [:div {:id "progressbar"}
+   [:div {:id "progressbar-text"}
+    [:p
+     "Collected "
+     (:total_reports @backend-stats)
+     " logs from "
+     [:a {:href "/documentation#goals"} @report-target]]]
    [:div {:id "progress"
-          :style {:width (str (progress-width) "%")}}]
-   [:div
-    [:p "Collected " (backend-stats) " logs"]
-    [:p "from "
-     [:a :href "/documentation#goals" (report-target)]]]])
+          :style {:width (str (progress-width) "%")}}]])

 (defn render-card [provider url title img text inputs]
   [:div {:class "card-body"}

Then it looks like this:

Was this the desired look?

[FrostyX]

You want the number of total reports from the backend-stats therefore (:total_reports @backend-stats)

[FrostyX]

report-target is not a function but an atom, so you want to print it using @report-target

[xsuchy]

Updated. Now it looks like ^^^