impr: show xp gain details as list (@fehmer, @Miodec) (#5895)

![image](https://github.com/user-attachments/assets/b75f405e-5ce5-4f54-9cc8-f2153964008d) ![image](https://github.com/user-attachments/assets/bfa8f7ca-1335-489f-bc48-eebe9abc29d3) --------- Co-authored-by: Miodec <[email protected]>
monkeytypegame · Sep 23, 2024 · d9788a1 · d9788a1
1 parent 8d6f2b4
commit d9788a1
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 100 deletions.
diff --git a/frontend/src/html/header.html b/frontend/src/html/header.html
@@ -132,8 +132,11 @@ <h1 class="text">
           <div class="level" data-balloon-pos="up">1</div>
           <div class="xpBar">
             <div class="bar"></div>
-            <div class="xpGain"></div>
-            <div class="xpBreakdown"></div>
+            <div class="xpBreakdown">
+              <div class="total"></div>
+              <!-- <div class="divider"></div> -->
+              <div class="list"></div>
+            </div>
           </div>
         </div>
       </a>

diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
@@ -74,42 +74,81 @@ nav {
       }
 
       .xpBar {
+        z-index: 5;
         opacity: 0;
         pointer-events: none;
         position: absolute;
         height: 0.25em;
         bottom: -0.5em;
         width: 100%;
-        left: 0;
+        min-width: 16ch;
+        right: 0;
         background: var(--sub-alt-color);
         border-radius: var(--roundness);
+        display: grid;
+        grid-template-columns: auto 2.5em;
         .bar {
           left: 0;
           width: 0%;
           height: 100%;
           background: var(--main-color);
           border-radius: var(--roundness);
         }
-        .xpGain {
-          position: absolute;
-          left: 100%;
-          margin-left: 0.5em;
-          top: 0.2em;
-          transform: translateY(-50%);
-          font-size: 0.75em;
-          color: var(--main-color);
-        }
         .xpBreakdown {
+          backdrop-filter: blur(1em);
+          /*background: linear-gradient(
+            90deg,
+            transparent 0%,
+            var(--bg-color) 10%
+          );*/
+          width: 100%;
           position: absolute;
           color: var(--text-color);
           display: grid;
-          justify-items: center;
-          width: 100%;
-          margin-top: 0.75em;
-          .text {
+          gap: 0.5em;
+          //justify-items: center;
+          width: 32ch;
+          justify-self: end;
+          margin-top: 0.3em;
+          padding: 0.5em 1em;
+          margin-right: -0.5em;
+          border-radius: var(--roundness);
+
+          .total {
+            text-align: right;
+            font-size: 1em;
+            color: var(--main-color);
             width: max-content;
-            font-size: 0.75em;
-            position: absolute;
+            justify-self: end;
+          }
+          .divider {
+            width: 100%;
+            height: 0.1rem;
+            background: var(--sub-alt-color);
+            border-radius: var(--roundness);
+            opacity: 0.5;
+          }
+          .list {
+            .line {
+              font-size: 0.8em;
+              display: grid;
+              grid-template-columns: auto 10ch;
+              gap: 0.5em;
+
+              & div {
+                text-align: right;
+              }
+
+              .positive {
+                color: var(--main-color);
+              }
+              .negative {
+                color: var(--error-color);
+              }
+              .total {
+                font-weight: bold;
+              }
+            }
           }
         }
       }