testio-tailwind 3.7.0 → 3.9.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 (30) hide show
  1. package/package.json +1 -1
  2. package/src/_includes/page-with-sidebar-dark.njk +48 -0
  3. package/src/_layouts/page-example-agenticqa.njk +1 -1
  4. package/src/assets/images/profilepic_testinator.png +0 -0
  5. package/src/assets/stylesheets/app.css +3 -1
  6. package/src/assets/stylesheets/components/agenticqa/agenticqa_pageheader.css +48 -0
  7. package/src/assets/stylesheets/components/buttons.css +2 -1
  8. package/src/assets/stylesheets/components/chat.css +115 -7
  9. package/src/assets/stylesheets/components/divider.css +3 -0
  10. package/src/assets/stylesheets/components/forms.css +1 -1
  11. package/src/assets/stylesheets/components/layout.css +1 -1
  12. package/src/assets/stylesheets/components/list_item.css +34 -1
  13. package/src/assets/stylesheets/components/lists.css +3 -3
  14. package/src/assets/stylesheets/components/splitview.css +45 -7
  15. package/src/assets/stylesheets/components/tags.css +22 -7
  16. package/src/assets/stylesheets/components/typography.css +1 -1
  17. package/src/assets/stylesheets/components/uploads.css +1 -1
  18. package/src/assets/stylesheets/tailwind_config.css +2 -0
  19. package/src/assets/stylesheets/tailwind_theme_dark.css +3 -2
  20. package/src/pages/agenticqa/chat_collapsable.haml +29 -0
  21. package/src/pages/agenticqa/chat_form.haml +15 -0
  22. package/src/pages/agenticqa/chat_history.haml +24 -0
  23. package/src/pages/agenticqa/chat_messages.haml +53 -0
  24. package/src/pages/agenticqa/index.njk +1 -1
  25. package/src/pages/agenticqa/listitem.haml +42 -0
  26. package/src/pages/agenticqa/pageheader.haml +95 -0
  27. package/src/pages/components/tags.haml +11 -1
  28. package/src/pages/examples/agenticqa.haml +192 -4
  29. package/src/static/app.compiled.css +0 -20627
  30. package/src/static/app.compiled.css.map +0 -1
@@ -0,0 +1,24 @@
1
+ ---
2
+ tags: agenticqa
3
+ title: Chat history
4
+ ---
5
+
6
+ .card.p-card-padding
7
+ %details.chat-history-collapsable
8
+ %summary.chat-history-header
9
+ .chat-history-title Show complete history
10
+ .list-chat-messages.full-width
11
+ .chat-message-item
12
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
13
+ .chat-header
14
+ %span.chat-title.label Justification
15
+ %span.label 5 mins ago
16
+ .chat-message
17
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
18
+ .chat-message-item.your-message
19
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
20
+ .chat-header
21
+ %span.chat-title.label Justification
22
+ %span.label 5 mins ago
23
+ .chat-message
24
+ Here's a short message with bits of lorem ipsum.
@@ -0,0 +1,53 @@
1
+ ---
2
+ tags: agenticqa
3
+ title: Chat messages
4
+ ---
5
+
6
+ .list-chat-messages.full-width
7
+ .chat-message-item
8
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
9
+ .chat-header
10
+ %span.chat-title.label Justification
11
+ %span.label 5 mins ago
12
+ .chat-message
13
+ Here's a short message with bits of lorem ipsum.
14
+ .chat-message-item
15
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
16
+ .chat-header
17
+ %span.chat-title.label Justification
18
+ %span.label 5 mins ago
19
+ .chat-message
20
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
21
+ .chat-message-item.your-message
22
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
23
+ .chat-header
24
+ %span.chat-title.label Justification
25
+ %span.label 5 mins ago
26
+ .chat-message
27
+ Here's a short message with bits of lorem ipsum.
28
+ .chat-message-item.your-message
29
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
30
+ .chat-header
31
+ %span.chat-title.label Justification
32
+ %span.label 5 mins ago
33
+ .chat-message
34
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
35
+ .chat-message-item.collapsable.your-message
36
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
37
+ %details
38
+ %summary.chat-header
39
+ %span.chat-title.label Collapsable message
40
+ %span.label 5 mins ago
41
+ .chat-message
42
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
43
+ .chat-message-item.collapsable
44
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
45
+ %details
46
+ %summary.chat-header
47
+ %span.chat-title.label Collapsable message
48
+ %span.label 5 mins ago
49
+ .chat-message
50
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
51
+ .chat-action-row
52
+ %a.btn.btn-primary.rounded-full re-run check
53
+ %a.btn.btn-secondary.rounded-full update check
@@ -4,4 +4,4 @@ permalink: agenticqa/
4
4
  ---
5
5
 
