updated ticket view to remove table, and introduce flex rows. bulma sass used to implement .ticket-item class. npm used to add css compilation
This commit is contained in:
parent
bd9ddfb0d2
commit
a32d12f4de
5
.gitignore
vendored
5
.gitignore
vendored
@ -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
|
||||
|
||||
10
package.json
Normal file
10
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
21605
public/css/main.css
Normal file
21605
public/css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
1
public/css/main.css.map
Normal file
1
public/css/main.css.map
Normal file
File diff suppressed because one or more lines are too long
1
public/css/main.min.css
vendored
Normal file
1
public/css/main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/css/main.min.css.map
Normal file
1
public/css/main.min.css.map
Normal file
File diff suppressed because one or more lines are too long
@ -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);
|
||||
|
||||
59
scss/components/_ticket-item.scss
Normal file
59
scss/components/_ticket-item.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
scss/main.scss
Normal file
5
scss/main.scss
Normal file
@ -0,0 +1,5 @@
|
||||
// import bulma
|
||||
@use "vendor/bulma";
|
||||
|
||||
// import custom components
|
||||
@use "components/ticket-item";
|
||||
3
scss/vendor/_bulma-tools.scss
vendored
Normal file
3
scss/vendor/_bulma-tools.scss
vendored
Normal file
@ -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;
|
||||
1
scss/vendor/_bulma.scss
vendored
Normal file
1
scss/vendor/_bulma.scss
vendored
Normal file
@ -0,0 +1 @@
|
||||
@forward "../../node_modules/bulma/bulma";
|
||||
34
ui/partials/ticket_item.html
Normal file
34
ui/partials/ticket_item.html
Normal file
@ -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>
|
||||
@ -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">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-checkradio@2.1/dist/css/bulma-checkradio.min.css">
|
||||
<!-- bulma-checkbox -->
|
||||
<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=="
|
||||
|
||||
@ -1,34 +1,38 @@
|
||||
<h1 class="title">Tickets</h1>
|
||||
<include href="/ui/session/error.html">
|
||||
<p><a class="button" href="/ticket/create">create ticket</a></p>
|
||||
<include href="/ui/session/error.html"></include>
|
||||
</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">
|
||||
<thead>
|
||||
<tr class="has-background-warning">
|
||||
<th>id</th><th>title</th>
|
||||
<th>status</th><th>priority</th><th>created_at</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div id="ticket_list">
|
||||
<repeat group="{{@tickets}}" value="{{@ticket}}">
|
||||
<include href="/ui/partials/ticket_item.html"></include>
|
||||
</repeat>
|
||||
</div>
|
||||
|
||||
<tbody>
|
||||
<repeat group="{{@tickets}}" value="{{@ticket}}">
|
||||
<tr>
|
||||
<td>{{@ticket.id}}</td>
|
||||
<td><a href="/ticket/{{@ticket.id}}">{{@ticket.title}}</a></td>
|
||||
<td><icons type="status">{{@ticket.status_name}}</icons></td>
|
||||
<td><icons type="priority">{{@ticket.priority_name}}</icons></td>
|
||||
<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>
|
||||
<?php
|
||||
/*
|
||||
<div id="ticket_list">
|
||||
<repeat group="{{@tickets}}" value="{{@ticket}}">
|
||||
<include href="/ui/views/ticket/index_row.html"></include>
|
||||
</repeat>
|
||||
</div>
|
||||
*/
|
||||
?>
|
||||
20
ui/views/ticket/index_row.html
Normal file
20
ui/views/ticket/index_row.html
Normal file
@ -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>
|
||||
@ -1,6 +1,12 @@
|
||||
<!-- Ticket - View -->
|
||||
<h1 class="title">{{ @ticket.title }}</h1>
|
||||
<p><a href="/ticket/{{ @ticket.id}}/edit">edit ticket</a></p>
|
||||
<div class="is-flex">
|
||||
<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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user