testio-tailwind 2.1.0 → 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/email-templates/email_testinator.pug +177 -117
- 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
|
}
|
|
@@ -12,14 +12,16 @@ html(lang="en")
|
|
|
12
12
|
title test IO
|
|
13
13
|
meta(content='width=device-width', name='viewport')
|
|
14
14
|
style(type='text/css').
|
|
15
|
+
|
|
16
|
+
/* RESET STYLES */
|
|
15
17
|
#outlook a {
|
|
16
|
-
|
|
18
|
+
padding: 0;
|
|
17
19
|
}
|
|
18
20
|
.ReadMsgBody {
|
|
19
|
-
|
|
21
|
+
width: 100%;
|
|
20
22
|
}
|
|
21
23
|
.ExternalClass {
|
|
22
|
-
|
|
24
|
+
width: 100%;
|
|
23
25
|
}
|
|
24
26
|
.ExternalClass,
|
|
25
27
|
.ExternalClass p,
|
|
@@ -27,35 +29,37 @@ html(lang="en")
|
|
|
27
29
|
.ExternalClass font,
|
|
28
30
|
.ExternalClass td,
|
|
29
31
|
.ExternalClass div {
|
|
30
|
-
|
|
32
|
+
line-height: 100%;
|
|
31
33
|
}
|
|
32
34
|
body,
|
|
33
35
|
table,
|
|
34
36
|
td,
|
|
35
37
|
a {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
-webkit-text-size-adjust: 100%;
|
|
39
|
+
-ms-text-size-adjust: 100%;
|
|
38
40
|
}
|
|
39
41
|
/* Prevent WebKit and Windows mobile changing default text sizes */
|
|
40
42
|
table,
|
|
41
43
|
td {}
|
|
42
44
|
/* Remove spacing between tables in Outlook 2007 and up */
|
|
43
45
|
img {
|
|
44
|
-
|
|
46
|
+
-ms-interpolation-mode: bicubic;
|
|
45
47
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
|
|
49
|
+
.appleBody a {
|
|
50
|
+
color: #68440a;
|
|
51
|
+
text-decoration: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.appleFooter a {
|
|
55
|
+
color: #999999;
|
|
53
56
|
text-decoration: none;
|
|
54
|
-
display: block;
|
|
55
|
-
margin-bottom: 20px;
|
|
56
|
-
max-width: 500px;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
/*/// Custom styles ///*/
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
59
63
|
table {
|
|
60
64
|
border-collapse: collapse !important;
|
|
61
65
|
}
|
|
@@ -68,23 +72,73 @@ html(lang="en")
|
|
|
68
72
|
background-color: #222222;
|
|
69
73
|
}
|
|
70
74
|
|
|
75
|
+
h1,
|
|
76
|
+
h2,
|
|
77
|
+
h3,
|
|
78
|
+
h4,
|
|
79
|
+
h5,
|
|
80
|
+
h6 {
|
|
81
|
+
color: #1d1d1d;
|
|
82
|
+
line-height: 1.5;
|
|
83
|
+
padding: 0 0 0 0;
|
|
84
|
+
margin-bottom: 15px;
|
|
85
|
+
text-align: left;
|
|
86
|
+
}
|
|
87
|
+
h1 {
|
|
88
|
+
font-weight: 300 !important;
|
|
89
|
+
font-size: 35px !important;
|
|
90
|
+
line-height: 38px !important;
|
|
91
|
+
margin-top: 0;
|
|
92
|
+
}
|
|
93
|
+
h2 {
|
|
94
|
+
font-weight: 300 !important;
|
|
95
|
+
font-size: 25px !important;
|
|
96
|
+
line-height: 28px !important;
|
|
97
|
+
}
|
|
98
|
+
h3 {
|
|
99
|
+
font-weight: 300 !important;
|
|
100
|
+
font-size: 22px !important;
|
|
101
|
+
line-height: 22px !important;
|
|
102
|
+
}
|
|
103
|
+
p {
|
|
104
|
+
font-weight: 400;
|
|
105
|
+
font-size: 16px;
|
|
106
|
+
line-height: 24px;
|
|
107
|
+
padding: 0 0 15px 0;
|
|
108
|
+
color: #5f656d;
|
|
109
|
+
text-align: left;
|
|
110
|
+
}
|
|
111
|
+
img {
|
|
112
|
+
border: 0;
|
|
113
|
+
height: auto;
|
|
114
|
+
line-height: 100%;
|
|
115
|
+
outline: none;
|
|
116
|
+
text-decoration: none;
|
|
117
|
+
display: block;
|
|
118
|
+
margin-bottom: 20px;
|
|
119
|
+
width: 100%;
|
|
120
|
+
max-width: 500px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.mobile-padding {
|
|
124
|
+
width: 100%;
|
|
125
|
+
padding-left: 15px;
|
|
126
|
+
padding-right: 15px;
|
|
127
|
+
}
|
|
128
|
+
|
|
71
129
|
.email-wrapper {
|
|
72
130
|
max-width: 600px;
|
|
73
|
-
background-color: #ffffff;
|
|
74
131
|
}
|
|
75
132
|
|
|
76
133
|
.email-header {
|
|
77
|
-
|
|
78
|
-
width: 500px;
|
|
79
|
-
background-position: center;
|
|
80
|
-
background-repeat: no-repeat;
|
|
81
|
-
background-color: #222222;
|
|
134
|
+
padding-top: 20px;
|
|
82
135
|
}
|
|
83
136
|
|
|
84
137
|
.emailheader-logo {
|
|
85
138
|
display: block;
|
|
86
139
|
width: 280px;
|
|
87
140
|
height: 64px;
|
|
141
|
+
max-width: 100%;
|
|
88
142
|
}
|
|
89
143
|
|
|
90
144
|
.space-logo-container {
|
|
@@ -101,8 +155,8 @@ html(lang="en")
|
|
|
101
155
|
}
|
|
102
156
|
|
|
103
157
|
.space-logo {
|
|
158
|
+
width: 100%;
|
|
104
159
|
height: auto;
|
|
105
|
-
width: auto;
|
|
106
160
|
max-width: 300px;
|
|
107
161
|
max-height: 150px;
|
|
108
162
|
margin-bottom: 0;
|
|
@@ -117,76 +171,72 @@ html(lang="en")
|
|
|
117
171
|
}
|
|
118
172
|
|
|
119
173
|
.email-footer {
|
|
120
|
-
height: 250px;
|
|
121
174
|
width: 100%;
|
|
122
175
|
background-position: center;
|
|
123
176
|
background-repeat: no-repeat;
|
|
124
177
|
background-color: #181818;
|
|
178
|
+
font-size: 12px;
|
|
179
|
+
line-height: 18px;
|
|
180
|
+
font-family: Helvetica, Arial, sans-serif;
|
|
181
|
+
color:#666666;
|
|
125
182
|
}
|
|
126
183
|
|
|
127
|
-
|
|
184
|
+
.email-footer a {
|
|
185
|
+
color: #78EAC1
|
|
186
|
+
}
|
|
128
187
|
|
|
129
|
-
.
|
|
130
|
-
|
|
131
|
-
text-decoration: none;
|
|
188
|
+
.footer-wrapper {
|
|
189
|
+
padding: 20px 0;
|
|
132
190
|
}
|
|
133
191
|
|
|
134
|
-
.
|
|
135
|
-
|
|
136
|
-
|
|
192
|
+
.footer-logo {
|
|
193
|
+
display: block;
|
|
194
|
+
height: 40px;
|
|
195
|
+
width: auto;
|
|
196
|
+
padding-top: 20px;
|
|
137
197
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
h4,
|
|
143
|
-
h5,
|
|
144
|
-
h6 {
|
|
145
|
-
color: #1d1d1d;
|
|
146
|
-
line-height: 1.5;
|
|
147
|
-
padding: 0 0 0 0;
|
|
148
|
-
margin-bottom: 15px;
|
|
149
|
-
text-align: left;
|
|
198
|
+
|
|
199
|
+
.text-poweredby {
|
|
200
|
+
padding-top: 20px;
|
|
201
|
+
text-align: right;
|
|
150
202
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
margin-top: 0;
|
|
203
|
+
|
|
204
|
+
.footer-links {
|
|
205
|
+
text-align: center;
|
|
206
|
+
padding-bottom: 20px;
|
|
156
207
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
208
|
+
|
|
209
|
+
.footer-links a {
|
|
210
|
+
padding-left: 10px;
|
|
211
|
+
padding-right: 10px;
|
|
161
212
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
213
|
+
|
|
214
|
+
.footer-disclaimer {
|
|
215
|
+
display: block;
|
|
216
|
+
padding-bottom: 10px;
|
|
217
|
+
text-align: center;
|
|
166
218
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
color: #
|
|
173
|
-
|
|
219
|
+
|
|
220
|
+
.unsubscribe-wrapper {
|
|
221
|
+
display: block;
|
|
222
|
+
padding: 10px 10px;
|
|
223
|
+
text-align: center;
|
|
224
|
+
background-color: #1d1d1d;
|
|
225
|
+
border-top: 1px solid #5f656d;
|
|
226
|
+
font-size: 12px;
|
|
227
|
+
line-height: 18px;
|
|
228
|
+
font-family: Helvetica, Arial, sans-serif;
|
|
229
|
+
color:#666666;
|
|
174
230
|
}
|
|
231
|
+
|
|
175
232
|
.unsubscribe-wrapper a {
|
|
176
|
-
|
|
177
|
-
}
|
|
178
|
-
.unsubscribe-wrapper {
|
|
179
|
-
display: block;
|
|
180
|
-
padding: 10px 0;
|
|
181
|
-
color: #5f656d;
|
|
182
|
-
text-align: right;
|
|
183
|
-
background-color: #1d1d1d;
|
|
184
|
-
border-top: 1px solid #5f656d;
|
|
233
|
+
color: #78EAC1
|
|
185
234
|
}
|
|
186
235
|
.unsubscribe-link {
|
|
187
236
|
color: #666666;
|
|
188
237
|
margin-right: 40px;
|
|
189
238
|
}
|
|
239
|
+
|
|
190
240
|
a.email-button {
|
|
191
241
|
display: block;
|
|
192
242
|
min-height: 25px;
|
|
@@ -251,52 +301,62 @@ html(lang="en")
|
|
|
251
301
|
}
|
|
252
302
|
|
|
253
303
|
|
|
254
|
-
table(border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
255
|
-
tr
|
|
256
|
-
td.mobile-padding(align='center', vertical-align='top', width='100%', bgcolor='#181818', style="background-size: cover; padding: 35px 15px 0 15px;")
|
|
257
|
-
table(align='center', border='0', cellpadding='0', cellspacing='0', width='100%', style='max-width:600px;')
|
|
258
|
-
tr
|
|
259
|
-
td.space-logo-container(align='center')
|
|
260
|
-
img.space-logo(src='/assets/images/logo_testinator/testinator_logo_purpleteal_black_1000px.png', alt='Logo')
|
|
261
304
|
body
|
|
262
305
|
table(border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
306
|
+
tr
|
|
307
|
+
td.mobile-padding.email-header
|
|
308
|
+
table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
309
|
+
tr
|
|
310
|
+
td.space-logo-container(align='center')
|
|
311
|
+
img.space-logo(src='/assets/images/logo_testinator/testinator_logo_purpleteal_black_1000px.png', alt='Logo')
|
|
312
|
+
table(border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
313
|
+
tr
|
|
314
|
+
td.mobile-padding
|
|
315
|
+
table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
316
|
+
tr
|
|
317
|
+
td.email-content(align='center')
|
|
318
|
+
h1 Here's the main h1 heading
|
|
319
|
+
p
|
|
320
|
+
strong Strong subheadline with some lorem ipsum
|
|
321
|
+
p
|
|
322
|
+
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat facilisis purus at scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tincidunt porttitor eros, vitae vestibulum dui facilisis eu. Cras eu ipsum lacus. Integer faucibus iaculis lorem, quis pretium leo rhoncus eget. Duis sodales tincidunt est a pretium. Nunc orci nisl, dignissim non pretium sed, fermentum vel purus. Sed quis enim rhoncus leo dapibus molestie in eu risus. Sed tincidunt tristique urna. Nullam accumsan tincidunt sem vitae fermentum. Nunc est nulla, adipiscing et laoreet nec,
|
|
323
|
+
a(target='_blank', href='http://testinator.ai') convallis vel ante
|
|
324
|
+
| . Quisque cursus, odio ac pharetra tristique, diam felis lobortis orci, at blandit sem mauris eget lacus. Ut placerat posuere lacus, nec suscipit libero iaculis in.
|
|
325
|
+
a.email-button(href='#') email-button
|
|
326
|
+
img(src='/assets/images/placeholders/Approaches-desktop.png')
|
|
327
|
+
h2 Here's an h2 heading for structuring the content
|
|
328
|
+
p Fusce eget augue quam. Maecenas vehicula ligula in nibh dapibus sollicitudin. Donec eget vulputate mauris. Duis fringilla nunc vitae quam euismod non interdum orci aliquet. Duis at lacus erat, sed ultricies felis. Phasellus faucibus mauris vel odio iaculis ullamcorper. In hac habitasse platea dictumst. Integer id odio justo. Ut a ligula arcu. Vestibulum nec quam justo. Suspendisse molestie neque a enim accumsan auctor ornare lacus pellentesque. Praesent vitae lectus vitae sapien scelerisque auctor.
|
|
329
|
+
p Here's an announcement message containing facilisis auctor dolor, et fringilla turpis suscipit et. Pellentesque ipsum risus, vehicula eu rutrum non, ornare aliquam lectus. Donec sed tortor ut quam ultrices tincidunt. Sed sagittis tincidunt pulvinar.
|
|
330
|
+
h3 H3 New announcements
|
|
331
|
+
p.email-card
|
|
332
|
+
| A card containing some very important: Ut facilisis auctor dolor, et fringilla turpis suscipit et. Pellentesque ipsum risus, vehicula eu rutrum non, ornare aliquam lectus. Donec sed tortor ut quam ultrices tincidunt. Sed sagittis tincidunt pulvinar.
|
|
333
|
+
a.intercom-h2b-button(href='#') intercom-h2b-button
|
|
334
|
+
table.email-footer(border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
335
|
+
tr
|
|
336
|
+
td.mobile-padding
|
|
337
|
+
table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
338
|
+
tr
|
|
339
|
+
td
|
|
340
|
+
a(target='_blank', href='http://testinator.ai')
|
|
341
|
+
img.footer-logo(src='/assets/images/logo_testinator/testinator_logo_purpleteal_white_1000px.png', alt='Logo')
|
|
342
|
+
td(align='right')
|
|
343
|
+
p.text-poweredby Powered by Test IO | EPAM
|
|
344
|
+
table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
|
|
345
|
+
tr(align='center')
|
|
346
|
+
td.mobile-padding
|
|
347
|
+
.footer-disclaimer
|
|
348
|
+
| This email and its contents are intended for informational purposes only. By submitting your email address, you consented to receive communications related to your Testinator demo test. We respect your privacy and handle your data in accordance with applicable data protection laws, including the General Data Protection Regulation (GDPR). Learn more in our
|
|
349
|
+
a(target='_blank', href='https://test.io/dataprivacy') Privacy Policy
|
|
350
|
+
| .
|
|
351
|
+
tr
|
|
352
|
+
td.footer-links(align='center')
|
|
353
|
+
a(target='_blank', href='https://test.io/dataprivacy') data privacy
|
|
354
|
+
a(target='_blank', href='https://test.io/ai-in-qa/testinator') about
|
|
355
|
+
a(target='_blank', href='https://test.io/policies') terms
|
|
287
356
|
table(width='100%', cellspacing='0', cellpadding='0', border='0')
|
|
288
|
-
tbody
|
|
289
|
-
tr.email-footer(align='center')
|
|
290
|
-
td
|
|
291
|
-
table(align='center', cellpadding='0', cellspacing='0', border='0', width='600')
|
|
292
|
-
tbody
|
|
293
|
-
tr
|
|
294
|
-
td(style='padding: 10px 0 10px 30px; font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;', valign='middle', align='left')
|
|
295
|
-
a(target='_blank', href='http://testinator.ai')
|
|
296
|
-
img(style='display: block;', height='30', width='190', src='/assets/images/logo_testinator/testinator_logo_purpleteal_white_1000px.png', alt='Logo')
|
|
297
|
-
td(style='padding: 10px 0 10px 30px; font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;', valign='middle', align='left')
|
|
298
|
-
p Powered by Test IO | EPAM
|
|
299
357
|
tr
|
|
300
358
|
td
|
|
301
|
-
.unsubscribe-wrapper
|
|
302
|
-
|
|
|
359
|
+
.unsubscribe-wrapper
|
|
360
|
+
| If you received this email in error or would like to request to access, update, or delete your data, you can
|
|
361
|
+
a(target='_blank', href='mailto:testinator@test.io') contact us
|
|
362
|
+
| anytime.
|
|
@@ -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
|