Improve style of groups sg info

SauceLLC · Nov 22, 2023 · 43615bf · 43615bf
1 parent a2a35ad
commit 43615bf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/pages/scss/groups.scss b/pages/scss/groups.scss
@@ -292,13 +292,15 @@ html.horizontal #meta {
         }
 
         &.pack-position .bubble::before {
-            transition: top 1s linear;
+            $size: 0.3rem;
+            transition: top 200ms linear;
             content: "";
             position: absolute;
             width: 100%;
-            height: 0;
-            border-top: 0.3rem solid #a8a4a39e;
-            top: calc(var(--pack-position) * (100% - 0.3rem));
+            height: $size;
+            background-image: radial-gradient(#6668, #fff);
+            background-size: math.div($size, 3) math.div($size, 3);
+            top: calc(var(--pack-position) * (100% - $size));
             mix-blend-mode: color-burn;
         }
     }
@@ -366,18 +368,26 @@ html.horizontal #meta {
                 --c: calc(var(--b) + var(--subgroup-C) * 100%);
                 --d: calc(var(--c) + var(--subgroup-D) * 100%);
                 --e: calc(var(--d) + var(--subgroup-E) * 100%);
+                /* Pie slices... */
                 background-image: conic-gradient(
                     var(--subgroup-A-color), var(--subgroup-A-color) var(--a),
                     var(--subgroup-B-color) var(--a), var(--subgroup-B-color) var(--b),
                     var(--subgroup-C-color) var(--b), var(--subgroup-C-color) var(--c),
-                    var(--subgroup-D-color) var(--c), var(--subgroup-B-color) var(--d),
+                    var(--subgroup-D-color) var(--c), var(--subgroup-D-color) var(--d),
                     var(--subgroup-E-color) var(--d), var(--subgroup-E-color));
+                /* Blended... */
+                /*background-image: conic-gradient(
+                    var(--subgroup-A-color), var(--subgroup-A-color) var(--a),
+                    var(--subgroup-B-color) var(--b),
+                    var(--subgroup-C-color) var(--c),
+                    var(--subgroup-D-color) var(--d),
+                    var(--subgroup-E-color));*/
                 $mask-gradient: radial-gradient(closest-side,
                     #0000,
-                    #0000 calc(100% - 0.34rem),
-                    #000 calc(100% - 0.20rem),
-                    #000 calc(100% - 0.12rem),
-                    #0000 calc(100% - 0.06rem),
+                    #0000 calc(100% - 0.2rem),
+                    #000 calc(100% - 0.1rem),
+                    #000 calc(100% - 0.05rem),
+                    #0000 calc(100% - 0.01rem),
                     #0000);
                 -webkit-mask-image: $mask-gradient;
                 mask-image: $mask-gradient;

diff --git a/pages/src/groups.mjs b/pages/src/groups.mjs
@@ -392,7 +392,7 @@ function renderGroups(groups) {
         if (eventSubgroup) {
             const labels = getSubgroupDistro(group);
             for (const [label, pct] of labels.entries()) {
-                pos.bubbleHolder.style.setProperty(`--subgroup-${label}`, pct);
+                pos.bubbleHolder.style.setProperty(`--subgroup-${label}`, pct.toFixed(6));
                 unusedLabels.delete(label);
             }
             pos.subgroupsInUse = new Set(labels.keys());
@@ -498,7 +498,7 @@ function renderGroups(groups) {
         if (group.watching) {
             if (group.athletes.length > 1) {
                 const wIdx = group.athletes.findIndex(x => x.watching);
-                pos.el.style.setProperty('--pack-position', wIdx / (group.athletes.length - 1));
+                pos.el.style.setProperty('--pack-position', (wIdx / (group.athletes.length - 1)).toFixed(6));
             }
         } else {
             pos.watchTarget = group.athletes[Math.trunc(group.athletes.length / 2)].athleteId;