updated ticket view to remove table, and introduce flex rows. bulma sass used to implement .ticket-item class. npm used to add css compilation

.gitignore

@@ -1,8 +1,11 @@
 composer.lock
+package-lock.json
 lib/
 downloads/
 public/tmp/
 storage/
 public/test.php
 app/config/.env.cfg
-app/.env.cfg
+app/.env.cfg
+app/config/tp_servicedesk.sql
+node_modules

package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "bulma": "^1.0.3"
+  },
+  "scripts": {
+    "sass": "sass scss/main.scss public/css/main.css",
+    "sass:min": "sass scss/main.scss public/css/main.min.css --style compressed",
+    "sass:watch": "sass --watch scss/main.scss:public/css/main.css"
+  }
+}

public/style.css

@@ -8,6 +8,8 @@ i.fa { font-weight: 100 !important ; }
 
 .table th.th-icon { width: 2rem; }
 
+#ticket_list .g-flex-item { border-bottom: 1px solid var(--bulma-text-soft); }
+
 /* List Component */
 .list{
     --be-list-color:var(--bulma-text);

scss/components/_ticket-item.scss

@@ -0,0 +1,59 @@
+@use "../vendor/bulma";
+
+.ticket-item {
+  @extend .is-flex;
+  @extend .mb-1;
+  @extend .pt-1;
+  @extend .pb-2;
+  @extend .is-align-items-flex-start;
+  border-bottom: 1px solid var(--bulma-text-90);
+
+  .ticket-icon {
+    @extend .mr-2;
+    display: flex;
+    align-items: baseline;
+
+    .checkbox {
+      margin-right: 0.5rem;
+    }
+  }
+
+  .ticket-content {
+    @extend .is-flex;
+    @extend .is-flex-direction-column;
+    @extend .is-flex-grow-1;
+    align-self: baseline;
+
+    .ticket-header {
+      @extend .is-flex;
+      @extend .is-justify-content-flex-start;
+      @extend .is-flex-wrap-wrap;
+      align-items: center;
+
+      .ticket-title {
+        @extend .title;
+        @extend .is-5;
+        @extend .mb-1;
+        font-weight: normal;
+      }
+
+      .tags {
+        @extend .ml-2;
+      }
+    }
+
+    .ticket-meta {
+      @extend .is-flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+
+      p {
+        @extend .subtitle;
+        @extend .is-6;
+        font-weight: 300;
+        margin: 0;
+      }
+    }
+  }
+}

scss/main.scss

@@ -0,0 +1,5 @@
+// import bulma
+@use "vendor/bulma";
+
+// import custom components
+@use "components/ticket-item";

scss/vendor/_bulma-tools.scss

@@ -0,0 +1,3 @@
+@use "../../node_modules/bulma/sass/utilities/" as bulma-utils;
+@use "../../node_modules/bulma/sass/helpers/" as bulma-helpers;
+@use "../../node_modules/bulma/sass/elements/" as bulma-elements;

scss/vendor/_bulma.scss

@@ -0,0 +1 @@
+@forward "../../node_modules/bulma/bulma";

ui/partials/ticket_item.html

@@ -0,0 +1,34 @@
+<div class="ticket-item">
+    <div class="ticket-icon">
+      <div class="field">
+        <label class="b-checkbox checkbox">
+          <input type="checkbox" value="false" />
+          <span class="check"></span>
+          <span class="control-label"></span>
+        </label>
+      </div>
+      
+      <span class="icon is-medium"><icons type="status">{{@ticket.status_name}}</icons></span>
+    </div>
+    <div class="ticket-content">
+      <div class="ticket-header">
+        <span class="ticket-title">
+          <a href="/ticket/{{ @ticket.id }}">{{ @ticket.title }}</a>
+        </span>
+        <div class="tags">
+          <div class="tags ml-2">
+            <!-- TODO: get tags -->
+            <span class="tag is-link">tag</span>
+          </div>
+          <?php /*
+          <repeat group="{{ @ticket.tags }}" value="{{ @tag }}">
+            <span class="tag is-link">{{ @tag }}</span>
+          </repeat>
+          */ ?>
+        </div>
+      </div>
+      <div class="ticket-meta">
+        <p>#{{ @ticket.id }} opened {{ @ticket.created_at }} by {{ @ticket.display_name }}</p>
+      </div>
+    </div>
+  </div>

ui/templates/layout.html

@@ -5,14 +5,16 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>TP ServiceDesk</title>
+  <link rel="stylesheet" href="/style.css">
+  <link rel="stylesheet" href="/css/main.min.css">
   <!-- bulma.io-->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
+  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> -->
   <!-- bulma helpers -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma-helpers/0.4.3/css/bulma-helpers.min.css"
     integrity="sha512-U6ELnUi7oqVEjkLmFw5r5UR5LEtvpImS/jUykBKneVhD0lxZxfJZ3k3pe003ktrtNZYungd9u3Urp2X09wKwXg=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <link rel="stylesheet" href="/style.css">
+  <!-- bulma-checkbox -->  
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-checkradio@2.1/dist/css/bulma-checkradio.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-checkbox@1.2.1/css/main.min.css" integrity="sha256-wvxLpriInkhouxrLZ5oo74cJpCtZJkR9bRJwFDvdd4w=" crossorigin="anonymous">
   <!-- font awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
     integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="

ui/views/ticket/index.html

@@ -1,34 +1,38 @@
 <h1 class="title">Tickets</h1>
-<include href="/ui/session/error.html">
+<include href="/ui/session/error.html"></include>
-<p><a class="button" href="/ticket/create">create ticket</a></p>
+</include>
+<!-- updated design -- inspiration gitea -->
+<div class="field is-grouped">
+    <div class="control is-expanded">
+        <div class="field has-addons is-expanded">
+            <div class="control is-expanded">
+            <input class="input" type="text" placeholder="Find a ticket">
+            </div>
+            <div class="control">
+            <button class="button is-info"><span class="icon"><i class="fas fa-magnifying-glass"></i></span></button>
+            </div>
+        </div>
+    </div>
+<div class="field">
+    <div class="control">
+        <p><a class="button is-primary" href="/ticket/create">create ticket</a></p>
+    </div>
+</div>
+</div>
 <hr>
 
-<table class="table is-fullwidth is-bordered">
+<div id="ticket_list">
-    <thead>
+    <repeat group="{{@tickets}}" value="{{@ticket}}">
-        <tr class="has-background-warning">
+        <include href="/ui/partials/ticket_item.html"></include>
-            <th>id</th><th>title</th>
+    </repeat>
-            <th>status</th><th>priority</th><th>created_at</th>
+</div>
-            <th></th>
-        </tr>
-    </thead>
 
-    <tbody>
+<?php
-        <repeat group="{{@tickets}}" value="{{@ticket}}">
+/*
-            <tr>
+<div id="ticket_list">
-                <td>{{@ticket.id}}</td>
+    <repeat group="{{@tickets}}" value="{{@ticket}}">
-                <td><a href="/ticket/{{@ticket.id}}">{{@ticket.title}}</a></td>
+        <include href="/ui/views/ticket/index_row.html"></include>
-                <td><icons type="status">{{@ticket.status_name}}</icons></td>
+    </repeat>
-                <td><icons type="priority">{{@ticket.priority_name}}</icons></td>
+</div>
-                <td>{{@ticket.created_at}}</td>
+*/
-                <td>
+?>
-                    <a class="button is-link is-small" href="/ticket/{{@ticket.id}}/edit">
-                        <i class="fa fa-edit"></i></a>
-                    <a class="button is-danger is-small" 
-                        href="/ticket/{{@ticket.id}}/delete" 
-                        onclick="return confirm('Are you sure you want to delete this ticket?');">
-                        <i class="fa fa-trash-can"></i></a>
-                </td>
-            </tr>
-        </repeat>
-    </tbody>
-</table>

ui/views/ticket/index_row.html

@@ -0,0 +1,20 @@
+<div class="g-flex-item is-flex is-align-items-flex-start mb-1 pt-1 pb-2">
+    <div class="g-flex-item-icon is-align-self-baseline mr-2">
+        <label class="checkbox mr-2"><input type="checkbox"></label>
+        <span class="icon is-medium"><icons type="status">{{@ticket.status_name}}</icons></span>
+    </div>
+    <div class="g-flex-item-main is-flex is-flex-direction-column is-flex-grow-1 is-align-self-baseline">
+        <div class="g-flex-item-header is-flex is-justify-content-flex-start is-flex-wrap-wrap">
+            <div class="">
+                <span class="title is-5 has-text-weight-normal"><a href="/ticket/{{@ticket.id}}">{{@ticket.title}}</a></span>
+            </div>
+            <div class="tags ml-2">
+                <!-- TODO: get tags -->
+                <span class="tag is-link">tag</span>
+            </div>
+        </div>
+        <div class="g-flex-item-body is-flex is-align-items-centre flex-wrap gap ">
+            <p class="subtitle is-6 has-text-weight-light">#{{@ticket.id}} opened 2025-03-25 by {{@ticket.display_name}}</p>
+        </div>
+    </div>
+</div>

ui/views/ticket/view.html

@@ -1,6 +1,12 @@
 <!-- Ticket - View -->
-<h1 class="title">{{ @ticket.title }}</h1>
+<div class="is-flex">
-<p><a href="/ticket/{{ @ticket.id}}/edit">edit ticket</a></p>
+    <h1 class="title is-flex-grow-1">{{ @ticket.title }}</h1>
+    <div class="field is-grouped">
+        <p class="control"><a class="button" href="/ticket/{{ @ticket.id}}/edit">edit ticket</a></p>
+        <p class="control"><a class="button is-primary" href="/ticket/create">new ticket</a></p>
+    </div>
+</div>
+
 <hr>
 
 <div class="content">