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 %} {% if priorities %}
<li class="nav-item mT-15"> <li class="nav-item mT-10">
<h6>Priorities</h6> <h6 class="mx-3">Priorities</h6>
</li> </li>
<li id="filterPriorityAll" class="nav-item filter-priority"> <li id="filterPriorityAll" class="nav-item filter-priority">
@ -63,13 +63,17 @@
{% endif %} {% endif %}
<li class="nav-item">
<hr class="mY-30 border-secondary">
</li>
{% if tags %} {% if tags %}
<li class="nav-item mT-15"> <li class="nav-item">
<h6 class="peers ai-c jc-sb mb-2"> <h6 class="peers ai-c jc-sb mb-2 px-3">
<span class="peer-greed">Tags</span> <span class="peer-greed">Tags</span>
<div class="dropdown"> <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> <i class="ti-more-alt"></i>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@ -96,20 +100,6 @@
</div> </div>
</h6> </h6>
</li> </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 %} {% for tag in tags %}
@ -131,10 +121,14 @@
{% endif %} {% endif %}
<li class="nav-item">
<hr class="mY-30 border-secondary">
</li>
{% if departments %} {% if departments %}
<li class="nav-item mT-15"> <li class="nav-item">
<h6>Departments</h6> <h6 class="px-3">Departments</h6>
</li> </li>
<li id="filterDepartmentAll" class="nav-item filter-department"> <li id="filterDepartmentAll" class="nav-item filter-department">
@ -227,16 +221,67 @@
<li>Try using the refresh button</li> <li>Try using the refresh button</li>
</ul> </ul>
</div> </div>
<div class="loading pos-a top-50 start-50 translate-middle"> <div class="loading bgc-grey-50 h-100"> <!-- pos-a top-50 start-50 translate-middle -->
<div class="spinner-grow" role="status"> {% for i in "x"|rjust:"3" %}
<span class="visually-hidden">Loading...</span> <div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
</div> <div class="peer mR-10">
<div class="spinner-grow mX-5" role="status"> <span class="placeholder w-2r h-2r bdrs-50p me-2"></span>
<span class="visually-hidden">Loading...</span> </div>
</div> <div class="peer peer-greed ov-h">
<div class="spinner-grow" role="status"> <div class="peers ai-c">
<span class="visually-hidden">Loading...</span> <div class="peer peer-greed">
</div> <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>
</div> </div>