testio-tailwind 0.1.0

package/src/pages/examples/layout-tester.haml

@@ -0,0 +1,106 @@
+---
+layout: page-example-tester.njk
+title: "Layout Tester UI"
+tags: "examples"
+---
+
+%nav.sidebar.tester{arialabel:'Sidebar'}
+  .profilepicture-wrapper
+    %details.profilepicture-actions
+      %summary
+        %img.testerlevel-medal{src:'/assets/images/testerlevel-medals/medal_testerlevel_1_md.png', alt:''}
+        %img.profilepicture{src:'/assets/images/placeholders/profile_supergirl.png', alt:''}
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-cloud-upload.mr-icon-spacing
+          Upload picture
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove.mr-icon-spacing
+          Remove picture
+  .sidebar-title Anja Berger
+  .navlinks
+    %a.navlink.active{href:'#'}
+      %span.icon.icon-home
+      Navlink active
+    %a.navlink{href:'#'}
+      %span.icon.icon-ranking
+      Ranking
+    %a.navlink{href:'#'}
+      .icon-wrapper
+        %span.icon.icon-test
+        %span.icon.icon-circle-sm-filled.recording-icon
+      .text-wrapper
+        .div #123321 Customer
+        .label-sm Test Session active 00:15
+  .banner-install-testnow
+    Install testNow
+    %a.icon.icon-apple.ml-auto{href:'#'}
+    %a.icon.icon-android.ml-xs{href:'#'}
+%header.test-header.tester
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .test-actions
+    %a.btn.btn-recording{href:""}
+      .icon.icon-circle-filled
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%main.main-content.main-content-padding
+  %h1.mb-heading Layout Tester UI
+  %section.section
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+      %p .app-body
+      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header.tester
+      .grid.grid-cols-2-auto-fr.gap-1px
+        .bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar.tester
+        .grid.gap-1px
+          .bg-gray-light.p-xs.pl-md .test-header.tester
+          .grid.grid-cols-2-fr-auto
+            .bg-white.p-xs.pl-md.h-xxl .main-content
+            .bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
+          .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
+    %h5.mt-md HTML structure
+    %code
+      &#60body class=&quotapp-body&quot&#62
+      %br
+      .ml-md &#60header class=&quotheader tester&quot&#62
+      .ml-md &#60nav class=&quotsidebar tester&quot&#62
+      .ml-md &#60header class=&quottest-header tester&quot&#62
+      .ml-md &#60main class=&quotmain-content&quot&#62
+      .ml-md &#60aside class=&quotmetasidebar&quot&#62
+      .ml-md &#60footer class=&quotactionbar&quot&#62
+      &#60/body&quot&#62
+  %section.section
+    %h2.mb-heading Dummy Content
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+%aside.metasidebar
+  %details.metasidebar-wrapper{open:"true"}
+    %summary.metasidebar-btn
+    .metasidebar-content
+      %h2.metasidebar-title Metasidebar title
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %h3.metasidebar-subheading Metasidebar subheading
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+      %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+%footer.actionbar
+  %button.btn.btn-default.btn-primary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Primary action
+  %button.btn.btn-default.btn-secondary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Secondary action
+  %button.btn-intercom
+    %span.icon.icon-intercom

package/src/pages/examples/splitview-testcases.haml

