External stylesheets & sub modal layout
This commit is contained in:
parent
bf6a50aa34
commit
a68b33fc56
18
apps/static/css/home/main.css
Normal file
18
apps/static/css/home/main.css
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
/* modal tabs */
|
||||
.modal-tabs {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link {
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link:first-child {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link:last-child {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@ -136,4 +136,71 @@ body {
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--border-colour);
|
||||
}
|
||||
|
||||
/* Animated Button Borders */
|
||||
|
||||
.draw-border-success:hover {
|
||||
color: var(--bs-success);
|
||||
}
|
||||
.draw-border-success:hover::before, .draw-border-success:hover::after {
|
||||
border-color: var(--bs-success);
|
||||
}
|
||||
|
||||
.draw-border-primary:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
.draw-border-primary:hover::before, .draw-border-primary:hover::after {
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.draw-border-secondary:hover {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
.draw-border-secondary:hover::before, .draw-border-secondary:hover::after {
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.draw-border-danger:hover {
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
.draw-border-danger:hover::before, .draw-border-danger:hover::after {
|
||||
border-color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.draw-border {
|
||||
box-shadow: inset 0 0 0 1px var(--border-colour);
|
||||
color: var(--bs-body-color);
|
||||
transition: color 0.15s 0.0833333333s;
|
||||
position: relative;
|
||||
}
|
||||
.draw-border::before, .draw-border::after {
|
||||
border: 0 solid transparent;
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.draw-border::before {
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.draw-border::after {
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.draw-border:hover::before, .draw-border:hover::after {
|
||||
transition: border-color 0s, width 0.15s, height 0.15s;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.draw-border:hover::before {
|
||||
transition-delay: 0s, 0s, 0.15s;
|
||||
}
|
||||
.draw-border:hover::after {
|
||||
transition-delay: 0s, 0.15s, 0s;
|
||||
}
|
||||
@ -5,93 +5,7 @@
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}
|
||||
<style>
|
||||
|
||||
.draw-border-success:hover {
|
||||
color: var(--bs-success);
|
||||
}
|
||||
.draw-border-success:hover::before, .draw-border-success:hover::after {
|
||||
border-color: var(--bs-success);
|
||||
}
|
||||
|
||||
.draw-border-primary:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
.draw-border-primary:hover::before, .draw-border-primary:hover::after {
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.draw-border-secondary:hover {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
.draw-border-secondary:hover::before, .draw-border-secondary:hover::after {
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.draw-border-danger:hover {
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
.draw-border-danger:hover::before, .draw-border-danger:hover::after {
|
||||
border-color: var(--bs-danger);
|
||||
}
|
||||
|
||||
|
||||
.draw-border {
|
||||
box-shadow: inset 0 0 0 1px var(--border-colour);
|
||||
color: var(--bs-body-color);
|
||||
transition: color 0.15s 0.0833333333s;
|
||||
position: relative;
|
||||
}
|
||||
.draw-border::before, .draw-border::after {
|
||||
border: 0 solid transparent;
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.draw-border::before {
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.draw-border::after {
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.draw-border:hover::before, .draw-border:hover::after {
|
||||
transition: border-color 0s, width 0.15s, height 0.15s;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.draw-border:hover::before {
|
||||
transition-delay: 0s, 0s, 0.15s;
|
||||
}
|
||||
.draw-border:hover::after {
|
||||
transition-delay: 0s, 0.15s, 0s;
|
||||
}
|
||||
|
||||
/* modal tabs */
|
||||
.modal-tabs {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link {
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link:first-child {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.modal-tabs .nav-link:last-child {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="{% static 'css/home/main.css' %}">
|
||||
{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
@ -159,7 +73,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 draw-border draw-border-success" onclick="subEditModal(-1);">
|
||||
<button class="btn bg-body bdrs-2 mR-3 cur-p waves-effect" onclick="subEditModal(-1);">
|
||||
<i class="bi bi-plus"></i>
|
||||
New Subscription
|
||||
</button>
|
||||
@ -178,7 +92,7 @@
|
||||
<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-header">
|
||||
<div class="modal-header px-4 py-3">
|
||||
<h5 class="modal-title"></h5>
|
||||
</div>
|
||||
<nav>
|
||||
@ -188,23 +102,23 @@
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body px-4 py-3">
|
||||
<form id="subEditForm" class="needs-validation" novalidate>
|
||||
<div class="tab-content">
|
||||
<div id="navDetailsPanel" class="tab-pane fade" role="tabpanel" aria-labelledby="navDetailsTab" tabindex="0">
|
||||
<div class="mb-3">
|
||||
<label for="editSubName" class="form-label">Name</label>
|
||||
<input type="text" name="editSubName" id="editSubName" class="form-control bdrs-2 bd" required maxlength="32">
|
||||
<input type="text" name="editSubName" id="editSubName" class="form-control border-3 bd" required maxlength="32">
|
||||
<div class="invalid-feedback">Required, Maximum of 32 Characters.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editSubURL" class="form-label">URL</label>
|
||||
<input type="url" name="editSubURL" id="editSubURL" class="form-control bdrs-2 bd" required>
|
||||
<input type="url" name="editSubURL" id="editSubURL" class="form-control border-3 bd" required>
|
||||
<div class="invalid-feedback">Please Enter a Valid URL.</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="editSubImage" class="form-label">Image</label>
|
||||
<input type="file" name="editSubImage" id="editSubImage" class="form-control bdrs-2 bd">
|
||||
<input type="file" name="editSubImage" id="editSubImage" class="form-control border-3 bd">
|
||||
<div class="form-text">Optional</div>
|
||||
<div class="invalid-feedback">This Image Is Invalid.</div>
|
||||
</div>
|
||||
@ -212,7 +126,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 bdrs-2 bd" required>
|
||||
<select name="editSubServer" id="editSubServer" class="form-select border-3 bd" required>
|
||||
<option value="">Select a server</option>
|
||||
</select>
|
||||
<div class="form-help">Ensure that PYRSS Bot is a member of the selected server.</div>
|
||||
@ -220,7 +134,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="editSubChannels">Channels</label>
|
||||
<select name="editSubChannels" id="editSubChannels" class="form-select bdrs-2 bd" required multiple>
|
||||
<select name="editSubChannels" id="editSubChannels" class="form-select border-3 bd" required multiple>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -233,12 +147,12 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn bg-body-tertiary bdrs-2 cur-p draw-border draw-border-success" onclick="submitSubEditModal();">
|
||||
<div class="modal-footer px-4 py-3">
|
||||
<button class="btn bg-body-tertiary rounded-3 waves-effect border-0" onclick="submitSubEditModal();">
|
||||
<i class="bi bi-check me-1`"></i>
|
||||
Submit
|
||||
</button>
|
||||
<button class="btn bg-body-tertiary bdrs-2 cur-p draw-border draw-border-secondary" data-bs-dismiss="modal">
|
||||
<button class="btn bg-body-tertiary rounded-3 waves-effect border-0 ms-3" data-bs-dismiss="modal">
|
||||
<i class="bi bi-x me-1`"></i>
|
||||
Cancel
|
||||
</button>
|
||||
@ -261,7 +175,7 @@
|
||||
<span class="sub-uuid"></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<img src="" alt="" class="sub-img rounded-3" width="100" height="100" style="object-fit: contain; ">
|
||||
<img src="" alt="" class="sub-img rounded-3" width="100" height="100" style="object-fit: cover; ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -271,38 +185,38 @@
|
||||
</div>
|
||||
<div class="layer w-100 p-4 pt-0 mt-auto">
|
||||
<div class="peers text-center fs-5">
|
||||
<div class="peer peer-greed" title="todo: amount of channels">
|
||||
<div class="peer peer-greed" data-bs-toggle="tooltip" data-bs-title="Channels">
|
||||
<!-- channels -->
|
||||
<i class="bi bi-hash me-1"></i>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div class="peer peer-greed" title="todo: amount of processed content">
|
||||
<div class="peer peer-greed" data-bs-toggle="tooltip" data-bs-title="Tracked Items">
|
||||
<!-- tracked -->
|
||||
<i class="bi bi-search me-1"></i>
|
||||
<span>0</span>
|
||||
</div>
|
||||
<div class="peer peer-greed" title="todo: amount of assigned filters">
|
||||
<div class="peer peer-greed" data-bs-toggle="tooltip" data-bs-title="Filters">
|
||||
<!-- filtered words -->
|
||||
<i class="bi bi-filter me-1"></i>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 bdT p-4">
|
||||
<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">
|
||||
<input type="checkbox" name="" id="" class="form-check-input" style="transform: scale(1.5);">
|
||||
<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 rounded-3">
|
||||
<button class="sub-edit btn bg-body-tertiary waves-effect rounded-3 border-0">
|
||||
<i class="bi bi-pencil me-1"></i>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<div class="peer ms-3">
|
||||
<button class="sub-delete btn bg-body-tertiary rounded-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>
|
||||
@ -324,11 +238,20 @@
|
||||
template.find(".sub-desc").text(data.extra_notes);
|
||||
template.find(".sub-edit").attr("onclick", `subEditModal("${data.uuid}");`);
|
||||
template.find(".sub-delete").attr("onclick", `unsubscribe("${data.uuid}");`);
|
||||
template.find('[data-bs-toggle="tooltip"]').tooltip();
|
||||
|
||||
if (!data.extra_notes) {
|
||||
template.find(".sub-desc").hide();
|
||||
}
|
||||
|
||||
template.find(".sub-active").prop("checked", data.active).change(function() {
|
||||
alert(JSON.stringify(data, null, 4));
|
||||
getSubscription(data.uuid).then(function(resp) {
|
||||
resp.active = $().prop("checked")
|
||||
editSubscription(resp.uuid, resp)
|
||||
});
|
||||
});
|
||||
|
||||
return template
|
||||
}
|
||||
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
|
||||
<script src="{% static '/js/perfectscrollbar.js' %}"></script>
|
||||
|
||||
<script src="{% static 'js/wavebtn.js' %}"></script>
|
||||
|
||||
<script src="{% static '/js/index.js' %}"></script>
|
||||
|
||||
<script src="{% static '/js/base.js' %}"></script>
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
<link type="text/css" rel="stylesheet" href="{% static '/css/adminator.css' %}" />
|
||||
<link type="text/css" rel="stylesheet" href="{% static '/css/jquery.dataTables.min.css' %}" />
|
||||
<link type="text/css" rel="stylesheet" href="{% static '/css/select2.min.css' %}" />
|
||||
<link type="text/css" rel="stylesheet" href="{% static '/css/wavebtn.css' %}">
|
||||
<link type="text/css" rel="stylesheet" href="{% static '/css/index.css' %}" />
|
||||
|
||||
<!-- Specific Page CSS goes HERE -->
|
||||
@ -87,7 +88,7 @@
|
||||
$(document).ready(function() {
|
||||
$(".select-2").select2({
|
||||
theme: "bootstrap",
|
||||
minimumResultsForSearch: -1
|
||||
minimumResultsForSearch: 5
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user