corbz/ticket-website
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Sidebar layout change + loading placeholder

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-01-16 23:54:01 +00:00
parent 2d0b8762b0
commit c7a185a919
1 changed files with 76 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
apps/templates/home/tickets.html
View File

@ -25,8 +25,8 @@
{% if priorities %}
<li class="nav-item mT-15">
<h6>Priorities</h6>
<li class="nav-item mT-10">
<h6 class="mx-3">Priorities</h6>
</li>
<li id="filterPriorityAll" class="nav-item filter-priority">
@ -63,13 +63,17 @@
{% endif %}
<li class="nav-item">
<hr class="mY-30 border-secondary">
</li>
{% if tags %}
<li class="nav-item mT-15">
<h6 class="peers ai-c jc-sb mb-2">
<li class="nav-item">
<h6 class="peers ai-c jc-sb mb-2 px-3">
<span class="peer-greed">Tags</span>
<div class="dropdown">
<button type="button" class="peer me-3 text-body bg-none border-none" data-bs-toggle="dropdown">
<button type="button" class="peer text-body bg-none border-none" data-bs-toggle="dropdown">
<i class="ti-more-alt"></i>
</button>
<ul class="dropdown-menu">
@ -96,20 +100,6 @@
</div>
</h6>
</li>
<!--
<li class="nav-item">
<label for="" class="nav-link c-grey-800">
<div class="peers ai-c sc-sb">
<div class="peer peer-greed form-switch">
<input type="checkbox" id="" class="form-check-input me-2">
<span></span>
</div>
<div class="peer">
</div>
</div>
</label>
</li> -->
{% for tag in tags %}
@ -131,10 +121,14 @@
{% endif %}
<li class="nav-item">
<hr class="mY-30 border-secondary">
</li>
{% if departments %}
<li class="nav-item mT-15">
<h6>Departments</h6>
<li class="nav-item">
<h6 class="px-3">Departments</h6>
</li>
<li id="filterDepartmentAll" class="nav-item filter-department">
@ -227,16 +221,67 @@
<li>Try using the refresh button</li>
</ul>
</div>
<div class="loading pos-a top-50 start-50 translate-middle">
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow mX-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="loading bgc-grey-50 h-100"> <!-- pos-a top-50 start-50 translate-middle -->
{% for i in "x"|rjust:"3" %}
<div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
<div class="peer mR-10">
<span class="placeholder w-2r h-2r bdrs-50p me-2"></span>
</div>
<div class="peer peer-greed ov-h">
<div class="peers ai-c">
<div class="peer peer-greed">
<span class="placeholder col-5 rounded"></span>
</div>
<div class="peer peer-greed d-flex jc-fe">
<span class="placeholder col-4 rounded"></span>
</div>
</div>
<span class="placeholder rounded col-7 mT-10"></span>
<div class="row">
<span class="col-1"></span>
<span class="placeholder rounded col-7 mT-10"></span>
</div>
</div>
</div>
<div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
<div class="peer mR-10">
<span class="placeholder w-2r h-2r bdrs-50p me-2"></span>
</div>
<div class="peer peer-greed ov-h">
<div class="peers ai-c">
<div class="peer peer-greed">
<span class="placeholder col-6 rounded"></span>
</div>
<div class="peer peer-greed d-flex jc-fe">
<span class="placeholder col-4 rounded"></span>
</div>
</div>
<span class="placeholder rounded col-8 mT-10"></span>
<span class="placeholder rounded col-7 mT-10"></span>
</div>
</div>
<div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
<div class="peer mR-10">
<span class="placeholder w-2r h-2r bdrs-50p me-2"></span>
</div>
<div class="peer peer-greed ov-h">
<div class="peers ai-c">
<div class="peer peer-greed">
<span class="placeholder col-5 rounded"></span>
</div>
<div class="peer peer-greed d-flex jc-fe">
<span class="placeholder col-4 rounded"></span>
</div>
</div>
<div class="row">
<span class="col-1"></span>
<span class="placeholder rounded col-7 mT-10"></span>
</div>
<span class="placeholder rounded col-7 mT-10"></span>
</div>
</div>
{% endfor %}
</div>
</div>