6
6
  {% set collection = collections.agenticqa %}
7
- {% include "page-with-sidebar-nocode.njk" %}
7
+ {% include "page-with-sidebar-dark.njk" %}
@@ -0,0 +1,42 @@
1
+ ---
2
+ tags: agenticqa
3
+ title: list item
4
+ ---
5
+
6
+ .list-listitems
7
+ %details.listitem
8
+ %summary.listitem-header
9
+ .listitem-badge 1
10
+ .listitem-title List item collapsable
11
+ .listitem-actions
12
+ .btn.collapse-btn
13
+ .listitem-content
14
+ .listitem-subheadline Subheadline
15
+ .listitem-card
16
+ %p Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
17
+ .listitem-subheadline AI Screenshots
18
+ .listitem-attachments
19
+ .attachment
20
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
21
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
22
+ .attachment
23
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
24
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
25
+ %details.listitem
26
+ %summary.listitem-header
27
+ .listitem-badge 2
28
+ .listitem-title List item collapsable
29
+ .listitem-actions
30
+ .btn.collapse-btn
31
+ .listitem-content
32
+ .listitem-subheadline Subheadline
33
+ .listitem-card
34
+ %p Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
35
+ .listitem-subheadline AI Screenshots
36
+ .listitem-attachments
37
+ .attachment
38
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
39
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
40
+ .attachment
41
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
42
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
@@ -0,0 +1,95 @@
1
+ ---
2
+ tags: agenticqa
3
+ title: Pageheader
4
+ ---
5
+
6
+ .page-header
7
+ .card.page-maincard.p-card-padding
8
+ .form-grid
9
+ .form-group
10
+ %label.form-label Input
11
+ %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
12
+ .form-group
13
+ %label.form-label Input
14
+ %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
15
+ .form-group
16
+ %label.form-label Input
17
+ %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
18
+ .form-group
19
+ %label.form-label Input
20
+ %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
21
+ .form-group
22
+ %label.form-label URL of pages for testing
23
+ %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
24
+ .page-actions
25
+ %a.btn.btn-primary.btn-xl{href:""}
26
+ %span.icon.icon-test-running-xl
27
+ Save and run test
28
+ %a.btn.btn-secondary{href:""}
29
+ Save draft
30
+ %a.btn.btn-secondary{href:""}
31
+ Cancel
32
+ .page-header
33
+ .card.page-maincard.p-card-padding
34
+ %h1.text-card-header Session details
35
+ %h2.page-session-title Test Session title
36
+ %dl.page-meta-info
37
+ %dt.label Created on:
38
+ %dd 2025-07-23 19:11 10:45 AM
39
+ %dt.label Last test:
40
+ %dd 2025-07-23 19:11 10:45 AM
41
+ %dt.label ID:
42
+ %dd 321456987
43
+ %dt.label URL:
44
+ %dd.row-testsuite
45
+ %a.label{href:""} Test Suite name
46
+ %dt.label Status:
47
+ %dd.text-white Status
48
+ .page-actions
49
+ %a.btn.btn-primary.btn-main{href:""}
50
+ %span.icon.icon-test-running-xl
51
+ Start test
52
+ .page-header
53
+ .card.page-maincard.p-card-padding
54
+ %h1.text-card-header Session details
55
+ %h2.page-session-title Test Session title
56
+ %dl.page-meta-info
57
+ %dt.label Created on:
58
+ %dd 2025-07-23 19:11 10:45 AM
59
+ %dt.label Last test:
60
+ %dd 2025-07-23 19:11 10:45 AM
61
+ %dt.label ID:
62
+ %dd 321456987
63
+ %dt.label URL:
64
+ %dd.row-testsuite
65
+ %a.label{href:""} Test Suite name
66
+ %dt.label Status:
67
+ %dd.text-white Status
68
+ .page-actions
69
+ %a.btn.btn-primary.btn-main{href:""}
70
+ %span.icon.icon-review-xl
71
+ Show report
72
+ %a.btn.btn-secondary{href:""}
73
+ Re-run all checks
74
+ .page-header
75
+ .card.page-maincard.p-card-padding
76
+ %h1.text-card-header Session details
77
+ %h2.page-session-title Test Session title
78
+ %dl.page-meta-info
79
+ %dt.label Created on:
80
+ %dd 2025-07-23 19:11 10:45 AM
81
+ %dt.label Last test:
82
+ %dd 2025-07-23 19:11 10:45 AM
83
+ %dt.label ID:
84
+ %dd 321456987
85
+ %dt.label URL:
86
+ %dd.row-testsuite
87
+ %a.label{href:""} Test Suite name
88
+ %dt.label Status:
89
+ %dd.text-white Status
90
+ .page-actions
91
+ %a.btn.btn-secondary.btn-main.disabled{href:""}
92
+ %span.icon.icon-review-xl
93
+ Show report
94
+ %a.btn.btn-secondary{href:""}
95
+ Re-run all checks
@@ -10,6 +10,16 @@ title: Tags
10
10
  .tag.teamleader-verified
