Working on template for listed tickets

apps/static/assets/css/index.css

@@ -11876,7 +11876,7 @@ footer {
     height: 100%;
     transition: all 0.3s ease-in-out;
     max-height: calc(100vh - 65px);
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   .email-app .email-wrapper .email-content.open {
     left: 0;
@@ -69162,4 +69162,30 @@ table.dataTable.no-footer {
 
 .border-none {
     border: none
+}
+
+
+/* Ticket List Items */
+
+.ticket-item {
+    cursor: pointer;
+}
+
+.ticket-item .ticket-item-icon {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.ticket-item .ticket-item-title {
+    font-size: 1rem;
+    text-transform: capitalize;
+}
+
+.ticket-item .ticket-item-desc {
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }

apps/static/assets/js/tickets.js

@@ -248,6 +248,9 @@ function loadAllTickets() {
                         </div>
                     </div>
                 `);
+                var template = $("#ticketItemTemplate").copy();
+                template.find(".ticket-item-icon").attr("src", ticket.author.icon);
+                template.find(".ticket-item-author").text(ticket.author.forename + " " + ticket.author.surname);
 
 
                 $("#ticketsContainer .content").append(item);

apps/templates/home/tickets.html

@@ -422,6 +422,26 @@
         </div>
     </div>
 
+    <template id="ticketItemTemplate">
+        <div class="ticket-list-item peers fxw-nw p-20 bdB bgcH-grey-100" data-uuid="-1">
+            <div class="peer mR-10">
+                <img src="" alt="" class="ticket-item-icon me-2">
+            </div>
+            <div class="peer peer-greed ov-h">
+                <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6 class="ticket-item-author"></h6>
+                    </div>
+                    <div class="peer">
+                        <small class="ticket-item-datetime"></small>
+                    </div>
+                </div>
+                <h5 class="ticket-item-title c-grey-900"></h5>
+                <div class="ticket-item-desc"></div>
+            </div>
+        </div>
+    </template>
+
 {% endblock content %}
 
 {% block javascripts %}