fixed incentive stuff. hopefully didn't break too many things

Vauhtijuoksu · Apr 24, 2024 · a190359 · a190359
1 parent 6ec2b04
commit a190359
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/src/lib/components/DonationPills.svelte b/src/lib/components/DonationPills.svelte
@@ -12,7 +12,7 @@
                     color: hsl(
                         ${Math.trunc(t * 5 * 360)},
                         ${Math.min(100, 1000 - 1000 * t)}%,
-                        ${Math.min(25, 500 - 500 * t)}%
+                        ${Math.min(35, 500 - 500 * t)}%
                     );`
             }
         };

diff --git a/src/lib/components/IncentiveBar.svelte b/src/lib/components/IncentiveBar.svelte
@@ -29,14 +29,21 @@
   <span class="incentive">{title} {getGame(incentive?.game_id)?.game ?? ''} - {incentive?.title}</span>
 {#each statusSorted() as status}
   {#if status.type === 'milestone'}
+    <div class="pillholder">
   <Pill>{incentive?.total_amount} / {status.milestone_goal}€</Pill>
+    </div>
   {:else}
+    <div class="pillholder">
   <Pill>{status.option}: {status.amount}€</Pill>
+    </div>
   {/if}
 {/each}
 {/key}
 
 <style>
+  .pillholder{
+    margin-top: -5px;
+  }
   .incentive {
     font-size:  var(--donation-bar-info-font-size);
     margin-right: .75em;

diff --git a/src/lib/components/Incentives.svelte b/src/lib/components/Incentives.svelte
@@ -71,11 +71,14 @@
 				Ei vielä ehdotuksia!
 			{/if}
 		</div>
-		<div class="icon">
-			<GameIcon
-				img_filename="{game(incentive?.game_id)?.img_filename}"
-				></GameIcon>
+		<div class="iconwrapper">
+			<div class="icon">
+				<GameIcon
+					img_filename="{game(incentive?.game_id)?.img_filename}"
+					></GameIcon>
+			</div>
 		</div>
+
 	</div>
 	{/key}
 
@@ -101,7 +104,6 @@
 	}
 	.incentive-wrapper {
 		height: 320px;
-		overflow: hidden;
 	}
 	.options {
 		display: flex;
@@ -112,7 +114,9 @@
 		font-size: var(--font-size-lg);
 	}
 	.icon {
-		margin: -20px;
+        scale: var(--setup-time-game-icon-scale, 1);
+		margin-left: -100px;
+		margin-top: 10px;
 	}
 	.title {
 		font-size: var(--font-size-md);

diff --git a/src/lib/themes/vj2024.ts b/src/lib/themes/vj2024.ts
@@ -124,9 +124,9 @@ const vj2024base: LayoutTheme = {
     --stopped-timer-color: var(--darkgreen);
     --screen-overlay-item-stroke-color: #edf0ea;
     --counter-font-size: var(--timer-font-size);
-    --pill-background-1: #fdc5d6;
+    --pill-background-1: var(--naturalwhite);
     --pill-font-color-1: var(--font-color);
-    --pill-background-2: #ffce8d;
+    --pill-background-2: var(--naturalwhite);
     --pill-font-color-2: #var(--font-color);
     --pill-fancy-background-1: conic-gradient(blue, turquoise, green, yellow, red, purple);
     --pill-fancy-background-2: conic-gradient(red, orange, yellow, violet, purple);
@@ -228,6 +228,8 @@ const vj2024dark: LayoutTheme = {
     --background-2: var(--background-color-2) url('/images/2024/nightbg.png') repeat fixed top left;
     --stopped-screen-timer-color: var(--yellow);
     --stopped-timer-color: var(--yellow);
+    --pill-background-1: var(--red);
+    --pill-background-2: var(--greyblue);
   `
 }