11
11
  .icon.icon-verify-check.mr-xxs
12
12
  TL
13
+ .list-tags.mt-xs
14
+ .tag.success
15
+ .icon.icon-check-circle
16
+ Success
17
+ .tag.danger
18
+ .icon.icon-cross-circle
19
+ Danger
20
+ .tag.pending
21
+ .icon.icon-sync
22
+ Pending
13
23
  .list-tags.mt-xs
14
24
  %details.popover-wrapper
15
25
  %summary
@@ -23,7 +33,7 @@ title: Tags
23
33
  .btn.btn-sm.btn-inverted Action
24
34
  %details.popover-wrapper
25
35
  %summary
26
- .tag.popover-tag.bg-gray-lighter
36
+ .tag.popover-tag.light
27
37
  .icon.icon-check-thick-centered.text-success
28
38
  Popover-tag
29
39
  .popover-menu.info
@@ -6,6 +6,28 @@ tags: "examples"
6
6
 
7
7
  %main.main-content.centered#ds-splitview-demo
8
8
  .centered-content
9
+ .page-header
10
+ .card.page-maincard.p-card-padding
11
+ %h1.text-card-header Session details
12
+ %h2.page-session-title Test Session title
13
+ %dl.page-meta-info
14
+ %dt.label Created on:
15
+ %dd 2025-07-23 19:11 10:45 AM
16
+ %dt.label Last test:
17
+ %dd 2025-07-23 19:11 10:45 AM
18
+ %dt.label ID:
19
+ %dd 321456987
20
+ %dt.label URL:
21
+ %dd.row-testsuite
22
+ %a.label{href:""} Test Suite name
23
+ %dt.label Status:
24
+ %dd.text-white Status
25
+ .page-actions
26
+ %a.btn.btn-primary.btn-main{href:""}
27
+ %span.icon.icon-review-xl
28
+ Show report
29
+ %a.btn.btn-secondary{href:""}
30
+ Re-run all checks
9
31
  .grid-splitview
10
32
  .card.p-card-padding.splitview-list
11
33
  %nav.nav-tabs
@@ -15,24 +37,190 @@ tags: "examples"
15
37
  %summary.splitview-item.unread
16
38
  .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
17
39
  .splitview-item-text
18
- .splitview-item-title Splitview group title / Test Case title
40
+ .splitview-item-title https://www.bando.com/collections/writing-supplies/products/retro-pen-set
19
41
  .splitview-item-status
20
42
  .text-with-icon
21
43
  .icon.icon-sync
22
44
  executing checks
23
- .splitview-item.selected#ds-splitview-demo-item
45
+ .splitview-item.selected
24
46
  .splitview-item-icon.icon.icon-cross-circle-filled.danger
25
47
  .splitview-item-text Check title
26
48
  .splitview-item.unread
27
49
  .splitview-item-icon.icon.icon-check-circle-filled.success
28
- .splitview-item-text Check title with a lot of lorem ipsum
50
+ .splitview-item-text Check title with an endless amount of really long lorem ipsum
29
51
  .splitview-item.unread
30
52
  .splitview-item-icon.icon.icon-blocked.blocked
31
53
  .splitview-item-text Check title with a lot of lorem ipsum
32
54
  .splitview-item.unread
33
55
  .splitview-item-icon.icon.icon-sync.pending
34
56
  .splitview-item-text Check title with a lot of lorem ipsum
57
+ %details#check_executions_grouped_by_url_79.splitview-group
58
+ %summary.splitview-item
59
+ .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
60
+ .splitview-item-text
61
+ .splitview-item-title https://www.bando.com/collections/writing-supplies/products/retro-pen-set
62
+ %turbo-frame.turbo-wrapper
63
+ %a.splitview-item
64
+ .splitview-item-icon.icon.icon-check-circle-filled.success
65
+ .splitview-item-text Navigation Menu Hover
66
+ %turbo-frame.turbo-wrapper
67
+ %a.splitview-item
68
+ .splitview-item-icon.icon.icon-cross-circle-filled.danger
69
+ .splitview-item-text No Results Message
70
+ %turbo-frame.turbo-wrapper
71
+ %a.splitview-item
72
+ .splitview-item-icon.icon.icon-check-circle-filled.success
73
+ .splitview-item-text Main Product Image
35
74
  .card.p-card-padding.splitview-details
36
75
  .splitview-details-header
37
76
  %h3.splitview-details-title Splitview-details-title