@@ -0,0 +1,478 @@
+---
+layout: page-example.njk
+title: "Splitview Test Case Executions"
+tags: "examples"
+---
+%nav.sidebar{arialabel:'Sidebar'}
+  %a.navlink.active{href:'#'}
+    %span.navlink-badge.icon.icon-home
+    Navlink active
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug
+    Navlink
+  %details
+    %summary.navlink-container
+      .navlink
+        %span.navlink-badge.icon.icon-product
+        Navlink collapsable
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug-reproduction
+    Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
+%main.splitview-layout#ds-splitview-demo
+  .splitview-header
+    %h1 Splitview layout
+    %p This is the header which will be independent from the 2 columns.
+  .splitview-list-header
+    %h3.splitview-list-header-title 4 Executions
+    .splitview-list-header-actions
+      %details.dropdown-actions.dropright
+        %summary
+          %a.link-with-icon{href:""}
+            .icon.icon-sort-az
+            A-Z (desc)
+        .popover-menu
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-descending
+            Severity (desc)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-ascending
+            Severity (asc)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-number-ascending
+            Age (old to new)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-number-descending
+            Age (new to old)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-az
+            Title A-Z
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-za
+            Title Z-A
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
+        .icon.icon-search
+  .splitview-list
+    %details.splitview-group
+      %summary.splitview-item
+        .splitview-item-icon.icon.icon-circle.danger
+        .splitview-item-text
+          .splitview-item-title Splitview group title / Test Case title
+          .splitview-item-metainfo
+            = "#123321321 | Meta info"
+        .splitview-item-status
+          .text-with-icon
+            .icon.icon-testcase-bug
+            2
+      .splitview-item#ds-splitview-demo-item
+        .splitview-item-icon.icon.icon-cross-circle-filled.danger
+        .splitview-item-text
+          %span.icon.icon-computer-windows.mr-icon-spacing
+          %span.icon.icon-chrome.mr-icon-spacing
+          Windows 10 | Chrome
+        .splitview-item-status
+          .text-with-icon
+            .icon.icon-testcase-bug
+            2
+      .splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text
+          %span.icon.icon-computer-windows.mr-icon-spacing
+          %span.icon.icon-chrome.mr-icon-spacing
+          Windows 10 | Chrome
+    %details.splitview-group
+      %summary.splitview-item
+        .splitview-item-icon.icon.icon-circle.success
+        .splitview-item-text
+          .splitview-item-title Splitview group title / Test Case title
+          .splitview-item-metainfo
+            = "#123321321 | Meta info"
+      .splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text
+          %span.icon.icon-smartphone-apple.mr-icon-spacing
+          %span.icon.icon-safari.mr-icon-spacing
+          iOS 18 | Safari
+      .splitview-item
+        .splitview-item-icon.icon.icon-circle.success
+        .splitview-item-text
+          %span.icon.icon-tablet-android.mr-icon-spacing
+          %span.icon.icon-chrome.mr-icon-spacing
+          Android 15 | Brave
+  .splitview-details
+    .splitview-details-emptystate.empty-state-message.search Please select an item from the list to view its details.
+    .splitview-details-content
+      .splitview-details-header
+        %h3.splitview-details-title Details / Test Case Execution title
+        %a.btn.btn-sm.btn-square.btn-close-detailview#ds-demo-close-splitview{href: "#"}
+          .icon.icon-cross
+      %section.splitview-details-meta
+        %dl.list-splitview-meta
+          %dt Status
+          %dd
+            .text-with-icon
+              .status-icon.status-testcase-failed
+              Failed
+          %dt Tester
+          %dd
+            %details.dropdown-actions
+              %summary
+                .user-item.linked.sm
+                  %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                  User item with actions
+              .popover-menu
+                %a.popover-action{href:'#'}
+                  %span.icon.text-icon-default.icon-user-story-test
+                  Tester profile
+                %a.popover-action{href:'#'}
+                  %span.icon.text-icon-default.icon-review-exclamation
+                  Report tester
+          %dt Device
+          %dd
+            %span.icon.icon-computer-windows.mr-icon-spacing
+            %span.icon.icon-chrome.mr-icon-spacing
+            Windows 10 | Chrome
+          %dt Execution ID
+          %dd #1799709
+        %section
+          .section-header
+            %h5.section-title Steps
+          .list-listitems
+            %details.listitem
+              %summary.listitem-header
+                .listitem-badge.success
+                  .counter 1
+                .listitem-title Passed
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Step description
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+            %details.listitem
+              %summary.listitem-header
+                .listitem-badge.danger
+                  .counter 2
+                .listitem-title Failed
+                .listitem-metrics
+                  .listitem-metric
+                    .icon.icon-testcase-bug
+                    1
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Step description
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+                .listitem-subheadline Bugs
+                %details.listitem
+                  %summary.listitem-header
+                    .listitem-badge
+                      .icon.icon-testcase-bug
+                    .listitem-title Test Case Bug
+                    .listitem-actions
+                      .btn.collapse-btn
+                  .listitem-content
+                    %section.splitview-details-content-grid
+                      .label URL
+                      %a{href: ""} https://www.url.com
+                      .label Steps
+                      .markdown
+                        %ol
+                          %li login as crowd AUTOMATOR
+                          %li Join a project, complete some automation task, and LEAVE the project
+                          %li Login as project owner to perform review
+                          %li Start to review the automated task and reject it approval
+                      .label Actual result
+                      .markdown
+                        %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                      .label Expected result
+                      .markdown
+                        %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                    %section
+                      .section-header
+                        %h5.section-title Attachments
+                      .attachments
+                        .attachment
+                          %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+                            %img{src:'/assets/images/placeholders/bugdetails.png'}
+                          %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
+                        .attachment
+                          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                            %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
+                          %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                        .attachment
+                          %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                            .attachment-icon.icon-xl.icon-review-xl
+                          %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                    %section
+                      .section-header
+                        %h5.section-title Reported on
+                      .list-devices.mb-sm
+                        .device
+                          .device-icon.icon-lg.icon-computer-windows-lg
+                          .device-info
+                            Desktop | Windows 11
+                            %ul.browser-list
+                              %li.icon.icon-chrome
+                              %li.icon.icon-edge-chromium
+                    %section
+                      .section-header
+                        %h5.section-title Comments
+                      .list-chat-messages
+                        .chat-message-item
+                          %details.dropdown-actions.chat-avatar
+                            %summary
+                              .user-item.linked
+                                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                            .popover-menu
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-user-story-test
+                                Tester profile
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-review-exclamation
+                                Report tester
+                          .chat-header
+                            2 hours by 
+                            .chat-author Message sender
+                          .chat-message
+                            Here's a message 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.
+                          .chat-actions
+                            .btn
+                              .icon.icon-heart
+                        .chat-message-item
+                          %details.dropdown-actions.chat-avatar
+                            %summary
+                              .user-item.linked
+                                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                            .popover-menu
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-user-story-test
+                                Tester profile
+                              %a.popover-action{href:'#'}
+                                %span.icon.icon-review-exclamation
+                                Report tester
+                          .chat-header
+                            2 hours by 
+                            .chat-author Message sender with a much much longer name
+                          .chat-message
+                            Here's a short message which you liked.
+                            .chat-message-addons
+                              %details.popover-wrapper.dropup
+                                %summary.btn
+                                  .icon.icon-heart-filled
+                                  1
+                                .popover-menu.info
+                                  .popover-title 1 person likes this
+                                  .popover-content You
+                          .chat-actions
+                            .btn
+                              .icon.icon-heart-filled
+                %details.listitem
+                  %summary.listitem-header
+                    .listitem-badge
+                      .icon.icon-testcase-bug
+                    .listitem-title Another Test Case Bug
+                    .listitem-actions
+                      .btn.collapse-btn
+                  .listitem-content
+                    .listitem-subheadline Listitem-card
+                    .listitem-card
+                      %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+                    .listitem-subheadline Listitem-card
+                    .listitem-card
+                      %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+            %details.listitem
+              %summary.listitem-header
+                .listitem-badge.success
+                  .counter 3
+                .listitem-title Passed
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Step description
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+        %section
+          .section-header
+            %h5.section-title Bugs
+          .list-listitems
+            %details.listitem.white
+              %summary.listitem-header
+                .listitem-badge
+                  .icon.icon-testcase-bug
+                .listitem-title Test Case Bug
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                %section.splitview-details-content-grid
+                  .label URL
+                  %a{href: ""} https://www.url.com
+                  .label Steps
+                  .markdown
+                    %ol
+                      %li login as crowd AUTOMATOR
+                      %li Join a project, complete some automation task, and LEAVE the project
+                      %li Login as project owner to perform review
+                      %li Start to review the automated task and reject it approval
+                  .label Actual result
+                  .markdown
+                    %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                  .label Expected result
+                  .markdown
+                    %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+                %section
+                  .section-header
+                    %h5.section-title Attachments
+                  .attachments
+                    .attachment
+                      %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+                        %img{src:'/assets/images/placeholders/bugdetails.png'}
+                      %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
+                    .attachment
+                      %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                        %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
+                      %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                    .attachment
+                      %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                        .attachment-icon.icon-xl.icon-review-xl
+                      %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+                %section
+                  .section-header
+                    %h5.section-title Reported on
+                  .list-devices.mb-sm
+                    .device
+                      .device-icon.icon-lg.icon-computer-windows-lg
+                      .device-info
+                        Desktop | Windows 11
+                        %ul.browser-list
+                          %li.icon.icon-chrome
+                          %li.icon.icon-edge-chromium
+                %section
+                  .section-header
+                    %h5.section-title Comments
+                  .list-chat-messages
+                    .chat-message-item
+                      %details.dropdown-actions.chat-avatar
+                        %summary
+                          .user-item.linked
+                            %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                        .popover-menu
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-user-story-test
+                            Tester profile
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-review-exclamation
+                            Report tester
+                      .chat-header
+                        2 hours by 
+                        .chat-author Message sender
+                      .chat-message
+                        Here's a message 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.
+                      .chat-actions
+                        .btn
+                          .icon.icon-heart
+                    .chat-message-item
+                      %details.dropdown-actions.chat-avatar
+                        %summary
+                          .user-item.linked
+                            %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                        .popover-menu
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-user-story-test
+                            Tester profile
+                          %a.popover-action{href:'#'}
+                            %span.icon.icon-review-exclamation
+                            Report tester
+                      .chat-header
+                        2 hours by 
+                        .chat-author Message sender with a much much longer name
+                      .chat-message
+                        Here's a short message which you liked.
+                        .chat-message-addons
+                          %details.popover-wrapper.dropup
+                            %summary.btn
+                              .icon.icon-heart-filled
+                              1
+                            .popover-menu.info
+                              .popover-title 1 person likes this
+                              .popover-content You
+                      .chat-actions
+                        .btn
+                          .icon.icon-heart-filled
+            %details.listitem.white
+              %summary.listitem-header
+                .listitem-badge
+                  .icon.icon-testcase-bug
+                .listitem-title Another Test Case Bug
+                .listitem-actions
+                  .btn.collapse-btn
+              .listitem-content
+                .listitem-subheadline Listitem-card
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+                .listitem-subheadline Listitem-card
+                .listitem-card
+                  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+  %footer.splitview-list-actionbar
+    %button.btn.btn-default.btn-primary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+    %button.btn.btn-default.btn-secondary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+    %button.btn.btn-default.btn-info
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Info
+    %details.dropdown-actions.dropup.dropright
+      %summary
+        .btn.btn-square.btn-secondary
+          .icon.text-icon-default.icon-more
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+    %button.btn-intercom
+      %span.icon.icon-intercom
+  %footer.splitview-details-actionbar
+    %button.btn.btn-default.btn-primary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+    %button.btn.btn-default.btn-secondary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+    %details.dropdown-actions.dropup.dropright
+      %summary
+        .btn.btn-square.btn-secondary
+          .icon.text-icon-default.icon-more
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+    %button.btn-intercom
+      %span.icon.icon-intercom