rDrama/files/templates/award_modal.html

78 lines
2.6 KiB
HTML
Raw Normal View History

2021-10-15 14:08:27 +00:00
<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">
2021-12-01 03:54:31 +00:00
<div class="modal-content mx-auto max-w-xl bg-gray-100 rounded-md shadow-lg">
2021-10-15 14:08:27 +00:00
<div class="modal-header">
2021-12-01 03:54:31 +00:00
<h5 class="font-bold text-xl text-black font-heading leading-normal">Give Award</h5>
2021-10-15 14:08:27 +00:00
<button type="button" class="close" data-bs-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 id="awardTarget" class="pt-3 pb-0" action="" method="post">
2021-12-01 03:58:27 +00:00
<div class="flex flex-wrap -mx-4 overflow-hidden">
2021-10-15 14:08:27 +00:00
{% for award in v.user_awards %}
2021-12-01 03:58:27 +00:00
<div class="my-4 px-4 w-1/2 overflow-hidden lg:w-1/4 flex items-center justify-center">
2021-10-15 14:08:27 +00:00
{% if award.owned %}
2021-12-01 03:56:55 +00:00
<button id="{{award.kind}}" onclick="bruh('{{award.kind}}')">
2021-10-15 14:08:27 +00:00
{% else %}
2021-12-01 03:56:55 +00:00
<button id="{{award.kind}}" class="disabled">
2021-10-15 14:08:27 +00:00
{% endif %}
2021-12-01 03:56:55 +00:00
<i class="{{award.icon}} {{award.color}}"></i>
<div class="pt-2" style="font-weight: bold; font-size: 14px; color:#E1E1E1">{{award.title}}</div>
<div class="text-muted">{{award.owned}} owned</div>
</button>
</div>
2021-10-15 14:08:27 +00:00
{% endfor %}
</div>
2021-10-21 20:50:00 +00:00
<label id="notelabel" for="note" class="pt-4">Note (optional):</label>
2021-10-15 14:08:27 +00:00
<input id="kind" name="kind" value="" hidden>
2021-10-29 16:57:50 +00:00
<textarea id="note" maxlength="200" name="note" class="form-control" placeholder="Note to include in award notification..."></textarea>
2021-12-01 03:59:45 +00:00
<div class="flex justify-end space-x-2 border-t border-gray-300 p-4">
<input id="giveaward" class="btn btn-primary" style="float:right" type="submit" value="Give Award" disabled>
</div>
2021-10-15 14:08:27 +00:00
</form>
</div>
</div>
</div>
</div>
2021-11-30 18:03:48 +00:00
<script defer src="/assets/js/award_modal.js?v=57"></script>
2021-11-30 17:32:52 +00:00
2021-10-15 14:08:27 +00:00
<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;
}
2021-10-27 00:37:34 +00:00
.awards-wrapper a:hover:not(.disabled), .awards-wrapper .picked {
2021-10-15 14:08:27 +00:00
background-color: var(--primary)!important;
}
.awards-wrapper input[type="radio"]:checked+a {
background-color: var(--primary)!important;
}
2021-10-21 14:47:27 +00:00
.award-columns {
column-count: 2;
}
2021-10-15 14:08:27 +00:00
@media (min-width: 767.98px) {
.award-columns {
2021-11-23 22:36:38 +00:00
column-count: 9 !important;
2021-10-15 14:08:27 +00:00
}
}
2021-09-17 14:01:47 +00:00
</style>