80 lines
2.6 KiB
HTML
80 lines
2.6 KiB
HTML
<input type="hidden" id="awardTarget" value="" />
|
|
<div class="modal fade" id="awardModal" tabindex="-1" role="dialog" aria-labelledby="awardModalTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Give Award</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true"><i class="far fa-times"></i></span>
|
|
</button>
|
|
</div>
|
|
<div id="awardModalBody" class="modal-body">
|
|
<form class="pt-3 pb-0" action="/post/{{p.id}}/awards" method="post">
|
|
<div class="card-columns awards-wrapper">
|
|
{% for award in v.awards %}
|
|
<div>
|
|
<label class="card" onclick="document.getElementById('desc-{{award.kind}}').classList.toggle('d-none');document.getElementById('giveaward').disabled=false">
|
|
<i class="{{award.icon}} {{award.color}}"></i><br />
|
|
<span class="d-block pt-2" style="font-weight: bold; font-size: 14px;">{{award.title}}</span>
|
|
<span class="text-muted">{{award.owned}} owned</span>
|
|
</label>
|
|
</div>
|
|
<div id="desc-{{award.kind}}" class="d-none">
|
|
<div class="award-desc p-3">
|
|
<i style="font-size: 35px;"></i>
|
|
<div style="margin-left: 15px;">
|
|
<strong>{{pickedAward.title}} Award</strong><br />
|
|
<span class="text-muted">{{pickedAward.description}}</span>
|
|
</div>
|
|
</div>
|
|
<label for="note" class="pt-4">Note (optional):</label>
|
|
<textarea id="note" name="note" class="form-control" placeholder="Note to include in award notification"></textarea>
|
|
</div>
|
|
<input name="{{award.kind}}" hidden>
|
|
<input id="giveaward" class="btn btn-primary" type="submit" value="Give Award" disabled>
|
|
{% endfor %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.awards-wrapper input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.awards-wrapper label {
|
|
cursor: pointer;
|
|
padding: 15px;
|
|
text-align: center;
|
|
text-transform: none!important;
|
|
}
|
|
|
|
.awards-wrapper label i {
|
|
font-size: 45px;
|
|
}
|
|
|
|
.awards-wrapper label.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.awards-wrapper label:hover {
|
|
/*background-color: rgba(173, 226, 255, 0.7)!important;*/
|
|
background-color: var(--primary)!important;
|
|
background-opacity: 0.4;
|
|
}
|
|
|
|
.awards-wrapper input[type="radio"]:checked+label {
|
|
/*background-color: rgba(173, 226, 255, 0.9)!important;*/
|
|
background-color: var(--primary)!important;
|
|
background-opacity: 0.9;
|
|
}
|
|
|
|
.award-desc {
|
|
border-radius: 5px;
|
|
background-color: rgba(221, 221, 221, 0.23);
|
|
display: flex;
|
|
}
|
|
</style> |