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

Fixed and restyled PerfectScrollbars

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-01-19 10:02:43 +00:00
parent bb28e2b2dc
commit 187153bb7c
2 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/static/css/scrollbar.css
View File

@ -57,7 +57,8 @@
.ps .ps__rail-y:focus, .ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking, .ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking { .ps .ps__rail-y.ps--clicking {
background-color: #eee; /* background-color: #eee; */
background-color: var(--bs-tertiary-bg); /* Custom Change */
opacity: 0.9; opacity: 0.9;
} }
@ -99,6 +100,7 @@
.ps__rail-y:focus > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y { .ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999; background-color: #999;
/* background-color: var(--bs-body); */
width: 11px; width: 11px;
} }

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

@ -13,14 +13,14 @@
<!-- ### $App Screen Content ### --> <!-- ### $App Screen Content ### -->
<main class='main-content'> <main class='main-content'>
<div id='mainContent'> <div id='mainContent'>
<div class="full-container" style="overflow-x: hidden;"> <div class="full-container" style="overflow: hidden;">
<div class="email-app"> <div class="email-app">
<div class="email-side-nav remain-height ov-h"> <div class="email-side-nav remain-height ov-h">
<div class="h-100 layers"> <div class="h-100 layers">
<div class="p-20 bg-body-tertiary layer w-100"> <div class="p-20 bg-body-tertiary layer w-100">
<button type="button" class="btn btn-danger c-white w-100" data-bs-toggle="modal" data-bs-target="#ticketModal">New Ticket</button> <button type="button" class="btn btn-danger c-white w-100" data-bs-toggle="modal" data-bs-target="#ticketModal">New Ticket</button>
</div> </div>
<div class="scrollable pos-r bdT layer w-100 fxg-1 bg-body"> <div class="scrollable pos-r ov-h bdT layer w-100 fxg-1 bg-body">
<ul id="filterSidebar" class="p-20 nav flex-column"> <ul id="filterSidebar" class="p-20 nav flex-column">
{% if priorities %} {% if priorities %}
@ -169,7 +169,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="email-wrapper row remain-height bg-body pos-r scrollable"> <div class="email-wrapper row remain-height bg-body">
<div class="email-list h-100 layers"> <div class="email-list h-100 layers">
<div class="layer w-100"> <div class="layer w-100">
<div class="bg-body-tertiary peers ai-c p-20 fxw-nw"> <div class="bg-body-tertiary peers ai-c p-20 fxw-nw">
@ -210,7 +210,7 @@
</div> </div>
</div> </div>
<div id="ticketsContainer" class="layer w-100 fxg-1 pos-r scrollable"> <div id="ticketsContainer" class="layer w-100 fxg-1 scrollable pos-r ov-h">
<div class="content"></div> <div class="content"></div>
<div class="none-found pos-a top-50 start-50 translate-middle" style="display: none;"> <div class="none-found pos-a top-50 start-50 translate-middle" style="display: none;">
<h6 class="fw-bold">No Tickets Found</h6> <h6 class="fw-bold">No Tickets Found</h6>
@ -287,31 +287,31 @@
</div> </div>
<div class="email-content h-100 bg-body"> <div class="email-content h-100 bg-body">
<div class="h-100 scrollable pos-r"> <div class="h-100 scrollable pos-r">
<div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+"> <div class="bg-body-tertiary peers ai-c jc-sb p-20 fxw-nw d-n@md+">
<div class="peer"> <div class="peer">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p"> <button type="button" class="back-to-mailbox btn bg-body bdrs-2 mR-3">
<i class="ti-angle-left"></i> <i class="ti-angle-left"></i>
</button> </button>
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:reloadCurrentTicket();"> <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:reloadCurrentTicket();">
<i class="fa fa-refresh"></i> <i class="fa fa-refresh"></i>
</button> </button>
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p"> <button type="button" class="btn bg-body bdrs-2 mR-3">
<i class="ti-more-alt"></i> <i class="ti-more-alt"></i>
</button> </button>
</div>
</div> </div>
</div> <div class="peer">
<div class="peer"> <div class="btn-group" role="group">
<div class="btn-group" role="group"> <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:changeTicket(false);">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(false);"> <i class="ti-angle-left"></i>
<i class="ti-angle-left"></i> </button>
</button> <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:changeTicket(true);">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(true);"> <i class="ti-angle-right"></i>
<i class="ti-angle-right"></i> </button>
</button> </div>
</div> </div>
</div> </div>
</div>
<div id="ticketContent" class="email-content-wrapper"> <div id="ticketContent" class="email-content-wrapper">
<div class="content"></div> <div class="content"></div>
<div class="loading" style="display: none;"> <div class="loading" style="display: none;">
@ -450,7 +450,7 @@
</div> </div>
<div class="peer"> <div class="peer">
<small class="ticket-content-datetime"></small> <small class="ticket-content-datetime"></small>
<h5 class="ticket-content-author c-grey-900"></h5> <h5 class="ticket-content-author"></h5>
<div class="ticket-content-badges"></div> <div class="ticket-content-badges"></div>
</div> </div>
</div> </div>