more shop consistency

files/assets/css/main.css

@@ -7017,9 +7017,13 @@ body *::-webkit-scrollbar {
 	padding-top: 50px;
 }
 
+#shop-banner {
+	width: 500px;
+}
+
 @media (max-width: 768px) {
-	#hats-banner, #shop-banner {
+	#shop-banner {
-		width: 80%;
+		width: 80vw;
 	}
 	.shop-tabs {
 		padding-top: 30px;
@@ -7353,3 +7357,45 @@ button, .btn {
 	-ms-flex-order: -1;
 	order: -1;
 }
+
+#shop-stats {
+	display: table;
+	margin: 0 auto;
+}
+
+#shop-stats > li {
+	text-align: left;
+	font-weight: bold;
+	margin-bottom: 0.25rem;
+	margin-top: 0;
+	font-size: 12px;
+}
+
+@media (min-width: 768px) {
+	#shop-stats > li {
+		margin-bottom: 0.5rem;
+		margin-top: 0;
+		font-size: 16px;
+	}
+}
+
+#profile--info > p, #profile-mobile--info > p {
+	margin-bottom: 0.25rem;
+}
+
+#profile--info > p:last-of-type, #profile-mobile--info > p:last-of-type {
+	margin-bottom: 0.75rem;
+}
+
+#profile-mobile--alts-list {
+	display: table;
+	margin: 0 auto;
+}
+
+#profile-mobile--alts-list > li {
+	text-align: left;
+}
+
+#profile-mobile--info {
+	margin-top: -10px;
+}

files/classes/user.py

@@ -246,6 +246,11 @@ class User(Base):
 
 		return (succeeded, charged_coins)
 
+	@property
+	@lazy
+	def num_of_bought_awards(self):
+		return g.db.query(AwardRelationship).filter_by(user_id=self.id).count()
+
 	@property
 	@lazy
 	def num_of_owned_hats(self):

files/templates/hats.html

@@ -20,20 +20,26 @@
 		</div>
 	</div>
 
-	<header class="container pb-1 text-center">
+	<header id="shop-header" class="container text-center pb-0">
-		<img loading="lazy" id="hats-banner" class="mt-5" alt="hats banner" src="{{SITE_FULL_IMAGES}}/i/hats.webp?x=2" width="50%">
+		<img loading="lazy" id="shop-banner" class="mt-5" alt="shop banner" src="{{SITE_FULL_IMAGES}}/i/hats.webp?x=2">
-		<h5 class="mt-4">Number of hats you bought: {{v.num_of_owned_hats}}</h5>
+		<ul id="shop-stats" class="my-1 my-md-2">
-		<h5 class="mt-4">Number of hats you designed: {{v.num_of_designed_hats}}</h5>
+			<li class="mt-2">Number of hats you bought: {{v.num_of_owned_hats}}</li>
-		<h5 class="mt-4">Coins you spent on hats: {{"{:,}".format(v.coins_spent_on_hats)}}</h5>
+			<li>Number of hats you designed: {{v.num_of_designed_hats}}</li>
-		<h5 class="mt-4">Total hat sales:  {{"{:,}".format(sales)}}</h5>
+			<li>Coins you spent on hats: {{"{:,}".format(v.coins_spent_on_hats)}}</li>
-		<h5 class="mt-4">Number of hats: {{num_of_hats}}</h5>
+			<li>Number of hats: {{num_of_hats}}</li>
+			<li>Total hat sales: {{"{:,}".format(sales)}}</li>
+			<li>Your current coins: {{"{:,}".format(v.coins)}}</li>
+			{% if FEATURES['MARSEYBUX'] %}
+				<li>Your current marseybux: {{"{:,}".format(v.marseybux)}}</li>
+			{% endif %}
+		</ul>
 	</header>
 {% endblock %}
 
 {% block content %}
 	<script defer src="{{'js/hats.js' | asset}}"></script>
 
-	<div class="overflow-x-auto mt-1 mb-5">
+	<div class="overflow-x-auto mt-3 mb-5">
 		<table class="table table-striped shop">
 		<thead class="bg-primary text-white">
 			<tr>

files/templates/shop.html

@@ -1,9 +1,4 @@
 {% extends "default.html" %}
