84 lines
3.3 KiB
HTML
84 lines
3.3 KiB
HTML
<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 mx-auto max-w-3xl bg-gray-100 rounded-md shadow-lg">
|
|
<div class="modal-header">
|
|
<h5 class="font-bold text-xl text-black font-heading leading-normal">Gift Award</h5>
|
|
<button type="button" class="close text-gray-700 hover:text-gray-900" data-bs-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true"><i class="far fa-times"></i></span>
|
|
</button>
|
|
</div>
|
|
<div id="awardModalBody" class="overflow-y-auto px-4">
|
|
<form id="awardTarget" action="" method="post">
|
|
<div class="flex flex-wrap -mx-4 overflow-hidden">
|
|
{% for award in v.user_awards %}
|
|
<div class="my-4 px-4 w-1/2 overflow-hidden lg:w-1/4 flex items-center justify-center">
|
|
{% if award.owned %}
|
|
<button type="button" id="{{award.kind}}" onclick="bruh('{{award.kind}}')" class="w-full h-full p-2 hover:bg-gray-300 rounded">
|
|
{% else %}
|
|
<button type="button" id="{{award.kind}}" disabled class="cursor-not-allowed opacity-50 w-full h-full p-2 hover:bg-gray-300 rounded">
|
|
{% endif %}
|
|
<i class="{{award.icon}} {{award.color}}"></i>
|
|
<div class="mt-2 font-bold text-base text-gray-700">{{award.title}}</div>
|
|
<div class="text-sm text-gray-500">{{award.owned}} owned</div>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<label id="notelabel" for="note" class="pt-4 label">
|
|
Note
|
|
<small class="font-normal text-gray-500">Optional</small>
|
|
</label>
|
|
<input id="kind" name="kind" value="" hidden>
|
|
<textarea id="note" maxlength="200" name="note" class="form-input" placeholder="Note to include in award notification..."></textarea>
|
|
<div class="flex justify-end space-x-2 border-t border-gray-300 p-4 -mx-4 mt-4">
|
|
<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-700" data-bs-dismiss="modal">
|
|
Cancel
|
|
</button>
|
|
<input id="giveaward" class="ml-auto block px-4 py-2 bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 active:shadow-inner border border-green-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-100 focus:text-gray-500 focus:outline-none disabled:opacity-50" type="submit" value="Gift Award" disabled>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script defer src="/assets/js/award_modal.js?v=58"></script>
|
|
|
|
<style>
|
|
.awards-wrapper input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.awards-wrapper a {
|
|
cursor: pointer;
|
|
padding: 15px !important;
|
|
text-align: center;
|
|
text-transform: none!important;
|
|
}
|
|
|
|
.awards-wrapper a i {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.awards-wrapper a.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.awards-wrapper a:hover:not(.disabled), .awards-wrapper .picked {
|
|
background-color: var(--primary)!important;
|
|
}
|
|
|
|
.awards-wrapper input[type="radio"]:checked+a {
|
|
background-color: var(--primary)!important;
|
|
}
|
|
|
|
.award-columns {
|
|
column-count: 2;
|
|
}
|
|
|
|
@media (min-width: 767.98px) {
|
|
.award-columns {
|
|
column-count: 9 !important;
|
|
}
|
|
}
|
|
</style> |