maverick-wave 3.7.0 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.local.json +2 -1
- package/CHANGELOG.md +40 -0
- package/index.html +6 -0
- package/maverick-wave.min.css +5 -1
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +216 -0
- package/src/partials/documentation-container.html +3 -0
- package/src/partials/kanban-container.html +771 -0
- package/src/scss/abstracts/_variables.scss +1 -1
- package/src/scss/components/_buttons.scss +2 -1
- package/src/scss/components/_cards.scss +2 -1
- package/src/scss/components/_index.scss +1 -0
- package/src/scss/components/_kanban.scss +368 -0
- package/maverick-wave.css +0 -8241
- package/maverick-wave.js +0 -587
|
@@ -0,0 +1,771 @@
|
|
|
1
|
+
<h3 class="mw-section-subtitle">Kanban</h3>
|
|
2
|
+
|
|
3
|
+
<div class="mw-grid-1">
|
|
4
|
+
<div class="mw-card mw-card-simple mw-mb-6">
|
|
5
|
+
<h4 class="mw-mb-2">Default Board</h4>
|
|
6
|
+
<p class="mw-text-muted">
|
|
7
|
+
A board is a <code>mw-kanban</code> with one
|
|
8
|
+
<code>mw-kanban-column</code> per status. The board is a grid that gives
|
|
9
|
+
every lane the same width no matter how many there are.
|
|
10
|
+
</p>
|
|
11
|
+
<p class="mw-text-muted">
|
|
12
|
+
A ticket is a plain <code>mw-card</code> with
|
|
13
|
+
<code>mw-kanban-card</code> on top – title, text and a footer
|
|
14
|
+
holding the key, the assignee and four actions: move one lane left or
|
|
15
|
+
right, edit, delete. Its priority is the regular
|
|
16
|
+
<code>mw-card-ribbon</code>, which already brings its colour along through
|
|
17
|
+
<code>mw-card-addon-danger|warning|info</code>; a ticket without a
|
|
18
|
+
priority simply has no ribbon.
|
|
19
|
+
</p>
|
|
20
|
+
<p class="mw-text-muted">
|
|
21
|
+
Lanes are as tall as the fullest one, with
|
|
22
|
+
<code>--mw-kanban-column-min-height</code> as the floor – 120px by
|
|
23
|
+
default, 90px on a compact board. Raise it per board (<code
|
|
24
|
+
>style="--mw-kanban-column-min-height: 280px"</code
|
|
25
|
+
>) so a board that starts out empty still reads as a board.
|
|
26
|
+
</p>
|
|
27
|
+
<p class="mw-text-muted">
|
|
28
|
+
Descriptions are clamped to four lines, two on a compact board, so one
|
|
29
|
+
wordy ticket cannot dwarf the ones next to it.
|
|
30
|
+
</p>
|
|
31
|
+
|
|
32
|
+
<div
|
|
33
|
+
class="mw-kanban"
|
|
34
|
+
data-kanban-prefix="MW"
|
|
35
|
+
style="--mw-kanban-column-min-height: 390px"
|
|
36
|
+
>
|
|
37
|
+
<div class="mw-kanban-column">
|
|
38
|
+
<div class="mw-kanban-column-header">
|
|
39
|
+
<h5 class="mw-kanban-title">Backlog</h5>
|
|
40
|
+
<span class="mw-kanban-count">0</span>
|
|
41
|
+
<button
|
|
42
|
+
type="button"
|
|
43
|
+
class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
|
|
44
|
+
aria-label="Add ticket to Backlog"
|
|
45
|
+
>
|
|
46
|
+
<i class="fas fa-plus"></i>
|
|
47
|
+
</button>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="mw-kanban-column-body">
|
|
51
|
+
<article class="mw-card mw-kanban-card">
|
|
52
|
+
<div class="mw-card-ribbon mw-card-addon-info">Low</div>
|
|
53
|
+
<p class="mw-kanban-card-title">Dark mode for the export dialog</p>
|
|
54
|
+
<p class="mw-kanban-card-text">
|
|
55
|
+
The dialog still renders on a hard white sheet while the rest of
|
|
56
|
+
the app follows the theme. The print stylesheet forces a light
|
|
57
|
+
background on purpose, and that rule leaks into the preview pane
|
|
58
|
+
because both share the same wrapper class. Splitting the two is
|
|
59
|
+
probably enough, but the header and the footer of the dialog need
|
|
60
|
+
checking as well.
|
|
61
|
+
</p>
|
|
62
|
+
<div class="mw-kanban-card-footer">
|
|
63
|
+
<span class="mw-kanban-card-id">MW-104</span>
|
|
64
|
+
<div class="mw-kanban-card-actions">
|
|
65
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">tk</div>
|
|
66
|
+
<button
|
|
67
|
+
type="button"
|
|
68
|
+
class="mw-kanban-action"
|
|
69
|
+
data-kanban-move="-1"
|
|
70
|
+
aria-label="Move MW-104 one lane left"
|
|
71
|
+
>
|
|
72
|
+
<i class="fas fa-chevron-left"></i>
|
|
73
|
+
</button>
|
|
74
|
+
<button
|
|
75
|
+
type="button"
|
|
76
|
+
class="mw-kanban-action"
|
|
77
|
+
data-kanban-move="1"
|
|
78
|
+
aria-label="Move MW-104 one lane right"
|
|
79
|
+
>
|
|
80
|
+
<i class="fas fa-chevron-right"></i>
|
|
81
|
+
</button>
|
|
82
|
+
<button
|
|
83
|
+
type="button"
|
|
84
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
85
|
+
aria-label="Edit MW-104"
|
|
86
|
+
>
|
|
87
|
+
<i class="fas fa-pen"></i>
|
|
88
|
+
</button>
|
|
89
|
+
<button
|
|
90
|
+
type="button"
|
|
91
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
92
|
+
aria-label="Delete MW-104"
|
|
93
|
+
>
|
|
94
|
+
<i class="fas fa-trash"></i>
|
|
95
|
+
</button>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</article>
|
|
99
|
+
|
|
100
|
+
<article class="mw-card mw-kanban-card">
|
|
101
|
+
<p class="mw-kanban-card-title">Evaluate container queries</p>
|
|
102
|
+
<p class="mw-kanban-card-text">
|
|
103
|
+
Spike only – check whether the grid could drop a few
|
|
104
|
+
breakpoints.
|
|
105
|
+
</p>
|
|
106
|
+
<div class="mw-kanban-card-footer">
|
|
107
|
+
<span class="mw-kanban-card-id">MW-103</span>
|
|
108
|
+
<div class="mw-kanban-card-actions">
|
|
109
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">mw</div>
|
|
110
|
+
<button
|
|
111
|
+
type="button"
|
|
112
|
+
class="mw-kanban-action"
|
|
113
|
+
data-kanban-move="-1"
|
|
114
|
+
aria-label="Move MW-103 one lane left"
|
|
115
|
+
>
|
|
116
|
+
<i class="fas fa-chevron-left"></i>
|
|
117
|
+
</button>
|
|
118
|
+
<button
|
|
119
|
+
type="button"
|
|
120
|
+
class="mw-kanban-action"
|
|
121
|
+
data-kanban-move="1"
|
|
122
|
+
aria-label="Move MW-103 one lane right"
|
|
123
|
+
>
|
|
124
|
+
<i class="fas fa-chevron-right"></i>
|
|
125
|
+
</button>
|
|
126
|
+
<button
|
|
127
|
+
type="button"
|
|
128
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
129
|
+
aria-label="Edit MW-103"
|
|
130
|
+
>
|
|
131
|
+
<i class="fas fa-pen"></i>
|
|
132
|
+
</button>
|
|
133
|
+
<button
|
|
134
|
+
type="button"
|
|
135
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
136
|
+
aria-label="Delete MW-103"
|
|
137
|
+
>
|
|
138
|
+
<i class="fas fa-trash"></i>
|
|
139
|
+
</button>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</article>
|
|
143
|
+
|
|
144
|
+
<div class="mw-kanban-empty">No tickets</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<div class="mw-kanban-column">
|
|
149
|
+
<div class="mw-kanban-column-header">
|
|
150
|
+
<h5 class="mw-kanban-title">In Progress</h5>
|
|
151
|
+
<span class="mw-kanban-count">0</span>
|
|
152
|
+
<button
|
|
153
|
+
type="button"
|
|
154
|
+
class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
|
|
155
|
+
aria-label="Add ticket to In Progress"
|
|
156
|
+
>
|
|
157
|
+
<i class="fas fa-plus"></i>
|
|
158
|
+
</button>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class="mw-kanban-column-body">
|
|
162
|
+
<article class="mw-card mw-kanban-card">
|
|
163
|
+
<div class="mw-card-ribbon mw-card-addon-danger">High</div>
|
|
164
|
+
<p class="mw-kanban-card-title">Sticky table header jitters</p>
|
|
165
|
+
<p class="mw-kanban-card-text">
|
|
166
|
+
On Safari the header shifts by a pixel while scrolling. Looks like
|
|
167
|
+
a subpixel rounding issue on the border, since it only shows up at
|
|
168
|
+
zoom levels that are not a multiple of 25 percent. Chrome and
|
|
169
|
+
Firefox are both clean, so a transform-based fix would likely cost
|
|
170
|
+
more than it buys us here.
|
|
171
|
+
</p>
|
|
172
|
+
<div class="mw-kanban-card-footer">
|
|
173
|
+
<span class="mw-kanban-card-id">MW-102</span>
|
|
174
|
+
<div class="mw-kanban-card-actions">
|
|
175
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">jd</div>
|
|
176
|
+
<button
|
|
177
|
+
type="button"
|
|
178
|
+
class="mw-kanban-action"
|
|
179
|
+
data-kanban-move="-1"
|
|
180
|
+
aria-label="Move MW-102 one lane left"
|
|
181
|
+
>
|
|
182
|
+
<i class="fas fa-chevron-left"></i>
|
|
183
|
+
</button>
|
|
184
|
+
<button
|
|
185
|
+
type="button"
|
|
186
|
+
class="mw-kanban-action"
|
|
187
|
+
data-kanban-move="1"
|
|
188
|
+
aria-label="Move MW-102 one lane right"
|
|
189
|
+
>
|
|
190
|
+
<i class="fas fa-chevron-right"></i>
|
|
191
|
+
</button>
|
|
192
|
+
<button
|
|
193
|
+
type="button"
|
|
194
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
195
|
+
aria-label="Edit MW-102"
|
|
196
|
+
>
|
|
197
|
+
<i class="fas fa-pen"></i>
|
|
198
|
+
</button>
|
|
199
|
+
<button
|
|
200
|
+
type="button"
|
|
201
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
202
|
+
aria-label="Delete MW-102"
|
|
203
|
+
>
|
|
204
|
+
<i class="fas fa-trash"></i>
|
|
205
|
+
</button>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
</article>
|
|
209
|
+
|
|
210
|
+
<article class="mw-card mw-kanban-card">
|
|
211
|
+
<div class="mw-card-ribbon mw-card-addon-warning">Medium</div>
|
|
212
|
+
<p class="mw-kanban-card-title">Range input on touch devices</p>
|
|
213
|
+
<p class="mw-kanban-card-text">
|
|
214
|
+
The thumb is too small to grab reliably; the track needs a bigger
|
|
215
|
+
hit area.
|
|
216
|
+
</p>
|
|
217
|
+
<div class="mw-kanban-card-footer">
|
|
218
|
+
<span class="mw-kanban-card-id">MW-101</span>
|
|
219
|
+
<div class="mw-kanban-card-actions">
|
|
220
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">mw</div>
|
|
221
|
+
<button
|
|
222
|
+
type="button"
|
|
223
|
+
class="mw-kanban-action"
|
|
224
|
+
data-kanban-move="-1"
|
|
225
|
+
aria-label="Move MW-101 one lane left"
|
|
226
|
+
>
|
|
227
|
+
<i class="fas fa-chevron-left"></i>
|
|
228
|
+
</button>
|
|
229
|
+
<button
|
|
230
|
+
type="button"
|
|
231
|
+
class="mw-kanban-action"
|
|
232
|
+
data-kanban-move="1"
|
|
233
|
+
aria-label="Move MW-101 one lane right"
|
|
234
|
+
>
|
|
235
|
+
<i class="fas fa-chevron-right"></i>
|
|
236
|
+
</button>
|
|
237
|
+
<button
|
|
238
|
+
type="button"
|
|
239
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
240
|
+
aria-label="Edit MW-101"
|
|
241
|
+
>
|
|
242
|
+
<i class="fas fa-pen"></i>
|
|
243
|
+
</button>
|
|
244
|
+
<button
|
|
245
|
+
type="button"
|
|
246
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
247
|
+
aria-label="Delete MW-101"
|
|
248
|
+
>
|
|
249
|
+
<i class="fas fa-trash"></i>
|
|
250
|
+
</button>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</article>
|
|
254
|
+
|
|
255
|
+
<div class="mw-kanban-empty">No tickets</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div class="mw-kanban-column">
|
|
260
|
+
<div class="mw-kanban-column-header">
|
|
261
|
+
<h5 class="mw-kanban-title">Review</h5>
|
|
262
|
+
<span class="mw-kanban-count">0</span>
|
|
263
|
+
<button
|
|
264
|
+
type="button"
|
|
265
|
+
class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
|
|
266
|
+
aria-label="Add ticket to Review"
|
|
267
|
+
>
|
|
268
|
+
<i class="fas fa-plus"></i>
|
|
269
|
+
</button>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="mw-kanban-column-body">
|
|
273
|
+
<article class="mw-card mw-kanban-card">
|
|
274
|
+
<div class="mw-card-ribbon mw-card-addon-warning">Medium</div>
|
|
275
|
+
<p class="mw-kanban-card-title">Stepper: vertical variant</p>
|
|
276
|
+
<p class="mw-kanban-card-text">
|
|
277
|
+
Draws its own connector line, so the markup stays lighter than the
|
|
278
|
+
horizontal one.
|
|
279
|
+
</p>
|
|
280
|
+
<div class="mw-kanban-card-footer">
|
|
281
|
+
<span class="mw-kanban-card-id">MW-100</span>
|
|
282
|
+
<div class="mw-kanban-card-actions">
|
|
283
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">jd</div>
|
|
284
|
+
<button
|
|
285
|
+
type="button"
|
|
286
|
+
class="mw-kanban-action"
|
|
287
|
+
data-kanban-move="-1"
|
|
288
|
+
aria-label="Move MW-100 one lane left"
|
|
289
|
+
>
|
|
290
|
+
<i class="fas fa-chevron-left"></i>
|
|
291
|
+
</button>
|
|
292
|
+
<button
|
|
293
|
+
type="button"
|
|
294
|
+
class="mw-kanban-action"
|
|
295
|
+
data-kanban-move="1"
|
|
296
|
+
aria-label="Move MW-100 one lane right"
|
|
297
|
+
>
|
|
298
|
+
<i class="fas fa-chevron-right"></i>
|
|
299
|
+
</button>
|
|
300
|
+
<button
|
|
301
|
+
type="button"
|
|
302
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
303
|
+
aria-label="Edit MW-100"
|
|
304
|
+
>
|
|
305
|
+
<i class="fas fa-pen"></i>
|
|
306
|
+
</button>
|
|
307
|
+
<button
|
|
308
|
+
type="button"
|
|
309
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
310
|
+
aria-label="Delete MW-100"
|
|
311
|
+
>
|
|
312
|
+
<i class="fas fa-trash"></i>
|
|
313
|
+
</button>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</article>
|
|
317
|
+
|
|
318
|
+
<div class="mw-kanban-empty">No tickets</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
<div class="mw-kanban-column">
|
|
323
|
+
<div class="mw-kanban-column-header">
|
|
324
|
+
<h5 class="mw-kanban-title">Done</h5>
|
|
325
|
+
<span class="mw-kanban-count">0</span>
|
|
326
|
+
<button
|
|
327
|
+
type="button"
|
|
328
|
+
class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
|
|
329
|
+
aria-label="Add ticket to Done"
|
|
330
|
+
>
|
|
331
|
+
<i class="fas fa-plus"></i>
|
|
332
|
+
</button>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<div class="mw-kanban-column-body">
|
|
336
|
+
<article class="mw-card mw-kanban-card">
|
|
337
|
+
<p class="mw-kanban-card-title">Tooltips no longer clipped</p>
|
|
338
|
+
<p class="mw-kanban-card-text">
|
|
339
|
+
Cards stopped creating a stacking context, so tooltips can escape
|
|
340
|
+
their bounds again.
|
|
341
|
+
</p>
|
|
342
|
+
<div class="mw-kanban-card-footer">
|
|
343
|
+
<span class="mw-kanban-card-id">MW-99</span>
|
|
344
|
+
<div class="mw-kanban-card-actions">
|
|
345
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">mw</div>
|
|
346
|
+
<button
|
|
347
|
+
type="button"
|
|
348
|
+
class="mw-kanban-action"
|
|
349
|
+
data-kanban-move="-1"
|
|
350
|
+
aria-label="Move MW-99 one lane left"
|
|
351
|
+
>
|
|
352
|
+
<i class="fas fa-chevron-left"></i>
|
|
353
|
+
</button>
|
|
354
|
+
<button
|
|
355
|
+
type="button"
|
|
356
|
+
class="mw-kanban-action"
|
|
357
|
+
data-kanban-move="1"
|
|
358
|
+
aria-label="Move MW-99 one lane right"
|
|
359
|
+
>
|
|
360
|
+
<i class="fas fa-chevron-right"></i>
|
|
361
|
+
</button>
|
|
362
|
+
<button
|
|
363
|
+
type="button"
|
|
364
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
365
|
+
aria-label="Edit MW-99"
|
|
366
|
+
>
|
|
367
|
+
<i class="fas fa-pen"></i>
|
|
368
|
+
</button>
|
|
369
|
+
<button
|
|
370
|
+
type="button"
|
|
371
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
372
|
+
aria-label="Delete MW-99"
|
|
373
|
+
>
|
|
374
|
+
<i class="fas fa-trash"></i>
|
|
375
|
+
</button>
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
</article>
|
|
379
|
+
|
|
380
|
+
<div class="mw-kanban-empty">No tickets</div>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
|
|
384
|
+
<form class="mw-kanban-composer">
|
|
385
|
+
<input
|
|
386
|
+
type="text"
|
|
387
|
+
class="mw-input mw-input-sm mw-kanban-composer-title"
|
|
388
|
+
placeholder="What needs to be done?"
|
|
389
|
+
aria-label="Ticket title"
|
|
390
|
+
/>
|
|
391
|
+
<textarea
|
|
392
|
+
class="mw-textarea mw-kanban-composer-text"
|
|
393
|
+
rows="2"
|
|
394
|
+
placeholder="Details (optional)"
|
|
395
|
+
aria-label="Ticket description"
|
|
396
|
+
></textarea>
|
|
397
|
+
<div class="mw-kanban-composer-row">
|
|
398
|
+
<select
|
|
399
|
+
class="mw-select mw-select-sm mw-kanban-composer-priority"
|
|
400
|
+
aria-label="Priority"
|
|
401
|
+
>
|
|
402
|
+
<option value="danger">High</option>
|
|
403
|
+
<option value="warning">Medium</option>
|
|
404
|
+
<option value="info">Low</option>
|
|
405
|
+
<option value="" selected>No priority</option>
|
|
406
|
+
</select>
|
|
407
|
+
<select
|
|
408
|
+
class="mw-select mw-select-sm mw-kanban-composer-assignee"
|
|
409
|
+
aria-label="Assignee"
|
|
410
|
+
>
|
|
411
|
+
<option value="" selected>Unassigned</option>
|
|
412
|
+
<option value="mw">MW</option>
|
|
413
|
+
<option value="jd">JD</option>
|
|
414
|
+
<option value="tk">TK</option>
|
|
415
|
+
</select>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="mw-kanban-composer-actions">
|
|
418
|
+
<button
|
|
419
|
+
type="button"
|
|
420
|
+
class="mw-btn mw-btn-outline mw-btn-sm mw-kanban-composer-cancel"
|
|
421
|
+
>
|
|
422
|
+
Cancel
|
|
423
|
+
</button>
|
|
424
|
+
<button type="submit" class="mw-btn mw-btn-primary mw-btn-sm">
|
|
425
|
+
Save
|
|
426
|
+
</button>
|
|
427
|
+
</div>
|
|
428
|
+
</form>
|
|
429
|
+
|
|
430
|
+
<template class="mw-kanban-card-template">
|
|
431
|
+
<article class="mw-card mw-kanban-card">
|
|
432
|
+
<p class="mw-kanban-card-title">Title</p>
|
|
433
|
+
<p class="mw-kanban-card-text">Text</p>
|
|
434
|
+
<div class="mw-kanban-card-footer">
|
|
435
|
+
<span class="mw-kanban-card-id">MW-0</span>
|
|
436
|
+
<div class="mw-kanban-card-actions">
|
|
437
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">me</div>
|
|
438
|
+
<button
|
|
439
|
+
type="button"
|
|
440
|
+
class="mw-kanban-action"
|
|
441
|
+
data-kanban-move="-1"
|
|
442
|
+
aria-label="Move MW-0 one lane left"
|
|
443
|
+
>
|
|
444
|
+
<i class="fas fa-chevron-left"></i>
|
|
445
|
+
</button>
|
|
446
|
+
<button
|
|
447
|
+
type="button"
|
|
448
|
+
class="mw-kanban-action"
|
|
449
|
+
data-kanban-move="1"
|
|
450
|
+
aria-label="Move MW-0 one lane right"
|
|
451
|
+
>
|
|
452
|
+
<i class="fas fa-chevron-right"></i>
|
|
453
|
+
</button>
|
|
454
|
+
<button
|
|
455
|
+
type="button"
|
|
456
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
457
|
+
aria-label="Edit MW-0"
|
|
458
|
+
>
|
|
459
|
+
<i class="fas fa-pen"></i>
|
|
460
|
+
</button>
|
|
461
|
+
<button
|
|
462
|
+
type="button"
|
|
463
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
464
|
+
aria-label="Delete MW-0"
|
|
465
|
+
>
|
|
466
|
+
<i class="fas fa-trash"></i>
|
|
467
|
+
</button>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
</article>
|
|
471
|
+
</template>
|
|
472
|
+
</div>
|
|
473
|
+
|
|
474
|
+
<p class="mw-text-muted mw-mt-6">
|
|
475
|
+
The JavaScript in this showcase keeps the lane counters up to date and
|
|
476
|
+
wires up the five actions. Everything else is CSS – in an Angular
|
|
477
|
+
app the ticket state lives in the app and the same markup is rendered from
|
|
478
|
+
it.
|
|
479
|
+
</p>
|
|
480
|
+
</div>
|
|
481
|
+
|
|
482
|
+
<div class="mw-card mw-card-simple">
|
|
483
|
+
<h4 class="mw-mb-2">Compact Board</h4>
|
|
484
|
+
<p class="mw-text-muted">
|
|
485
|
+
<code>mw-kanban-compact</code> tightens the padding and clamps the
|
|
486
|
+
description to two lines instead of four – for boards with many
|
|
487
|
+
lanes or a sidebar next to them. Same markup otherwise.
|
|
488
|
+
</p>
|
|
489
|
+
|
|
490
|
+
<div
|
|
491
|
+
class="mw-kanban mw-kanban-compact"
|
|
492
|
+
data-kanban-prefix="OPS"
|
|
493
|
+
style="--mw-kanban-column-min-height: 210px"
|
|
494
|
+
>
|
|
495
|
+
<div class="mw-kanban-column">
|
|
496
|
+
<div class="mw-kanban-column-header">
|
|
497
|
+
<h5 class="mw-kanban-title">Triage</h5>
|
|
498
|
+
<span class="mw-kanban-count">0</span>
|
|
499
|
+
<button
|
|
500
|
+
type="button"
|
|
501
|
+
class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
|
|
502
|
+
aria-label="Add ticket to Triage"
|
|
503
|
+
>
|
|
504
|
+
<i class="fas fa-plus"></i>
|
|
505
|
+
</button>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<div class="mw-kanban-column-body">
|
|
509
|
+
<article class="mw-card mw-kanban-card">
|
|
510
|
+
<div class="mw-card-ribbon mw-card-addon-danger">High</div>
|
|
511
|
+
<p class="mw-kanban-card-title">Certificate expires in four days</p>
|
|
512
|
+
<p class="mw-kanban-card-text">
|
|
513
|
+
Renewal is automated on staging only, production still needs a
|
|
514
|
+
manual run.
|
|
515
|
+
</p>
|
|
516
|
+
<div class="mw-kanban-card-footer">
|
|
517
|
+
<span class="mw-kanban-card-id">OPS-42</span>
|
|
518
|
+
<div class="mw-kanban-card-actions">
|
|
519
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">ops</div>
|
|
520
|
+
<button
|
|
521
|
+
type="button"
|
|
522
|
+
class="mw-kanban-action"
|
|
523
|
+
data-kanban-move="-1"
|
|
524
|
+
aria-label="Move OPS-42 one lane left"
|
|
525
|
+
>
|
|
526
|
+
<i class="fas fa-chevron-left"></i>
|
|
527
|
+
</button>
|
|
528
|
+
<button
|
|
529
|
+
type="button"
|
|
530
|
+
class="mw-kanban-action"
|
|
531
|
+
data-kanban-move="1"
|
|
532
|
+
aria-label="Move OPS-42 one lane right"
|
|
533
|
+
>
|
|
534
|
+
<i class="fas fa-chevron-right"></i>
|
|
535
|
+
</button>
|
|
536
|
+
<button
|
|
537
|
+
type="button"
|
|
538
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
539
|
+
aria-label="Edit OPS-42"
|
|
540
|
+
>
|
|
541
|
+
<i class="fas fa-pen"></i>
|
|
542
|
+
</button>
|
|
543
|
+
<button
|
|
544
|
+
type="button"
|
|
545
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
546
|
+
aria-label="Delete OPS-42"
|
|
547
|
+
>
|
|
548
|
+
<i class="fas fa-trash"></i>
|
|
549
|
+
</button>
|
|
550
|
+
</div>
|
|
551
|
+
</div>
|
|
552
|
+
</article>
|
|
553
|
+
|
|
554
|
+
<div class="mw-kanban-empty">No tickets</div>
|
|
555
|
+
</div>
|
|
556
|
+
</div>
|
|
557
|
+
|
|
558
|
+
<div class="mw-kanban-column">
|
|
559
|
+
<div class="mw-kanban-column-header">
|
|
560
|
+
<h5 class="mw-kanban-title">Scheduled</h5>
|
|
561
|
+
<span class="mw-kanban-count">0</span>
|
|
562
|
+
<button
|
|
563
|
+
type="button"
|
|
564
|
+
class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
|
|
565
|
+
aria-label="Add ticket to Scheduled"
|
|
566
|
+
>
|
|
567
|
+
<i class="fas fa-plus"></i>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
|
|
571
|
+
<div class="mw-kanban-column-body">
|
|
572
|
+
<article class="mw-card mw-kanban-card">
|
|
573
|
+
<div class="mw-card-ribbon mw-card-addon-warning">Medium</div>
|
|
574
|
+
<p class="mw-kanban-card-title">Rotate database credentials</p>
|
|
575
|
+
<p class="mw-kanban-card-text">
|
|
576
|
+
Window is Friday evening, the rollout script is already prepared.
|
|
577
|
+
</p>
|
|
578
|
+
<div class="mw-kanban-card-footer">
|
|
579
|
+
<span class="mw-kanban-card-id">OPS-41</span>
|
|
580
|
+
<div class="mw-kanban-card-actions">
|
|
581
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">mw</div>
|
|
582
|
+
<button
|
|
583
|
+
type="button"
|
|
584
|
+
class="mw-kanban-action"
|
|
585
|
+
data-kanban-move="-1"
|
|
586
|
+
aria-label="Move OPS-41 one lane left"
|
|
587
|
+
>
|
|
588
|
+
<i class="fas fa-chevron-left"></i>
|
|
589
|
+
</button>
|
|
590
|
+
<button
|
|
591
|
+
type="button"
|
|
592
|
+
class="mw-kanban-action"
|
|
593
|
+
data-kanban-move="1"
|
|
594
|
+
aria-label="Move OPS-41 one lane right"
|
|
595
|
+
>
|
|
596
|
+
<i class="fas fa-chevron-right"></i>
|
|
597
|
+
</button>
|
|
598
|
+
<button
|
|
599
|
+
type="button"
|
|
600
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
601
|
+
aria-label="Edit OPS-41"
|
|
602
|
+
>
|
|
603
|
+
<i class="fas fa-pen"></i>
|
|
604
|
+
</button>
|
|
605
|
+
<button
|
|
606
|
+
type="button"
|
|
607
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
608
|
+
aria-label="Delete OPS-41"
|
|
609
|
+
>
|
|
610
|
+
<i class="fas fa-trash"></i>
|
|
611
|
+
</button>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
</article>
|
|
615
|
+
|
|
616
|
+
<div class="mw-kanban-empty">No tickets</div>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<div class="mw-kanban-column">
|
|
621
|
+
<div class="mw-kanban-column-header">
|
|
622
|
+
<h5 class="mw-kanban-title">Resolved</h5>
|
|
623
|
+
<span class="mw-kanban-count">0</span>
|
|
624
|
+
<button
|
|
625
|
+
type="button"
|
|
626
|
+
class="mw-btn mw-btn-secondary mw-btn-sm mw-kanban-add"
|
|
627
|
+
aria-label="Add ticket to Resolved"
|
|
628
|
+
>
|
|
629
|
+
<i class="fas fa-plus"></i>
|
|
630
|
+
</button>
|
|
631
|
+
</div>
|
|
632
|
+
|
|
633
|
+
<div class="mw-kanban-column-body">
|
|
634
|
+
<article class="mw-card mw-kanban-card">
|
|
635
|
+
<div class="mw-card-ribbon mw-card-addon-info">Low</div>
|
|
636
|
+
<p class="mw-kanban-card-title">Log shipping backlog drained</p>
|
|
637
|
+
<p class="mw-kanban-card-text">
|
|
638
|
+
Buffer size was the bottleneck, not the network.
|
|
639
|
+
</p>
|
|
640
|
+
<div class="mw-kanban-card-footer">
|
|
641
|
+
<span class="mw-kanban-card-id">OPS-40</span>
|
|
642
|
+
<div class="mw-kanban-card-actions">
|
|
643
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">ops</div>
|
|
644
|
+
<button
|
|
645
|
+
type="button"
|
|
646
|
+
class="mw-kanban-action"
|
|
647
|
+
data-kanban-move="-1"
|
|
648
|
+
aria-label="Move OPS-40 one lane left"
|
|
649
|
+
>
|
|
650
|
+
<i class="fas fa-chevron-left"></i>
|
|
651
|
+
</button>
|
|
652
|
+
<button
|
|
653
|
+
type="button"
|
|
654
|
+
class="mw-kanban-action"
|
|
655
|
+
data-kanban-move="1"
|
|
656
|
+
aria-label="Move OPS-40 one lane right"
|
|
657
|
+
>
|
|
658
|
+
<i class="fas fa-chevron-right"></i>
|
|
659
|
+
</button>
|
|
660
|
+
<button
|
|
661
|
+
type="button"
|
|
662
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
663
|
+
aria-label="Edit OPS-40"
|
|
664
|
+
>
|
|
665
|
+
<i class="fas fa-pen"></i>
|
|
666
|
+
</button>
|
|
667
|
+
<button
|
|
668
|
+
type="button"
|
|
669
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
670
|
+
aria-label="Delete OPS-40"
|
|
671
|
+
>
|
|
672
|
+
<i class="fas fa-trash"></i>
|
|
673
|
+
</button>
|
|
674
|
+
</div>
|
|
675
|
+
</div>
|
|
676
|
+
</article>
|
|
677
|
+
|
|
678
|
+
<div class="mw-kanban-empty">No tickets</div>
|
|
679
|
+
</div>
|
|
680
|
+
</div>
|
|
681
|
+
|
|
682
|
+
<form class="mw-kanban-composer">
|
|
683
|
+
<input
|
|
684
|
+
type="text"
|
|
685
|
+
class="mw-input mw-input-sm mw-kanban-composer-title"
|
|
686
|
+
placeholder="What needs to be done?"
|
|
687
|
+
aria-label="Ticket title"
|
|
688
|
+
/>
|
|
689
|
+
<textarea
|
|
690
|
+
class="mw-textarea mw-kanban-composer-text"
|
|
691
|
+
rows="2"
|
|
692
|
+
placeholder="Details (optional)"
|
|
693
|
+
aria-label="Ticket description"
|
|
694
|
+
></textarea>
|
|
695
|
+
<div class="mw-kanban-composer-row">
|
|
696
|
+
<select
|
|
697
|
+
class="mw-select mw-select-sm mw-kanban-composer-priority"
|
|
698
|
+
aria-label="Priority"
|
|
699
|
+
>
|
|
700
|
+
<option value="danger">High</option>
|
|
701
|
+
<option value="warning">Medium</option>
|
|
702
|
+
<option value="info">Low</option>
|
|
703
|
+
<option value="" selected>No priority</option>
|
|
704
|
+
</select>
|
|
705
|
+
<select
|
|
706
|
+
class="mw-select mw-select-sm mw-kanban-composer-assignee"
|
|
707
|
+
aria-label="Assignee"
|
|
708
|
+
>
|
|
709
|
+
<option value="" selected>Unassigned</option>
|
|
710
|
+
<option value="ops">OPS</option>
|
|
711
|
+
<option value="mw">MW</option>
|
|
712
|
+
</select>
|
|
713
|
+
</div>
|
|
714
|
+
<div class="mw-kanban-composer-actions">
|
|
715
|
+
<button
|
|
716
|
+
type="button"
|
|
717
|
+
class="mw-btn mw-btn-outline mw-btn-sm mw-kanban-composer-cancel"
|
|
718
|
+
>
|
|
719
|
+
Cancel
|
|
720
|
+
</button>
|
|
721
|
+
<button type="submit" class="mw-btn mw-btn-primary mw-btn-sm">
|
|
722
|
+
Save
|
|
723
|
+
</button>
|
|
724
|
+
</div>
|
|
725
|
+
</form>
|
|
726
|
+
|
|
727
|
+
<template class="mw-kanban-card-template">
|
|
728
|
+
<article class="mw-card mw-kanban-card">
|
|
729
|
+
<p class="mw-kanban-card-title">Title</p>
|
|
730
|
+
<p class="mw-kanban-card-text">Text</p>
|
|
731
|
+
<div class="mw-kanban-card-footer">
|
|
732
|
+
<span class="mw-kanban-card-id">OPS-0</span>
|
|
733
|
+
<div class="mw-kanban-card-actions">
|
|
734
|
+
<div class="mw-avatar mw-avatar-xs mw-avatar-initials">me</div>
|
|
735
|
+
<button
|
|
736
|
+
type="button"
|
|
737
|
+
class="mw-kanban-action"
|
|
738
|
+
data-kanban-move="-1"
|
|
739
|
+
aria-label="Move OPS-0 one lane left"
|
|
740
|
+
>
|
|
741
|
+
<i class="fas fa-chevron-left"></i>
|
|
742
|
+
</button>
|
|
743
|
+
<button
|
|
744
|
+
type="button"
|
|
745
|
+
class="mw-kanban-action"
|
|
746
|
+
data-kanban-move="1"
|
|
747
|
+
aria-label="Move OPS-0 one lane right"
|
|
748
|
+
>
|
|
749
|
+
<i class="fas fa-chevron-right"></i>
|
|
750
|
+
</button>
|
|
751
|
+
<button
|
|
752
|
+
type="button"
|
|
753
|
+
class="mw-kanban-action mw-kanban-edit"
|
|
754
|
+
aria-label="Edit OPS-0"
|
|
755
|
+
>
|
|
756
|
+
<i class="fas fa-pen"></i>
|
|
757
|
+
</button>
|
|
758
|
+
<button
|
|
759
|
+
type="button"
|
|
760
|
+
class="mw-kanban-action mw-kanban-action-danger mw-kanban-delete"
|
|
761
|
+
aria-label="Delete OPS-0"
|
|
762
|
+
>
|
|
763
|
+
<i class="fas fa-trash"></i>
|
|
764
|
+
</button>
|
|
765
|
+
</div>
|
|
766
|
+
</div>
|
|
767
|
+
</article>
|
|
768
|
+
</template>
|
|
769
|
+
</div>
|
|
770
|
+
</div>
|
|
771
|
+
</div>
|