-{%- set SHOP_FLAVOR = {
-		'rDrama': 'Stir drama.',
-		'WPD': 'Watch people die.',
-	}[SITE_NAME]
--%}
 {% block pagetitle %}Shop{% endblock %}
 {% block pagetype %}message{% endblock %}
 {% block banner %}
@@ -24,21 +19,22 @@
 		</div>
 	</div>
 
-	<header class="container pb-1 text-center">
+	<header id="shop-header" class="container text-center pb-0">
 		<img loading="lazy" id="shop-banner" alt="shop banner" src="{{SITE_FULL_IMAGES}}/i/shop.webp">
-		<h5 class="mt-4">{{SHOP_FLAVOR}} Earn coins.</h5>
+		<ul id="shop-stats" class="my-1 my-md-2">
-		<h5 class="mt-4">Total sales: {{"{:,}".format(sales)}} coins</h5>
+			<li>Number of awards you bought: {{v.num_of_bought_awards}}</li>
-		<h5 class="mt-4">Coins spent by you: {{"{:,}".format(v.coins_spent)}} coins</h5>
+			<li>Coins you spent on awards: {{"{:,}".format(v.coins_spent)}}</li>
-		<h5 class="mt-4">Lootboxes bought by you: {{v.lootboxes_bought}} lootbox{{'es' if v.lootboxes_bought != 1}}</h5>
+			<li>Total award sales: {{"{:,}".format(sales)}}</li>
-		<h5 class="mt-4">Your current coins: {{"{:,}".format(v.coins)}}</h5>
+			<li>Your current coins: {{"{:,}".format(v.coins)}}</li>
 			{% if FEATURES['MARSEYBUX'] %}
-			<h5 class="mt-4">Your current marseybux: {{"{:,}".format(v.marseybux)}}</h5>
+				<li>Your current marseybux: {{"{:,}".format(v.marseybux)}}</li>
 			{% endif %}
+		</ul>
 	</header>
 {% endblock %}
 
 {% block content %}
-	<div class="overflow-x-auto mt-1 mb-5"><table class="table table-striped shop">
+	<div class="overflow-x-auto mt-3 mb-5"><table class="table table-striped shop">
 		<thead class="bg-primary text-white">
 				<tr>
 					<th class="disable-sort-click">Icon</th>

files/templates/userpage/banner.html

@@ -217,12 +217,13 @@
 						{% endif %}
 					</div>
 
-					<div class="mt-4" id="profile--info">
+					<div class="mt-3" id="profile--info">
 						<p id="profile--info--id">User ID: {{u.id}}</p>
-						<p id="profile--info--spent">Coins spent: {{u.coins_spent}}</p>
 						<p id="profile--info--truescore">True score: {{u.truescore}}</p>
 						<p id="profile--info--winnings">Winnings: {{u.winnings}}</p>
 						<p id="profile--info--hats-owned" {% if u.num_of_owned_hats >= hats_total %}class="profile-owned-all-hats"{% endif %}>{{u.num_of_owned_hats}} / {{hats_total}} hats owned ({{hats_owned_percent}})</p>
+						<p id="profile--info--spent">Coins spent on awards: {{u.coins_spent}}</p>
+						<p id="profile--info--spent">Coins spent on hats: {{u.coins_spent_on_hats}}</p>
 						{% if u.is_private %}
 							<p id="profile--info--private">User has private mode enabled</p>
 						{% endif %}
@@ -487,10 +488,11 @@
 
 				<div id="profile-mobile--info">
 					<p id="profile-mobile--info--id">User ID: {{u.id}}</p>
-					<p id="profile-mobile--info--spent">Coins spent: {{u.coins_spent}}</p>
 					<p id="profile-mobile--info--truescore">True score: {{u.truescore}}</p>
 					<p id="profile-mobile--info--winnings">Winnings: {{u.winnings}}</p>
 					<p id="profile-mobile--info--hats-owned" {% if u.num_of_owned_hats >= hats_total %}class="profile-owned-all-hats"{% endif %}>{{u.num_of_owned_hats}} / {{hats_total}} hats owned ({{hats_owned_percent}})</p>
+					<p id="profile-mobile--info--spent">Coins spent on awards: {{u.coins_spent}}</p>
+					<p id="profile-mobile--info--spent">Coins spent on hats: {{u.coins_spent_on_hats}}</p>
 					{% if u.is_private %}
 						<p id="profile-mobile--info--private">User has private mode enabled</p>
 					{% endif %}