38
-
77
+ .splitview-details-status
78
+ .tag.danger
79
+ .icon.icon-cross-circle
80
+ failed
81
+ .meta-info-row
82
+ .label Run 1
83
+ %dl.list-inline
84
+ %dt.label URL:
85
+ %dd
86
+ %a.label{href:""} https://www.bando.com/collections/writing-supplies/products/retro-pen-set
87
+ .list-chat-messages.full-width
88
+ .chat-message-item.collapsable
89
+ %details
90
+ %summary.chat-header
91
+ %span.chat-title.label Check description
92
+ %span.label last update: 1 days ago
93
+ .chat-message
94
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
95
+ %details.chat-history-collapsable
96
+ %summary.chat-history-header
97
+ .chat-history-title Show complete history
98
+ .list-chat-messages.full-width
99
+ .chat-message-item
100
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
101
+ .chat-header
102
+ %span.chat-title.label Justification
103
+ %span.label 5 mins ago
104
+ .chat-message
105
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
106
+ .chat-message-item.your-message
107
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
108
+ .chat-header
109
+ %span.chat-title.label Justification
110
+ %span.label 5 mins ago
111
+ .chat-message
112
+ Here's a short message with bits of lorem ipsum.
113
+ .chat-message-item
114
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
115
+ .chat-header
116
+ %span.chat-title.label result
117
+ %span.label 5 mins ago
118
+ .chat-message
119
+ .text-with-icon
120
+ .icon.icon-cross-circle.danger
121
+ The check has failed
122
+ .chat-message-item
123
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
124
+ .chat-header
125
+ %span.chat-title.label Justification
126
+ %span.label 5 mins ago
127
+ .chat-message
128
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
129
+ .chat-message-item.your-message
130
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
131
+ .chat-header
132
+ %span.chat-title.label Justification
133
+ %span.label 5 mins ago
134
+ .chat-message
135
+ Here's a short message with bits of lorem ipsum.
136
+ .chat-message-item.collapsable.your-message
137
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
138
+ %details
139
+ %summary.chat-header
140
+ %span.chat-title.label Collapsable message
141
+ %span.label 5 mins ago
142
+ .chat-message
143
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
144
+ .chat-form-row
145
+ %form.chat-form
146
+ %h5.text-card-header.mb-xxs Re-Run this check
147
+ %p.font-light.mb-md Add additional instructions for re-running this check.
148
+ %textarea.form-control{placeholder:"Add your instructions or feedback for Testinator"}
149
+ .form-actions
150
+ %a.btn.btn-primary.rounded-full
151
+ %span.icon.icon-sync.mr-icon-spacing
152
+ re-run check
153
+ %button.btn.btn-secondary.rounded-full Cancel
154
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
155
+ .chat-message-item.collapsable
156
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
157
+ %details
158
+ %summary.chat-header
159
+ %span.chat-title.label Collapsable message
160
+ %span.label 5 mins ago
161
+ .chat-message
162
+ Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
163
+ .chat-action-row
164
+ %a.btn.btn-primary.rounded-full re-run check
165
+ %a.btn.btn-secondary.rounded-full update check
166
+ .divider
167
+ %p.uppercase.font-light.mb-xs Steps
168
+ .list-listitems
169
+ %details.listitem
170
+ %summary.listitem-header
171
+ .listitem-badge 1
172
+ .listitem-title List item collapsable
173
+ .listitem-actions
174
+ .btn.collapse-btn
175
+ .listitem-content
176
+ .listitem-subheadline Subheadline
177
+ .listitem-card
178
+ %p Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
179
+ .listitem-subheadline AI Screenshots
180
+ .listitem-attachments
181
+ .attachment
182
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
183
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
184
+ .attachment
185
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
186
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
187
+ %details.listitem
188
+ %summary.listitem-header
189
+ .listitem-badge 2
190
+ .listitem-title List item collapsable
191
+ .listitem-actions
192
+ .btn.collapse-btn
193
+ .listitem-content
194
+ .listitem-subheadline Subheadline
195
+ .listitem-card
196
+ %p Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
197
+ .listitem-subheadline AI Screenshots
198
+ .listitem-attachments
199
+ .attachment
200
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
201
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
202
+ .attachment
203
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
204
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
205
+ %details.listitem
206
+ %summary.listitem-header
207
+ .listitem-badge 3
208
+ .listitem-title List item collapsable
209
+ .listitem-actions
210
+ .btn.collapse-btn
211
+ .listitem-content
212
+ .listitem-subheadline Subheadline
213
+ .listitem-card
214
+ %p Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
215
+ .listitem-subheadline AI Screenshots
216
+ .listitem-attachments
217
+ .attachment
218
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
219
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
220
+ .attachment
221
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
222
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
223
+ .divider
224
+ %dl.list-inline
225
+ %dt.label Execution ID:
226
+ %dd 123089324580972134