add tabs to award modal

pull/134/head
Aevann 2023-02-25 21:40:15 +02:00
parent 00c70a23fb
commit 7a8ec235e0
4 changed files with 58 additions and 14 deletions

View File

@ -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;
}
}

View File

@ -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')
}

View File

@ -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):

View File

@ -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>