From 7a8ec235e04e42fa9de497d791c308f343792666 Mon Sep 17 00:00:00 2001
From: Aevann <randomname42029@gmail.com>
Date: Sat, 25 Feb 2023 21:40:15 +0200
Subject: [PATCH] add tabs to award modal

---
 files/assets/css/main.css         | 17 ++++++++++-----
 files/assets/js/award_modal.js    | 10 +++++++++
 files/classes/user.py             | 10 +++++++++
 files/templates/modals/award.html | 35 +++++++++++++++++++++++--------
 4 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 758b16f7f..856751247 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -5776,7 +5776,7 @@ img[src="/i/hand.webp"]+img[glow]:not([data-src]) {
 	display: none;
 }
 
-.awards-wrapper > div {
+.awards-wrapper > div > div {
 	padding: 5px !important;
 	text-align: center;
 	text-transform: none!important;
@@ -5786,15 +5786,15 @@ img[src="/i/hand.webp"]+img[glow]:not([data-src]) {
 	border-radius: 0.2rem;
 }
 
-.awards-wrapper > div > i {
+.awards-wrapper > div > div > i {
 	font-size: 16px;
 }
 
-.awards-wrapper > div.disabled {
+.awards-wrapper > div > div.disabled {
 	opacity: 0.6;
 }
 
-.awards-wrapper > div:hover:not(.disabled), .awards-wrapper .picked {
+.awards-wrapper > div > div:hover:not(.disabled), .awards-wrapper .picked {
 	background-color: var(--primary)!important;
 }
 
@@ -6902,7 +6902,7 @@ div.markdown {
 	.award-name, .award-owned {
 		font-size: 11px;
 	}
-	.awards-wrapper > div {
+	.awards-wrapper > div > div {
 		width: 101px!important;
 	}
 	.download-video {
@@ -7183,3 +7183,10 @@ input[type=number] {
 .unbreakable {
 	white-space: nowrap;
 }
+
+@media (max-width: 768px) {
+	.award-tab {
+		font-size: 10px;
+		letter-spacing: 1px;
+	}
+}
diff --git a/files/assets/js/award_modal.js b/files/assets/js/award_modal.js
index d3d13fd6a..cb223808f 100644
--- a/files/assets/js/award_modal.js
+++ b/files/assets/js/award_modal.js
@@ -180,3 +180,13 @@ for (const element of data_url) {
 		document.getElementById('giveaward').dataset.action = element.dataset.url
 	});
 }
+
+const awardtabs = document.getElementsByClassName('award-tab');
+const awardsections = document.getElementsByClassName('award-section');
+
+function switchAwardTab() {
+	for (const element of awardtabs)
+		element.classList.toggle('active')
+	for (const element of awardsections)
+		element.classList.toggle('d-none')
+}
diff --git a/files/classes/user.py b/files/classes/user.py
index e593ff9f9..6bd433885 100644
--- a/files/classes/user.py
+++ b/files/classes/user.py
@@ -451,6 +451,16 @@ class User(Base):
 
 		return return_value
 
+	@property
+	@lazy
+	def awards_content_effect(self):
+		return [x for x in self.user_awards if not x['deflectable'] and x['kind'] != 'benefactor']
+
+	@property
+	@lazy
+	def awards_author_effect(self):
+		return [x for x in self.user_awards if x not in self.awards_content_effect]
+
 	@property
 	@lazy
 	def referral_count(self):
diff --git a/files/templates/modals/award.html b/files/templates/modals/award.html
index dae966321..15f2fc017 100644
--- a/files/templates/modals/award.html
+++ b/files/templates/modals/award.html
@@ -9,16 +9,33 @@
 					<span><i class="far fa-times"></i></span>
 				</button>
 			</div>
-			<div id="awardModalBody" class="modal-body mb-3">
+			<div id="awardModalBody" class="modal-body pt-2 mb-3">
+				<div class="row box-shadow-bottom bg-white pt-1 pb-4" style="justify-content: center;">
+					<button class="btn btn-primary btn-block m-0 shop-tab award-tab active" data-nonce="{{g.nonce}}" data-onclick="switchAwardTab()">
+						<span class="mr-auto ml-auto"><i class="fas fa-gift mr-2"></i>EFFECT ON CONTENT</span>
+					</button>
+					<button class="btn btn-primary btn-block m-0 shop-tab award-tab" data-nonce="{{g.nonce}}" data-onclick="switchAwardTab()">
+						<span class="mr-auto ml-auto"><i class="fas fa-gift mr-2"></i>EFFECT ON AUTHOR</span>
+					</button>
+				</div>
 				<div class="awards-wrapper" style="text-align:center">
-					{% for award in v.user_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}})">
-							<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>
-						</div>
-					{% endfor %}
+					{% 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}})">
+								<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>
+							</div>
+						{% endfor %}
+					{% endmacro %}
+
+					<div class="award-section">
+						{{iterate_awards(v.awards_content_effect)}}
+					</div>
+					<div class="award-section d-none">
+						{{iterate_awards(v.awards_author_effect)}}
+					</div>
 				</div>
 				<label id="notelabel" for="note" class="pt-4">Note (optional):</label>
 				<input autocomplete="off" id="kind" hidden>