Select2 into sub edit modal
This commit is contained in:
parent
a68b33fc56
commit
b54da4883a
@ -1,6 +1,6 @@
|
||||
|
||||
/* modal tabs */
|
||||
.modal-tabs {
|
||||
/* .modal-tabs {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
@ -15,4 +15,18 @@
|
||||
|
||||
.modal-tabs .nav-link:last-child {
|
||||
margin-right: 1rem;
|
||||
} */
|
||||
|
||||
.modal-tabs {
|
||||
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link.active {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: 1px solid var(--border-colour);
|
||||
}
|
||||
@ -203,4 +203,19 @@ body {
|
||||
}
|
||||
.draw-border:hover::after {
|
||||
transition-delay: 0s, 0.15s, 0s;
|
||||
}
|
||||
|
||||
/* Select 2 */
|
||||
|
||||
.select2-selection {
|
||||
border: 1px solid var(--border-colour) !important;
|
||||
}
|
||||
|
||||
.select2-selection:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border: 1px solid var(--border-colour) !important;
|
||||
/* box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; */
|
||||
}
|
||||
@ -6,6 +6,7 @@
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="{% static 'css/home/main.css' %}">
|
||||
<link rel="stylesheet" href="{% static '/css/select2-bootstrap.min.css' %}">
|
||||
{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
@ -73,7 +74,7 @@
|
||||
<h3 class="mB-0">Subscriptions</h3>
|
||||
</div>
|
||||
<div class="peer fs-5 fw-bold">
|
||||
<button class="btn bg-body bdrs-2 mR-3 cur-p waves-effect" onclick="subEditModal(-1);">
|
||||
<button class="btn bg-body mR-3 rounded-3 waves-effect bd" onclick="subEditModal(-1);">
|
||||
<i class="bi bi-plus"></i>
|
||||
New Subscription
|
||||
</button>
|
||||
@ -91,12 +92,12 @@
|
||||
|
||||
<div id="subEditModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bdrs-2 bd">
|
||||
<div class="modal-content rounded-3 bd">
|
||||
<div class="modal-header px-4 py-3">
|
||||
<h5 class="modal-title"></h5>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="nav nav-tabs modal-tabs" role="tablist">
|
||||
<div class="nav nav-pills nav-fill modal-tabs px-4 pt-3" role="tablist">
|
||||
<button id="navDetailsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#navDetailsPanel" type="button" role="tab" aria-controls="navDetailsPanel" aria-selected="true">Details</button>
|
||||
<button id="navChannelTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#navChannelPanel" type="button" role="tab" aria-controls="navChannelPanel" aria-selected="true">Channels</button>
|
||||
<button id="navExtrasTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#navExtrasPanel" type="button" role="tab" aria-controls="navExtrasPanel" aria-selected="true">Extras</button>
|
||||
@ -126,7 +127,7 @@
|
||||
<div id="navChannelPanel" class="tab-pane fade" role="tabpanel" aria-labelledby="navChannelTab" tabindex="0">
|
||||
<div class="mb-3">
|
||||
<label for="editSubServer" class="form-label">Server</label>
|
||||
<select name="editSubServer" id="editSubServer" class="form-select border-3 bd" required>
|
||||
<select name="editSubServer" id="editSubServer" class="border-3 bd select-2" data-dropdownparent="#subEditModal" required>
|
||||
<option value="">Select a server</option>
|
||||
</select>
|
||||
<div class="form-help">Ensure that PYRSS Bot is a member of the selected server.</div>
|
||||
@ -134,7 +135,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="editSubChannels">Channels</label>
|
||||
<select name="editSubChannels" id="editSubChannels" class="form-select border-3 bd" required multiple>
|
||||
<select name="editSubChannels" id="editSubChannels" class="border-3 bd select-2" data-dropdownparent="#subEditModal" required multiple>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,11 +149,11 @@
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer px-4 py-3">
|
||||
<button class="btn bg-body-tertiary rounded-3 waves-effect border-0" onclick="submitSubEditModal();">
|
||||
<button class="btn bg-body-tertiary rounded-3 waves-effect bd" onclick="submitSubEditModal();">
|
||||
<i class="bi bi-check me-1`"></i>
|
||||
Submit
|
||||
</button>
|
||||
<button class="btn bg-body-tertiary rounded-3 waves-effect border-0 ms-3" data-bs-dismiss="modal">
|
||||
<button class="btn bg-body-tertiary rounded-3 waves-effect bd ms-3" data-bs-dismiss="modal">
|
||||
<i class="bi bi-x me-1`"></i>
|
||||
Cancel
|
||||
</button>
|
||||
@ -169,21 +170,22 @@
|
||||
<div class="col-md-4 col-xxl-3">
|
||||
<div class="sub-item layers bd bg-body h-100 rounded-3" data-uuid="">
|
||||
<div class="layer w-100">
|
||||
<div class="peers p-4 flex-nowrap">
|
||||
<div class="peers px-4 py-3 flex-nowrap">
|
||||
<div class="peer peer-greed me-4">
|
||||
<h5 class="sub-name"></h5>
|
||||
<span class="sub-uuid"></span>
|
||||
<div class="sub-uuid mb-2"></div>
|
||||
<div class="sub-datetime"></div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<img src="" alt="" class="sub-img rounded-3" width="100" height="100" style="object-fit: cover; ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 p-4 bdT">
|
||||
<p class="sub-desc mb-4"></p>
|
||||
<div class="layer w-100 px-4 pt-3 bdT">
|
||||
<p class="sub-desc mb-2"></p>
|
||||
<a class="sub-rss"></a>
|
||||
</div>
|
||||
<div class="layer w-100 p-4 pt-0 mt-auto">
|
||||
<div class="layer w-100 p-4 mt-auto">
|
||||
<div class="peers text-center fs-5">
|
||||
<div class="peer peer-greed" data-bs-toggle="tooltip" data-bs-title="Channels">
|
||||
<!-- channels -->
|
||||
@ -205,20 +207,18 @@
|
||||
<div class="layer w-100 bdT px-4 py-3">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<div class="form-check form-switch ms-2">
|
||||
<div class="form-check form-switch ms-2 mb-0">
|
||||
<input type="checkbox" class="sub-active form-check-input shadow-none" style="transform: scale(1.5);">
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button class="sub-edit btn bg-body-tertiary waves-effect rounded-3 border-0">
|
||||
<i class="bi bi-pencil me-1"></i>
|
||||
Edit
|
||||
<button class="sub-edit btn bg-body-tertiary waves-effect bd rounded-3 border-0">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="peer ms-3">
|
||||
<button class="sub-delete btn bg-body-tertiary waves-effect rounded-3 border-0">
|
||||
<i class="bi bi-trash3 me-1"></i>
|
||||
Delete
|
||||
<button class="sub-delete btn bg-body-tertiary waves-effect bd rounded-3 border-0">
|
||||
<i class="bi bi-trash3"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -240,6 +240,9 @@
|
||||
template.find(".sub-delete").attr("onclick", `unsubscribe("${data.uuid}");`);
|
||||
template.find('[data-bs-toggle="tooltip"]').tooltip();
|
||||
|
||||
var displayDate = new Date(data.creation_datetime).toISOString().slice(0, 10);
|
||||
template.find(".sub-datetime").text(displayDate);
|
||||
|
||||
if (!data.extra_notes) {
|
||||
template.find(".sub-desc").hide();
|
||||
}
|
||||
|
||||
@ -86,10 +86,18 @@
|
||||
{% block javascripts %}{% endblock javascripts %}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(".select-2").select2({
|
||||
theme: "bootstrap",
|
||||
minimumResultsForSearch: 5
|
||||
});
|
||||
$(".select-2").each(function() {
|
||||
var dropdownParent = $(this).attr("data-dropdownparent");
|
||||
$(this).select2({
|
||||
theme: "bootstrap",
|
||||
minimumResultsForSearch: 5,
|
||||
dropdownParent: dropdownParent
|
||||
})
|
||||
})
|
||||
// $(".select-2").select2({
|
||||
// theme: "bootstrap",
|
||||
// minimumResultsForSearch: 5
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user