testio-tailwind 2.1.1 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/assets/stylesheets/app.css +1 -7
- package/src/assets/stylesheets/components/gallery.css +35 -0
- package/src/assets/stylesheets/components/metasidebar.css +9 -9
- package/src/assets/stylesheets/components/splitview.css +26 -6
- package/src/pages/examples/splitview-metasidebar.haml +397 -0
- package/src/pages/examples/splitview-testcases.haml +23 -23
- package/src/pages/examples/splitview.haml +31 -32
package/package.json
CHANGED
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
@import './components/form_grid.css' layer(components);
|
|
38
38
|
@import './components/form_card.css' layer(components);
|
|
39
39
|
@import './components/forms.css' layer(components);
|
|
40
|
+
@import './components/gallery.css' layer(components);
|
|
40
41
|
@import './components/search.css' layer(components);
|
|
41
42
|
@import './components/tom_select.css' layer(components);
|
|
42
43
|
@import './components/trix_editor.css' layer(components);
|
|
@@ -95,10 +96,3 @@
|
|
|
95
96
|
border-color: var(--color-gray-200, currentcolor);
|
|
96
97
|
}
|
|
97
98
|
}
|
|
98
|
-
|
|
99
|
-
.source-sans-3-<uniquifier> {
|
|
100
|
-
font-family: "Source Sans 3", sans-serif;
|
|
101
|
-
font-optical-sizing: auto;
|
|
102
|
-
font-weight: <weight>;
|
|
103
|
-
font-style: normal;
|
|
104
|
-
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
|
|
2
|
+
.gallery {
|
|
3
|
+
@apply relative flex flex-row items-stretch mb-spacing w-full min-h-40 max-h-96 overflow-hidden;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.gallery-btn {
|
|
7
|
+
@apply flex shrink-0 justify-center items-center w-spacing top-0 z-10 bg-white text-primary hover:text-white hover:bg-link-hover cursor-pointer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.gallery-btn:hover::before {
|
|
11
|
+
@apply bg-white;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.gallery-btn::before {
|
|
15
|
+
@apply inline-block w-sm h-icon bg-primary;
|
|
16
|
+
content: "";
|
|
17
|
+
mask-repeat: no-repeat;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.gallery-btn.left::before {
|
|
21
|
+
mask-image: url("/assets/images/icons/arrow-left.svg");
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.gallery-btn.right::before {
|
|
25
|
+
mask-image: url("/assets/images/icons/arrow-right.svg");
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.gallery-slides {
|
|
29
|
+
@apply flex flex-row overflow-hidden;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.gallery-slides a,
|
|
33
|
+
.gallery-slides img {
|
|
34
|
+
@apply h-full w-auto ml-xxs first:ml-0;
|
|
35
|
+
}
|
|
@@ -3,47 +3,47 @@ aside.metasidebar {
|
|
|
3
3
|
grid-area: aside;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
@apply relative inline-flex items-center justify-center h-full w-spacing border-l border-bordercolor;
|
|
6
|
+
.metasidebar-btn {
|
|
7
|
+
@apply relative inline-flex items-center justify-center h-full w-spacing border-l border-bordercolor cursor-pointer;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
.metasidebar-btn::after {
|
|
11
11
|
@apply inline-block right-xs bg-primary top-xs w-xs h-icon;
|
|
12
12
|
content: "";
|
|
13
13
|
mask-image: url("/assets/images/icons/arrow-left.svg");
|
|
14
14
|
mask-repeat: no-repeat;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
.metasidebar-btn:hover {
|
|
18
18
|
@apply bg-link-hover;
|
|
19
19
|
&:after {
|
|
20
20
|
@apply bg-white;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
.metasidebar-wrapper[open] .metasidebar-btn {
|
|
25
25
|
@apply absolute w-md;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
.metasidebar-wrapper[open] .metasidebar-btn::after {
|
|
29
29
|
mask-image: url("/assets/images/icons/arrow-right.svg");
|
|
30
30
|
mask-repeat: no-repeat;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
.metasidebar-wrapper {
|
|
35
35
|
@apply relative grid h-full max-h-full min-h-0 bg-white;
|
|
36
36
|
grid-template-columns: auto 1fr;
|
|
37
37
|
grid-template-rows: minmax(0, 1fr);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
.metasidebar-wrapper[open] {
|
|
41
41
|
@media (width >= theme(--breakpoint-sm)) {
|
|
42
42
|
@apply relative grid top-auto;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
.metasidebar-content {
|
|
47
47
|
@apply relative block sm:w-meta-sidebar-width max-h-full min-h-0 ml-md pt-spacing pr-spacing pb-xxl pl-xs overflow-y-scroll;
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"splitview-list-header splitview-details"
|
|
5
5
|
"splitview-list splitview-details"
|
|
6
6
|
"splitview-list-actionbar splitview-details-actionbar";
|
|
7
|
-
grid-template-columns: 1fr;
|
|
7
|
+
grid-template-columns: auto 1fr;
|
|
8
8
|
grid-template-rows: auto auto 1fr auto;
|
|
9
9
|
grid-area: main;
|
|
10
10
|
@media (width >= theme(--breakpoint-lg)) {
|
|
@@ -30,17 +30,24 @@
|
|
|
30
30
|
@apply hidden;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
.splitview-layout .metasidebar {
|
|
34
|
+
@apply hidden;
|
|
35
|
+
}
|
|
36
|
+
|
|
33
37
|
.splitview-layout.item-selected .splitview-list-header {
|
|
34
38
|
@apply hidden lg:flex;
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
.splitview-layout.item-selected .splitview-list {
|
|
38
|
-
@apply hidden lg:
|
|
42
|
+
@apply hidden lg:grid overflow-x-hidden;
|
|
39
43
|
}
|
|
40
44
|
|
|
41
45
|
.splitview-layout.item-selected {
|
|
42
46
|
|
|
43
47
|
.splitview-details {
|
|
48
|
+
display: grid;
|
|
49
|
+
}
|
|
50
|
+
.metasidebar {
|
|
44
51
|
display: block;
|
|
45
52
|
}
|
|
46
53
|
.splitview-details-content {
|
|
@@ -59,8 +66,9 @@
|
|
|
59
66
|
display: flex;
|
|
60
67
|
}
|
|
61
68
|
.splitview-list {
|
|
62
|
-
|
|
63
|
-
grid-row-
|
|
69
|
+
display: block;
|
|
70
|
+
/* grid-row-start: 3;
|
|
71
|
+
grid-row-end: 5; */
|
|
64
72
|
}
|
|
65
73
|
}
|
|
66
74
|
|
|
@@ -105,8 +113,16 @@
|
|
|
105
113
|
/*///// Splitview Details /////*/
|
|
106
114
|
|
|
107
115
|
.splitview-details {
|
|
108
|
-
@apply
|
|
116
|
+
@apply grid overflow-hidden h-full max-h-full min-h-0 max-w-full min-w-0 lg:border-l-2 border-bordercolor;
|
|
109
117
|
grid-area: splitview-details;
|
|
118
|
+
grid-template-areas: "details-content details-metasidebar"
|
|
119
|
+
"details-actionbar details-actionbar";
|
|
120
|
+
grid-template-columns: 1fr auto;
|
|
121
|
+
grid-template-rows: minmax(0, 1fr) auto;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.splitview-details-content {
|
|
125
|
+
@apply pb-xl px-spacing overflow-x-hidden overflow-y-scroll;
|
|
110
126
|
}
|
|
111
127
|
|
|
112
128
|
.splitview-details-header {
|
|
@@ -174,6 +190,10 @@
|
|
|
174
190
|
}
|
|
175
191
|
}
|
|
176
192
|
|
|
193
|
+
.splitview-details .metasidebar {
|
|
194
|
+
grid-area: details-metasidebar;
|
|
195
|
+
}
|
|
196
|
+
|
|
177
197
|
/*///// Splitview actionbars /////*/
|
|
178
198
|
|
|
179
199
|
.splitview-list-actionbar {
|
|
@@ -185,7 +205,7 @@
|
|
|
185
205
|
|
|
186
206
|
.splitview-details-actionbar {
|
|
187
207
|
@apply hidden bg-info px-body-padding-mobile sm:px-body-padding-tablet;
|
|
188
|
-
|
|
208
|
+
grid-area: details-actionbar;
|
|
189
209
|
.popover-menu {
|
|
190
210
|
@apply bg-info;
|
|
191
211
|
}
|
|
@@ -0,0 +1,397 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: page-example.njk
|
|
3
|
+
title: "Splitview Layout with metasidebar"
|
|
4
|
+
tags: "examples"
|
|
5
|
+
---
|
|
6
|
+
%nav.sidebar{arialabel:'Sidebar'}
|
|
7
|
+
%a.navlink.active{href:'#'}
|
|
8
|
+
%span.navlink-badge.icon.icon-home
|
|
9
|
+
Navlink active
|
|
10
|
+
%a.navlink{href:'#'}
|
|
11
|
+
%span.navlink-badge.icon.icon-bug
|
|
12
|
+
Navlink
|
|
13
|
+
%details
|
|
14
|
+
%summary.navlink-container
|
|
15
|
+
.navlink
|
|
16
|
+
%span.navlink-badge.icon.icon-product
|
|
17
|
+
Navlink collapsable
|
|
18
|
+
%a.navlink{href:'#'}
|
|
19
|
+
%span.navlink-badge.icon.icon-test
|
|
20
|
+
Navlink children
|
|
21
|
+
%a.navlink{href:'#'}
|
|
22
|
+
%span.navlink-badge.icon.icon-test
|
|
23
|
+
Navlink children
|
|
24
|
+
%a.navlink{href:'#'}
|
|
25
|
+
%span.navlink-badge.icon.icon-test
|
|
26
|
+
Navlink children
|
|
27
|
+
%a.navlink{href:'#'}
|
|
28
|
+
%span.navlink-badge.icon.icon-test
|
|
29
|
+
Navlink children
|
|
30
|
+
%a.navlink{href:'#'}
|
|
31
|
+
%span.navlink-badge.icon.icon-bug-reproduction
|
|
32
|
+
Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
|
|
33
|
+
|
|
34
|
+
%main.splitview-layout#ds-splitview-demo
|
|
35
|
+
.splitview-header
|
|
36
|
+
%h1 Splitview layout
|
|
37
|
+
%p This is the header which will be independent from the 2 columns.
|
|
38
|
+
.splitview-list-header
|
|
39
|
+
.form-check.sm
|
|
40
|
+
%input{type:'checkbox'}
|
|
41
|
+
%h3.splitview-list-header-title 18 Bugs
|
|
42
|
+
.splitview-list-header-actions
|
|
43
|
+
%details.dropdown-actions.dropright
|
|
44
|
+
%summary
|
|
45
|
+
%a.link-with-icon{href:""}
|
|
46
|
+
.icon.icon-sort-descending
|
|
47
|
+
Severity (desc)
|
|
48
|
+
.popover-menu
|
|
49
|
+
%a.popover-action{href:'#'}
|
|
50
|
+
%span.icon.icon-sort-descending
|
|
51
|
+
Severity (desc)
|
|
52
|
+
%a.popover-action{href:'#'}
|
|
53
|
+
%span.icon.icon-sort-ascending
|
|
54
|
+
Severity (asc)
|
|
55
|
+
%a.popover-action{href:'#'}
|
|
56
|
+
%span.icon.icon-sort-number-ascending
|
|
57
|
+
Age (old to new)
|
|
58
|
+
%a.popover-action{href:'#'}
|
|
59
|
+
%span.icon.icon-sort-number-descending
|
|
60
|
+
Age (new to old)
|
|
61
|
+
%a.popover-action{href:'#'}
|
|
62
|
+
%span.icon.icon-sort-az
|
|
63
|
+
Title A-Z
|
|
64
|
+
%a.popover-action{href:'#'}
|
|
65
|
+
%span.icon.icon-sort-za
|
|
66
|
+
Title Z-A
|
|
67
|
+
%a.linked-icon{href:""}
|
|
68
|
+
.icon.icon-filter
|
|
69
|
+
%a.linked-icon{href:""}
|
|
70
|
+
.icon.icon-search
|
|
71
|
+
.splitview-list
|
|
72
|
+
.splitview-item#ds-splitview-demo-item
|
|
73
|
+
.splitview-item-checkbox.form-check.sm
|
|
74
|
+
%input{type:'checkbox'}
|
|
75
|
+
.splitview-item-icon.icon.icon-critical
|
|
76
|
+
.splitview-item-text
|
|
77
|
+
.splitview-item-title Select this splitscreen item to view a demo of the behavior
|
|
78
|
+
.splitview-item-metainfo
|
|
79
|
+
= "#123321321 | Product Detail Page"
|
|
80
|
+
%br
|
|
81
|
+
= "by ÜberTester | Submitted"
|
|
82
|
+
.splitview-item-status
|
|
83
|
+
.status-icon.status-submitted
|
|
84
|
+
.splitview-item
|
|
85
|
+
.splitview-item-checkbox.form-check.sm
|
|
86
|
+
%input{type:'checkbox'}
|
|
87
|
+
.splitview-item-icon.icon.icon-critical
|
|
88
|
+
.splitview-item-text
|
|
89
|
+
.splitview-item-title Selected splitview item title 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.
|
|
90
|
+
.splitview-item-metainfo
|
|
91
|
+
= "#123321321 | Product Detail Page"
|
|
92
|
+
%br
|
|
93
|
+
= "by ÜberTester | Submitted"
|
|
94
|
+
.splitview-item-status
|
|
95
|
+
.status-icon.status-submitted
|
|
96
|
+
.status-icon.status-manager-question
|
|
97
|
+
.status-icon.status-reproduction
|
|
98
|
+
.splitview-item
|
|
99
|
+
.splitview-item-checkbox.form-check.sm
|
|
100
|
+
%input{type:'checkbox'}
|
|
101
|
+
.splitview-item-icon.icon.icon-critical
|
|
102
|
+
.splitview-item-text
|
|
103
|
+
.splitview-item-title Splitview item title
|
|
104
|
+
.splitview-item-metainfo
|
|
105
|
+
= "#123321321 | Product Detail Page"
|
|
106
|
+
%br
|
|
107
|
+
= "by ÜberTester | Submitted"
|
|
108
|
+
.splitview-item-status
|
|
109
|
+
.status-icon.status-manager-approved
|
|
110
|
+
.splitview-item
|
|
111
|
+
.splitview-item-checkbox.form-check.sm
|
|
112
|
+
%input{type:'checkbox'}
|
|
113
|
+
.splitview-item-icon.icon.icon-critical
|
|
114
|
+
.splitview-item-text
|
|
115
|
+
.splitview-item-title Splitview item title 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.
|
|
116
|
+
.splitview-item-metainfo
|
|
117
|
+
= "#123321321 | Product Detail Page"
|
|
118
|
+
%br
|
|
119
|
+
= "by ÜberTester | Submitted"
|
|
120
|
+
.splitview-item-status
|
|
121
|
+
.status-icon.status-customer-approved
|
|
122
|
+
.splitview-item
|
|
123
|
+
.splitview-item-checkbox.form-check.sm
|
|
124
|
+
%input{type:'checkbox'}
|
|
125
|
+
.splitview-item-icon.icon.icon-critical
|
|
126
|
+
.splitview-item-text
|
|
127
|
+
.splitview-item-title Splitview item title
|
|
128
|
+
.splitview-item-metainfo
|
|
129
|
+
= "#123321321 | Product Detail Page"
|
|
130
|
+
%br
|
|
131
|
+
= "by ÜberTester | Submitted"
|
|
132
|
+
.splitview-item-status
|
|
133
|
+
.status-icon.status-customer-rejected
|
|
134
|
+
.splitview-item
|
|
135
|
+
.splitview-item-checkbox.form-check.sm
|
|
136
|
+
%input{type:'checkbox'}
|
|
137
|
+
.splitview-item-icon.icon.icon-critical
|
|
138
|
+
.splitview-item-text
|
|
139
|
+
.splitview-item-title Splitview item title 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.
|
|
140
|
+
.splitview-item-metainfo
|
|
141
|
+
= "#123321321 | Product Detail Page"
|
|
142
|
+
%br
|
|
143
|
+
= "by ÜberTester | Submitted"
|
|
144
|
+
.list-tags
|
|
145
|
+
.tag-item.focus-group Focus-group tag
|
|
146
|
+
.splitview-item
|
|
147
|
+
.splitview-item-checkbox.form-check.sm
|
|
148
|
+
%input{type:'checkbox'}
|
|
149
|
+
.splitview-item-icon.icon.icon-critical
|
|
150
|
+
.splitview-item-text
|
|
151
|
+
.splitview-item-title Splitview item title 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.
|
|
152
|
+
.splitview-item-metainfo
|
|
153
|
+
= "#123321321 | Product Detail Page"
|
|
154
|
+
%br
|
|
155
|
+
= "by ÜberTester | Submitted"
|
|
156
|
+
.splitview-item
|
|
157
|
+
.splitview-item-checkbox.form-check.sm
|
|
158
|
+
%input{type:'checkbox'}
|
|
159
|
+
.splitview-item-icon.icon.icon-critical
|
|
160
|
+
.splitview-item-text
|
|
161
|
+
.splitview-item-title Selected splitview item title 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.
|
|
162
|
+
.splitview-item-metainfo
|
|
163
|
+
= "#123321321 | Product Detail Page"
|
|
164
|
+
%br
|
|
165
|
+
= "by ÜberTester | Submitted"
|
|
166
|
+
.splitview-item-status
|
|
167
|
+
.status-icon.status-submitted
|
|
168
|
+
.status-icon.status-manager-question
|
|
169
|
+
.status-icon.status-reproduction
|
|
170
|
+
.splitview-item
|
|
171
|
+
.splitview-item-checkbox.form-check.sm
|
|
172
|
+
%input{type:'checkbox'}
|
|
173
|
+
.splitview-item-icon.icon.icon-critical
|
|
174
|
+
.splitview-item-text
|
|
175
|
+
.splitview-item-title Splitview item title
|
|
176
|
+
.splitview-item-metainfo
|
|
177
|
+
= "#123321321 | Product Detail Page"
|
|
178
|
+
%br
|
|
179
|
+
= "by ÜberTester | Submitted"
|
|
180
|
+
.splitview-item-status
|
|
181
|
+
.status-icon.status-manager-approved
|
|
182
|
+
.splitview-item
|
|
183
|
+
.splitview-item-checkbox.form-check.sm
|
|
184
|
+
%input{type:'checkbox'}
|
|
185
|
+
.splitview-item-icon.icon.icon-critical
|
|
186
|
+
.splitview-item-text
|
|
187
|
+
.splitview-item-title Splitview item title 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.
|
|
188
|
+
.splitview-item-metainfo
|
|
189
|
+
= "#123321321 | Product Detail Page"
|
|
190
|
+
%br
|
|
191
|
+
= "by ÜberTester | Submitted"
|
|
192
|
+
.splitview-item-status
|
|
193
|
+
.status-icon.status-customer-approved
|
|
194
|
+
.splitview-item
|
|
195
|
+
.splitview-item-checkbox.form-check.sm
|
|
196
|
+
%input{type:'checkbox'}
|
|
197
|
+
.splitview-item-icon.icon.icon-critical
|
|
198
|
+
.splitview-item-text
|
|
199
|
+
.splitview-item-title Splitview item title
|
|
200
|
+
.splitview-item-metainfo
|
|
201
|
+
= "#123321321 | Product Detail Page"
|
|
202
|
+
%br
|
|
203
|
+
= "by ÜberTester | Submitted"
|
|
204
|
+
.splitview-item-status
|
|
205
|
+
.status-icon.status-customer-rejected
|
|
206
|
+
.splitview-item
|
|
207
|
+
.splitview-item-checkbox.form-check.sm
|
|
208
|
+
%input{type:'checkbox'}
|
|
209
|
+
.splitview-item-icon.icon.icon-critical
|
|
210
|
+
.splitview-item-text
|
|
211
|
+
.splitview-item-title Splitview item title 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.
|
|
212
|
+
.splitview-item-metainfo
|
|
213
|
+
= "#123321321 | Product Detail Page"
|
|
214
|
+
%br
|
|
215
|
+
= "by ÜberTester | Submitted"
|
|
216
|
+
.list-tags
|
|
217
|
+
.tag-item.focus-group Focus-group tag
|
|
218
|
+
.splitview-details
|
|
219
|
+
.splitview-details-emptystate.empty-state-message.search Please select an item from the list to view its details.
|
|
220
|
+
.splitview-details-content
|
|
221
|
+
.splitview-details-header
|
|
222
|
+
.icon.icon-critical
|
|
223
|
+
%h3.splitview-details-title Error page is shown if Project Owner reject review after Automator left the project
|
|
224
|
+
%a.btn.btn-sm.btn-square.btn-close-detailview#ds-demo-close-splitview{href: "#"}
|
|
225
|
+
.icon.icon-cross
|
|
226
|
+
.splitview-details-meta
|
|
227
|
+
%dl.list-splitview-meta
|
|
228
|
+
%dt Status
|
|
229
|
+
%dd
|
|
230
|
+
.text-with-icon
|
|
231
|
+
.status-icon.status-submitted
|
|
232
|
+
Submitted
|
|
233
|
+
%dt Bug ID
|
|
234
|
+
%dd #1799709
|
|
235
|
+
%details.meta-collapsable
|
|
236
|
+
%summary
|
|
237
|
+
.summary-closed Show more
|
|
238
|
+
.summary-open Show less
|
|
239
|
+
%dl.list-splitview-meta
|
|
240
|
+
%dt Bug Type
|
|
241
|
+
%dd
|
|
242
|
+
.text-with-icon
|
|
243
|
+
.icon.icon-bug
|
|
244
|
+
Functional
|
|
245
|
+
%dt Reported on
|
|
246
|
+
%dd October 5, 2021 11:48 AM
|
|
247
|
+
%dt Severity
|
|
248
|
+
%dd
|
|
249
|
+
.text-with-icon
|
|
250
|
+
.icon.icon-critical
|
|
251
|
+
Critical
|
|
252
|
+
%dt Feature
|
|
253
|
+
%dd
|
|
254
|
+
%a{href: ""} Feature name
|
|
255
|
+
%dt Known Bug
|
|
256
|
+
%dd
|
|
257
|
+
.text-with-icon
|
|
258
|
+
.icon.icon-bug-known
|
|
259
|
+
No
|
|
260
|
+
%dt Test ID
|
|
261
|
+
%dd #88219
|
|
262
|
+
%dt Tester
|
|
263
|
+
%dd
|
|
264
|
+
%details.dropdown-actions
|
|
265
|
+
%summary
|
|
266
|
+
.user-item.linked.sm
|
|
267
|
+
%img{src:"/assets/images/placeholders/profile_supergirl.png"}
|
|
268
|
+
User item with actions
|
|
269
|
+
.popover-menu
|
|
270
|
+
%a.popover-action{href:'#'}
|
|
271
|
+
%span.icon.text-icon-default.icon-user-story-test
|
|
272
|
+
Tester profile
|
|
273
|
+
%a.popover-action{href:'#'}
|
|
274
|
+
%span.icon.text-icon-default.icon-review-exclamation
|
|
275
|
+
Report tester
|
|
276
|
+
.gallery
|
|
277
|
+
.gallery-btn.left
|
|
278
|
+
.gallery-slides
|
|
279
|
+
%a.active{href: ""}
|
|
280
|
+
%img{src:"/assets/images/placeholders/Approaches-desktop.png"}
|
|
281
|
+
%a{href: ""}
|
|
282
|
+
%img{src:"/assets/images/placeholders/Approaches-desktop.png"}
|
|
283
|
+
.gallery-btn.right
|
|
284
|
+
%section.splitview-details-content-grid
|
|
285
|
+
.label URL
|
|
286
|
+
%a{href: ""} https://www.url.com
|
|
287
|
+
.label Steps
|
|
288
|
+
.markdown
|
|
289
|
+
%ol
|
|
290
|
+
%li
|
|
291
|
+
Go to
|
|
292
|
+
%a{href: ""} https://www.url.com
|
|
293
|
+
and login as crowd AUTOMATOR (
|
|
294
|
+
%a{href: ""} email@qa.team
|
|
295
|
+
\/ abc123 was in my case)
|
|
296
|
+
%li Join a project, complete some automation task, and LEAVE the project
|
|
297
|
+
%li
|
|
298
|
+
Login
|
|
299
|
+
%a{href: ""} https://www.url.com
|
|
300
|
+
as project owner to perform review (
|
|
301
|
+
%a{href: ""} email@qa.team
|
|
302
|
+
\/ abc123 was in my case)
|
|
303
|
+
%li Start to review the automated task and reject it approval
|
|
304
|
+
.label Actual result
|
|
305
|
+
.markdown
|
|
306
|
+
%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.
|
|
307
|
+
.label Expected result
|
|
308
|
+
.markdown
|
|
309
|
+
%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.
|
|
310
|
+
%section
|
|
311
|
+
.section-header
|
|
312
|
+
%h5.section-title Attachments
|
|
313
|
+
.attachments
|
|
314
|
+
.attachment
|
|
315
|
+
%a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
|
|
316
|
+
%img{src:'/assets/images/placeholders/bugdetails.png'}
|
|
317
|
+
%a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
|
|
318
|
+
.attachment
|
|
319
|
+
%a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
|
|
320
|
+
%img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
|
|
321
|
+
%a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
|
|
322
|
+
.attachment
|
|
323
|
+
%a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
|
|
324
|
+
.attachment-icon.icon-xl.icon-review-xl
|
|
325
|
+
%a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
|
|
326
|
+
%section
|
|
327
|
+
.section-header
|
|
328
|
+
%h5.section-title Reported on
|
|
329
|
+
.list-devices.mb-sm
|
|
330
|
+
.device
|
|
331
|
+
.device-icon.icon-lg.icon-computer-windows-lg
|
|
332
|
+
.device-info
|
|
333
|
+
Desktop | Windows 11
|
|
334
|
+
%ul.browser-list
|
|
335
|
+
%li.icon.icon-chrome
|
|
336
|
+
%li.icon.icon-edge-chromium
|
|
337
|
+
%section
|
|
338
|
+
.section-header
|
|
339
|
+
%h5.section-title Comments
|
|
340
|
+
.empty-state-message.chat No comments yet
|
|
341
|
+
.metasidebar
|
|
342
|
+
%details.metasidebar-wrapper{open:"true"}
|
|
343
|
+
%summary.metasidebar-btn
|
|
344
|
+
.metasidebar-content
|
|
345
|
+
%h2.metasidebar-title Metasidebar title
|
|
346
|
+
%p.mb-md Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
|
347
|
+
%h3.metasidebar-subheading Metasidebar subheading
|
|
348
|
+
%p.mb-xs 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 vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
|
|
349
|
+
%footer.splitview-details-actionbar
|
|
350
|
+
%button.btn.btn-default.btn-primary
|
|
351
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
352
|
+
Primary
|
|
353
|
+
%button.btn.btn-default.btn-secondary
|
|
354
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
355
|
+
Secondary
|
|
356
|
+
%details.dropdown-actions.dropup.dropright
|
|
357
|
+
%summary
|
|
358
|
+
.btn.btn-square.btn-secondary
|
|
359
|
+
.icon.text-icon-default.icon-more
|
|
360
|
+
.popover-menu
|
|
361
|
+
%a.popover-action{href:'#'}
|
|
362
|
+
%span.icon.text-icon-default.icon-pencil
|
|
363
|
+
Edit
|
|
364
|
+
%a.popover-action{href:'#'}
|
|
365
|
+
%span.icon.text-icon-default.icon-duplicate
|
|
366
|
+
Duplicate
|
|
367
|
+
%a.popover-action{href:'#'}
|
|
368
|
+
%span.icon.text-icon-default.icon-remove
|
|
369
|
+
Delete
|
|
370
|
+
%button.btn-intercom
|
|
371
|
+
%span.icon.icon-intercom
|
|
372
|
+
%footer.splitview-list-actionbar
|
|
373
|
+
%button.btn.btn-default.btn-primary
|
|
374
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
375
|
+
Primary
|
|
376
|
+
%button.btn.btn-default.btn-secondary
|
|
377
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
378
|
+
Secondary
|
|
379
|
+
%button.btn.btn-default.btn-info
|
|
380
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
381
|
+
Info
|
|
382
|
+
%details.dropdown-actions.dropup.dropright
|
|
383
|
+
%summary
|
|
384
|
+
.btn.btn-square.btn-secondary
|
|
385
|
+
.icon.text-icon-default.icon-more
|
|
386
|
+
.popover-menu
|
|
387
|
+
%a.popover-action{href:'#'}
|
|
388
|
+
%span.icon.text-icon-default.icon-pencil
|
|
389
|
+
Edit
|
|
390
|
+
%a.popover-action{href:'#'}
|
|
391
|
+
%span.icon.text-icon-default.icon-duplicate
|
|
392
|
+
Duplicate
|
|
393
|
+
%a.popover-action{href:'#'}
|
|
394
|
+
%span.icon.text-icon-default.icon-remove
|
|
395
|
+
Delete
|
|
396
|
+
%button.btn-intercom
|
|
397
|
+
%span.icon.icon-intercom
|
|
@@ -427,6 +427,29 @@ tags: "examples"
|
|
|
427
427
|
.listitem-subheadline Listitem-card
|
|
428
428
|
.listitem-card
|
|
429
429
|
%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.
|
|
430
|
+
%footer.splitview-details-actionbar
|
|
431
|
+
%button.btn.btn-default.btn-primary
|
|
432
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
433
|
+
Primary
|
|
434
|
+
%button.btn.btn-default.btn-secondary
|
|
435
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
436
|
+
Secondary
|
|
437
|
+
%details.dropdown-actions.dropup.dropright
|
|
438
|
+
%summary
|
|
439
|
+
.btn.btn-square.btn-secondary
|
|
440
|
+
.icon.text-icon-default.icon-more
|
|
441
|
+
.popover-menu
|
|
442
|
+
%a.popover-action{href:'#'}
|
|
443
|
+
%span.icon.text-icon-default.icon-pencil
|
|
444
|
+
Edit
|
|
445
|
+
%a.popover-action{href:'#'}
|
|
446
|
+
%span.icon.text-icon-default.icon-duplicate
|
|
447
|
+
Duplicate
|
|
448
|
+
%a.popover-action{href:'#'}
|
|
449
|
+
%span.icon.text-icon-default.icon-remove
|
|
450
|
+
Delete
|
|
451
|
+
%button.btn-intercom
|
|
452
|
+
%span.icon.icon-intercom
|
|
430
453
|
%footer.splitview-list-actionbar
|
|
431
454
|
%button.btn.btn-default.btn-primary
|
|
432
455
|
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
@@ -453,26 +476,3 @@ tags: "examples"
|
|
|
453
476
|
Delete
|
|
454
477
|
%button.btn-intercom
|
|
455
478
|
%span.icon.icon-intercom
|
|
456
|
-
%footer.splitview-details-actionbar
|
|
457
|
-
%button.btn.btn-default.btn-primary
|
|
458
|
-
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
459
|
-
Primary
|
|
460
|
-
%button.btn.btn-default.btn-secondary
|
|
461
|
-
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
462
|
-
Secondary
|
|
463
|
-
%details.dropdown-actions.dropup.dropright
|
|
464
|
-
%summary
|
|
465
|
-
.btn.btn-square.btn-secondary
|
|
466
|
-
.icon.text-icon-default.icon-more
|
|
467
|
-
.popover-menu
|
|
468
|
-
%a.popover-action{href:'#'}
|
|
469
|
-
%span.icon.text-icon-default.icon-pencil
|
|
470
|
-
Edit
|
|
471
|
-
%a.popover-action{href:'#'}
|
|
472
|
-
%span.icon.text-icon-default.icon-duplicate
|
|
473
|
-
Duplicate
|
|
474
|
-
%a.popover-action{href:'#'}
|
|
475
|
-
%span.icon.text-icon-default.icon-remove
|
|
476
|
-
Delete
|
|
477
|
-
%button.btn-intercom
|
|
478
|
-
%span.icon.icon-intercom
|
|
@@ -273,15 +273,14 @@ tags: "examples"
|
|
|
273
273
|
%a.popover-action{href:'#'}
|
|
274
274
|
%span.icon.text-icon-default.icon-review-exclamation
|
|
275
275
|
Report tester
|
|
276
|
-
.gallery
|
|
277
|
-
.gallery-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
%img{src:"/assets/images/placeholders/Approaches-desktop.png"}
|
|
276
|
+
.gallery
|
|
277
|
+
.gallery-btn.left
|
|
278
|
+
.gallery-slides
|
|
279
|
+
%a.active{href: ""}
|
|
280
|
+
%img{src:"/assets/images/placeholders/Approaches-desktop.png"}
|
|
281
|
+
%a{href: ""}
|
|
282
|
+
%img{src:"/assets/images/placeholders/Approaches-desktop.png"}
|
|
283
|
+
.gallery-btn.right
|
|
285
284
|
%section.splitview-details-content-grid
|
|
286
285
|
.label URL
|
|
287
286
|
%a{href: ""} https://www.url.com
|
|
@@ -339,6 +338,29 @@ tags: "examples"
|
|
|
339
338
|
.section-header
|
|
340
339
|
%h5.section-title Comments
|
|
341
340
|
.empty-state-message.chat No comments yet
|
|
341
|
+
%footer.splitview-details-actionbar
|
|
342
|
+
%button.btn.btn-default.btn-primary
|
|
343
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
344
|
+
Primary
|
|
345
|
+
%button.btn.btn-default.btn-secondary
|
|
346
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
347
|
+
Secondary
|
|
348
|
+
%details.dropdown-actions.dropup.dropright
|
|
349
|
+
%summary
|
|
350
|
+
.btn.btn-square.btn-secondary
|
|
351
|
+
.icon.text-icon-default.icon-more
|
|
352
|
+
.popover-menu
|
|
353
|
+
%a.popover-action{href:'#'}
|
|
354
|
+
%span.icon.text-icon-default.icon-pencil
|
|
355
|
+
Edit
|
|
356
|
+
%a.popover-action{href:'#'}
|
|
357
|
+
%span.icon.text-icon-default.icon-duplicate
|
|
358
|
+
Duplicate
|
|
359
|
+
%a.popover-action{href:'#'}
|
|
360
|
+
%span.icon.text-icon-default.icon-remove
|
|
361
|
+
Delete
|
|
362
|
+
%button.btn-intercom
|
|
363
|
+
%span.icon.icon-intercom
|
|
342
364
|
%footer.splitview-list-actionbar
|
|
343
365
|
%button.btn.btn-default.btn-primary
|
|
344
366
|
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
@@ -363,28 +385,5 @@ tags: "examples"
|
|
|
363
385
|
%a.popover-action{href:'#'}
|
|
364
386
|
%span.icon.text-icon-default.icon-remove
|
|
365
387
|
Delete
|
|
366
|
-
%button.btn-intercom
|
|
367
|
-
%span.icon.icon-intercom
|
|
368
|
-
%footer.splitview-details-actionbar
|
|
369
|
-
%button.btn.btn-default.btn-primary
|
|
370
|
-
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
371
|
-
Primary
|
|
372
|
-
%button.btn.btn-default.btn-secondary
|
|
373
|
-
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
374
|
-
Secondary
|
|
375
|
-
%details.dropdown-actions.dropup.dropright
|
|
376
|
-
%summary
|
|
377
|
-
.btn.btn-square.btn-secondary
|
|
378
|
-
.icon.text-icon-default.icon-more
|
|
379
|
-
.popover-menu
|
|
380
|
-
%a.popover-action{href:'#'}
|
|
381
|
-
%span.icon.text-icon-default.icon-pencil
|
|
382
|
-
Edit
|
|
383
|
-
%a.popover-action{href:'#'}
|
|
384
|
-
%span.icon.text-icon-default.icon-duplicate
|
|
385
|
-
Duplicate
|
|
386
|
-
%a.popover-action{href:'#'}
|
|
387
|
-
%span.icon.text-icon-default.icon-remove
|
|
388
|
-
Delete
|
|
389
388
|
%button.btn-intercom
|
|
390
389
|
%span.icon.icon-intercom
|