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