From 078292e793c0c14a5d2b4b9ae4b5a4cfd7ec71e0 Mon Sep 17 00:00:00 2001
From: Aevann <randomname42029@gmail.com>
Date: Tue, 21 Mar 2023 20:49:27 +0200
Subject: [PATCH] show price more prominently in award modal

---
 files/assets/css/main.css         | 7 +++++++
 files/assets/js/award_modal.js    | 3 +++
 files/templates/modals/award.html | 6 +++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 46a2e24b5..ab8c5ec27 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -3542,6 +3542,13 @@ pre {
 .text-small {
 	font-size: 12px !important;
 }
+
+@media (max-width: 768px) {
+	.text-small-sm {
+		font-size: 12px !important;
+	}
+}
+
 .text-small-extra {
 	font-size: 10.1px !important;
 }
diff --git a/files/assets/js/award_modal.js b/files/assets/js/award_modal.js
index e77798d04..ab7d8b057 100644
--- a/files/assets/js/award_modal.js
+++ b/files/assets/js/award_modal.js
@@ -139,6 +139,9 @@ function pick(kind, price, coins, marseybux) {
 		document.getElementById('note').placeholder = "Note to include in award notification";
 		document.getElementById('note').maxLength = 200;
 	}
+
+	document.getElementById('award_price_block').classList.remove('d-none');
+	document.getElementById('award_price').textContent = price;
 }
 
 function buy(mb) {
diff --git a/files/templates/modals/award.html b/files/templates/modals/award.html
index 2848e5511..366ce7d65 100644
--- a/files/templates/modals/award.html
+++ b/files/templates/modals/award.html
@@ -22,7 +22,7 @@
 					{% macro iterate_awards(awards) %}
 						{% for award in awards %}
 							{% set price = (award.price*v.discount)|int %}
-							<div data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{price}} coins/marseybux - {{award.description}}" id="{{award.kind}}" data-nonce="{{g.nonce}}" data-onclick="pick('{{award.kind}}', {{price}}, {{v.coins}}, {{v.marseybux}})">
+							<div data-bs-toggle="tooltip" data-bs-placement="bottom" title="Price: {{price}} coins/marseybux - {{award.description}}" id="{{award.kind}}" data-nonce="{{g.nonce}}" data-onclick="pick('{{award.kind}}', {{price}}, {{v.coins}}, {{v.marseybux}})">
 								<i class="{{award.icon}} {{award.color}}"></i>
 								<div class="pt-1 award-name">{{award.title}}</div>
 								<div class="text-muted award-owned"><span id="{{award.kind}}-owned">{{award.owned}}</span> owned</div>
@@ -81,6 +81,10 @@
 				<button type="button" id="buy1" class="awardbtn btn btn-primary mt-3 mx-3 {% if not FEATURES['MARSEYBUX'] %}d-none{% endif %} fl-r" disabled data-areyousure="buy(true)" data-nonce="{{g.nonce}}" data-onclick="areyousure(this)">Buy with marseybux</button>
 
 				<button type="button" id="buy2" class="awardbtn btn btn-primary mt-3 fl-r" disabled data-areyousure="buy()" data-nonce="{{g.nonce}}" data-onclick="areyousure(this)">Buy</button>
+
+				<div id="award_price_block" class="fl-r mt-4 mr-3 d-none text-small-sm">
+					Price: <span id="award_price"></span> coins/marseybux
+				</div>
 			</div>
 		</div>
 	</div>